UXPUB

UXPUB - спільнота з 4,056 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Встречайте новый шрифт Roboto Serif
Марина Попова
Марина Попова

Опубліковано

Встречайте новый шрифт Roboto Serif

Новейший член суперсемейства Roboto создан для того, чтобы сделать чтение более комфортным в любом размере и в любом формате.

Скачайте его библиотеке GoogleFonts и ознакомьтесь с образцом текста, написанным RobotoSerif.

Прошло почти 20 лет с момента появления шрифта Georgia, созданного Мэтью Картером – одного из первых шрифтов с засечками , созданного для облегчения чтения на экранах с низким разрешением. В том году (1993 г.) американцы, имевшие доступ к Интернету, тратили менее 30 минут) в месяц на просмотр веб-страниц. Сейчас мы проводим онлайн почти семь часов в день.

К счастью, с 90-х годов чтение с экрана стало намного удобнее. Во-первых, вы можете взять свое устройство и переместиться на диван. Формы букв на экранах современных устройств также стали более четкими, плавными и разборчивыми, а также они быстрее отрисовываются. Но еще одним важным (хотя, возможно, менее очевидным) фактором является развитие технологии шрифтов. Georgia был одним из первых одиннадцати «основных шрифтов Интернета», которые проложили путь к OpenType и, в конечном итоге, к вариативным шрифтам. Сегодня хорошо спроектированныйOpenType шрифт с засечками может быть так же удобен для чтения на экране, как и в печатном виде. А хорошо спроектированный вариативный шрифт с засечками может дать читателям дополнительные преимущества при чтении с экрана. Встречайте: RobotoSerif.

«Нашей целью было создание шрифта, который вы могли бы использовать для публицистики или романа — длинных и сложных фрагментов текста, которые вы бы с комфортом читали на своем телефоне». — Грег Газдович, CommercialType

RobotoSerif присоединяется к функциональному суперсемейству Roboto наряду с Roboto (без засечек), Mono, Slab и Condensed. Но в отличие от RobotoSlab, дизайн которого был заимствован непосредственно у Roboto, этот новейший шрифт с засечками привносит в коллекцию свою индивидуальность. «Мы хотели, чтобы он ощущался комфортно рядом со шрифтом без засечек, и не казался громоздким. Не обязательно иметь засечки повсюду, чтобы донести мысль: «Я — шрифт с засечками, и у меня есть засечки везде, где только можно», — сказал Роб Джампьетро (ранее работавший в GoogleFonts, а теперь работающий UX-менеджером в Google). Джампьетро руководил ранней разработкой шрифта вместе с Грегом Газдовичем из CommercialType. Исходя из обширного опыта разработки шрифтов для изданий (TheGuardian, VanityFair, HelsinginSanomat и др.), словолитня CommercialType идеально подходила для проекта GoogleFonts.

Image description

RobotoSerif — это основной шрифт CommercialType и шрифтов Google для удобного чтения.

С помощью RobotoSerif, Газдович и его команда применили нетрадиционный подход к шрифтовому дизайну. Вместо того, чтобы взять за основу существующий или исторический шрифт, они «атомизовали» формы букв, разбивая шрифт с засечками на элементарные части. Затем они восстановили их, поэкспериментировав с различными пропорциями, типами контраста,формой концевых элементов букв, и формами засечек, чтобы выяснить, что лучше всего подходит для каждого символа. «На самом деле нужно было избавиться от изысконности, чтобы найти подходящие формы и принять обдуманные решения», — сказал Газдович.

Image description

RobotoSerif был создан путем экспериментов с различными формами и пропорциями, чтобы выяснить, какой вариант обладает лучшей читабельностью.

Оспаривая основные предположения об элементах шрифтового дизайна, он задал вопрос: «Должны ли концевые элементы быть шариками? Должны ли засечки быть засечками? Какие фигуры могут подойти? Какой уровень контраста следует выбрать? Мы не просто смотрим на экраны высокого разрешения или проектируем для экранов низкого разрешения, а задаемся вопросом: «Что характерно для чтения с экрана?»

Каждая буквенная форма была нарисована с нуля, чтобы создать шрифт, который «учитывает стиль Roboto, но представляет собой новый и оригинальный дизайн», — сказал Джампьетро.

«Часто, когда шрифтовой дизайнер говорит о чем-то экспериментальном, он имеет в виду нечто странное или проблемное, или забавную форму букв. Но это было экспериментально в том смысле, что мы выдвигали тезисы, а затем проверяли их». — Грег Газдович, CommercialType

Полученная эстетика гармонирует с остальной частью суперсемейства Roboto, а не дублирует ее в форме с засечками. С кривыми, привязанными к решающим концевым элементам, он обладает лишь минимальными чертами шрифтов с засечками. Этот минимализм отличает его от других вариативных шрифтов с засечками, созданных для чтения с экрана (например, Literata от TypeTogether, дизайн которого немного сложнее), и делает его более универсальным. На самом деле Газдович хотел создать шрифт с засечками для контекстов, в которых они обычно вообще не работают. «Если вы выберете RobotoSerif для своего проекта, то можете использовать его для инфографики или даже меню», – сказал он.

В дополнение к своему минимальному дизайну, который хорошо работает в любом масштабе, RobotoSerif был создан как вариативный шрифт с осями веса, ширины, качества, и оптического размера.

Image description

RobotoSerif автоматически оптимизируется, чтобы быть наиболее разборчивым для выбранного вами размера шрифта.

Особого внимания заслуживает ось оптического размера RobotoSerif. Оптические размеры — это разные версии шрифта, оптимизированные для использования в определенных размерах или диапазонах размеров. Чтобы добавить оптическую ось размера в вариативный шрифт, дизайнеры-шрифтовики рисуют шрифт как минимум дважды: один раз для небольших приложений (например, основной текст), а второй – для больших приложений (например, display текст). Затем пользователь может указать любую точку между этими двумя крайностями, чтобы оптимизировать дизайн под размер своего текста.

Image description

144ptRobotoSerif с оптическим размером 144pt (слева) и 8pt (справа)

Маленькие оптические размеры, как правило, имеют более низкий контраст штрихов, большие интервалы, большую x-высоту и преувеличенные детали по сравнению с аналогами display текстов, но эти преобразования не обязательно линейны. Для RobotoSerif существует шесть оптических размеров (micro, smalltext, text, deck, display и poster). Подобный уровень точности в таком широком диапазоне оптических размеров делает его идеальной рабочей лошадкой. Это удобный шрифт практически для любого размера. А благодаря CSS-свойству «font-optical-sizing», которое теперь включено по умолчанию во всех основных браузерах, такой вариативный шрифт, как RobotoSerif, автоматически оптимизируется для удобства чтения на экране.

«В некотором смысле это доказательство концепции вариативных шрифтов. Мы хотели сделать образец шрифта, удобного для чтения, который можно точно настроить». —Грег Газдович, CommercialType

RobotoSerif имеет открытый исходный код и теперь доступен в GoogleFonts. Попробуйте его и пишите в комментариях свои впечатления.

Иллюстрации Кайла Платтса, художественное оформление Эланы Шленкер, анимация QChoi.

Обговорення (2)

Згорнути/розгорнути
eugene_martynov profile image
Eugene Martynov

офигенный шрифт!

Згорнути/розгорнути
alexander_thorn profile image
Alexander Thorn

Хорошая презентация!
Благодарю за неё и статью, с удовольствием почитал и познакомился со шрифтом)
А скажите, пожалуйста, не слышно ли чего-нибудь про кириллическую версию?)