Всем привет! Сегодня поговорим о шрифтах — теме, которая многих разработчиков и дизайнеров заставляет нервно вздрогнуть. С одной стороны, хочется красоты и индивидуальности, с другой — важно избежать пестроты и безвкусицы.
Чтобы разобраться в этом вопросе без воды и мифов, я привлекла эксперта. Со мной на связи Тома Стрельцова, которая не только создаёт современные шрифты, но и с головой погружена в тему каллиграфии. Мы обсудили ключевые вопросы, которые помогут вам осознанно выбирать и использовать шрифты в веб-проектах.
В этой статье мы разберём:
Сколько шрифтов можно, а сколько — уже перебор? И как выбрать сочетающиеся шрифты?
Почему в мире так много шрифтов?
И как упростить себе работу и сделать текст красивым почти на автомате?
Погнали!
Сколько шрифтов можно использовать в одном проекте
Любой, кто открывал панель выбора шрифта в Figma или Google Fonts, видел это бесконечное многообразие. Возникает резонный вопрос: а нельзя ли обойтись одним-двумя? В теории, конечно, можно. Но есть и другие, более интересные варианты.
По мнению Томы:
обычно при создании макета того или иного ресурса, будь то сайт, интернет-магазин или книга, всегда присутствует структура текста и иерархия: заголовок, подзаголовок, описание, основной текст, сноски, цитаты, рубрики, оглавления. На основании этой иерархии можно выбирать несколько шрифтов или одно семейство шрифтов с разными начертаниями, чтобы разделить по смыслу эти группы. При этом на заголовок обычно можно ставить самый смелый акцидентный шрифт, а вот основной текст лучше набирать спокойным и читабельным.
Но как сочетать шрифты между собой, чтобы получилась гармония, а не винегрет? Есть несколько рабочих принципов, основанных на визуальных свойствах шрифта.
При сочетании разных шрифтов в одном макете важно смотреть на несколько моментов:
степень открытости шрифта (апертуру),
степень контраста,
наличие/отсутствие засечек,
пропорции.
Апертура и пропорции шрифтов (заголовочных и остальных) в идеале должны быть одного типа, а вот контраст и засечки могут отличаться.
Я сразу запуталась, потому что привыкла работать с font-name и font-weight, знаю про засечки и интерлиньяж, но вот апертура и контраст — это что-то новенькое. Тома посоветовала лекцию Александры Корольковой о том, как сочетать шрифты. Для вашего удобства мы подготовили конспект ключевых принципов с наглядными иллюстрациями.
Апертура — это степень открытости, на картинке слева открытые, справа закрытые.
Контраст — это отношение толщины тонких линий к толщине самых широких. На картинке слева контраст 1:5, справа — 1:1.
Пропорции — это отношение высоты строчных букв к прописным. Раньше мне казалось, что они всегда одинаковые! А вам?
Как выбрать сочетающиеся шрифты
Сочетание шрифтов может понадобиться в разных ситуациях. Давайте рассмотрим, как подобрать сочетания шрифтов в каждой из них.
В текущем шрифте не хватает знаков
Например, вы впиливаете на сайте i18n для выхода на международных партнёров и заказчиков, и вам понадобился новый язык или расширенная латиница, а ваш текущий шрифт не имеет нужных глифов.
Выбираем шрифт максимально похожий по всем параметрам, но с поддержкой нужных графем.
Примечание:
Графема — это элемент письма, идея символа, например, определённая буква или диакритический знак.
Глиф — это визуальная реализация графемы или нескольких связанных графем, или только части графемы, одна из компонент шрифта.
Поддержка Accessibility
Для обеспечения доступности нужно уметь отображать текст в очень крупном и очень мелком кегле. Один и тот же шрифт в таком случае хорошо работать не сможет, лучше подобрать разные на средний диапазон, на очень крупный и очень мелкий.
Выбираем шрифт, у которого засечки и открытость совпадают, а контраст и пропорции отличаются. У крупного контраст будет больше, и строчные выше. У мелкого — контраст поменьше, строчные ниже, сами буквы уже. В итоге это будет выглядеть нормально.
Классическое сочетание текста и акцентов
Выбираем для текста шрифт, который хорошо читается в наших условиях. А для акциденции выбираем шрифт, который подходит по эмоциям. Какими бы ни были шрифты, если они хорошо подобраны для своей функции, они будут сочетаться. О принципах выбора подробнее расскажем ниже.
Разделение разных текстов по смыслу
Об этом принято говорить как о шрифтовых парах, хотя шрифтов не обязательно должно быть два, можно столько, сколько нужно.
Выбираем похожие скелеты, но засечки и контраст должны отличаться.
В ходе нашего разговора Тома пояснила:
если нет желания экспериментировать с подбором разных шрифтов, можно воспользоваться готовыми решениями, когда внутри одного шрифтового семейства есть и акциденция для заголовков, и спокойные текстовые начертания разных весов. Например, семейство Circe Contrast.
Что определяет выбор шрифта
В первую очередь на выбор шрифта влияют эмоции покупателя (дизайнера или компании). Если какой-то шрифт запал в душу, и человек хочет его использовать в своем проекте, какие-то практические вещи он вполне способен игнорировать. Тут как с выбором одежды :)
После того, как шрифт уже приглянулся, его начинают тестировать в макете: как он держит длину строки, удобно ли читать, хорошо ли смотрится в мелком размере, достаточно ли привлекает в крупном (если это логотип), сколько в нём начертаний, хорошо ли сочетается с системными/другими шрифтами проекта.
Помимо этого в веб-проектах, где шрифт должен хорошо выглядеть именно на экране, нужно уделить внимание следующим аспектам:
соответствует ли удобочитаемость шрифта его задаче;
отхинтован ли шрифт.
Удобочитаемость: вам читать или разгадывать
Текст, который трудно читать, похож на зашифрованное послание: смысл есть, но добраться до него — целая история. Иногда пристальное внимание — и есть цель, а иногда главная задача — без помех доносить информацию.
Всё решает контекст. Для этого и существует разделение:
Акцидентные шрифты — это «индивидуалисты». Они создают настроение в заголовках, логотипах и коротких цитатах, но совершенно не годятся для длинного текста.
Текстовые шрифты — это «невидимки». Их сила в нейтральности: они не отвлекают от содержания, делая чтение книг, статей и документов комфортным. Именно для них наиболее важна удобочитаемость.
Но и здесь невозможно обойтись одним шрифтом. Есть нюанс, который всё меняет, — размер. Один и тот же шрифт в основном тексте и мелкой сноске будет работать по-разному. Поэтому дизайнеры создают отдельные оптимизированные версии:
Display (Дисплей) — для больших размеров, с изящными деталями.
Subhead (Подзаголовок) — имеет меньший контраст, чем display, но всё ещё содержит детали и годится для больших размеров.
Text (Текст) — для основного набора, с усиленной читаемостью.
Caption (Подпись) — для мелкого кегля, с увеличенными пропорциями и открытыми формами.
Как проверить удобочитаемость
Желательно, чтобы шрифт хорошо смотрелся по пропорциям и контрасту, а высота строчных не была слишком маленькой.
Обращайте внимание на рекомендованный размер в описании шрифта. Проверяйте шрифт на практике: лучше всего использовать тот текст, который будет использоваться в продакшене. На нём лучше всего проявляются индивидуальные особенности проекта. Но даже если вы не можете рационально аргументировать выбор, удобство шрифта — это то, что либо ощущается, либо нет. Поэтому полагайтесь на собственное восприятие и учитывайте мнение команды.
Как понять что шрифт отхинтован
Обсуждая вопрос выбора шрифта для проекта, Тома обратила моё внимание на ещё одно свойство шрифта, которое может повлиять на выбор в определенных случаях. Для того, чтобы текст хорошо выглядел на устройствах с маленькими экранами, шрифт должен быть отхинтован. Мы все привыкли к антиалиасингу на больших дисплеях, а ретина и вовсе сняла вопрос с зубчатыми границами. Но делать качественно — значит поддерживать больше разнообразных устройств.
Антиалиасинг — это сглаживание границы и убирание «лесенок» за счет специального расчета цвета пикселей на границе объекта.
Хинтинг — это инструкции внутри шрифта, по которым система может выравнивать буквы так, чтобы их визуально значимые элементы совпадали с пикселями. Благодаря этому буквы получаются более чёткими, сглаживание не делает их размытыми. На картинке ниже слева текст без хинтинга (буквы жирные, иероглифы сливаются), а справа с хинтингом — линие более узкие и чёткие.
Проверить, отхинтован ли шрифт, можно одним из следующих способов.
Визуальный тест: открыть текст размером 9-12 пикселей на экране компьютера под управлением Windows (на macos другая техника отрисовки букв). Если буквы четкие, ровные, без «лесенок» и размытостей, а засечки и основные штрихи выровнены по пиксельной сетке — то шрифт можно брать!
Казалось бы, можно открыть файл в редакторе шрифтов и посмотреть, содержит ли он информацию для хининга. Но! Лицензия на шрифт может не разрешать подобного использования. Если вы используете шрифт, распространяемый под лицензией CCO или подобной, которая допускает модификацию и создание собственного цифрового продукта на базе существующего, то можете воспользоваться такими вариантами:
Проверка в FontForge (бесплатный): откройте файл шрифта, выберите отдельный глиф (символ), и выберите в меню Hinting -> AutoHint. Если программа предложит добавить хинты, значит их не было.
Проверка в Glyphs / FontLab (платные инструменты): откройте файл шрифта, выберите глиф и проверьте его свойства. При наличии хинтинга отображается список инструкций (commands) или специальных точек (hints).
Если знаете другие способы проверки — поделитесь в комментариях!
Почему все бренды не используют одни и те же шрифты
Если для заголовков нужен броский акцидентный шрифт, а текстовый хорошо подходит для больших объемов информации, то двух шрифтов должно быть достаточно для решения всех задач. Почему тогда заказчики сайтов хотят особенные шрифты, и требования к оформлению текста прописывают в брендбуках и UI Kit’ах?
На самом деле, практика, когда все пользуются одними и теми же шрифтами уже была, правда, в рамках СССР. Было некоторое количество гарнитур, которые использовали в типографиях, и которые мы до сих пор встречаем в старых советских книгах/газетах. На эту тему можно почитать книгу Шицгала «Русский типографский шрифт», например.
Примечание: гарнитура — это комплект шрифтов, объединённых общностью рисунка, но отличающихся размером или толщиной линий. Например, Verdana — это гарнитура, а Verdana Italic — шрифт.
В современном мире шрифтов стало так много, что иногда кажется — куда уж больше? Но всегда находятся какие-то не закрытые ниши, которые могут привлечь своего покупателя. Бизнесы ведь тоже разные, и каждому нужен собственный голос, которым он заговорит с клиентом. Одним из составляющих этого голоса будет выбранный шрифт. На практике могу сказать,что часто компании выбирают индивидуальный подход. И несмотря на существующее разнообразие шрифтов они заказывают кастомизации под свои задачи. Например, просят:
добавить узнаваемые элементы из логотипа в шрифт,
создать альтернативные формы букв,
или вообще поменять пропорции и внешний вид шрифта.
Шрифт — это мощный инструмент коммуникации, который на подсознательном уровне сообщает пользователю что-то о вашем бренде. Он создаёт атмосферу и задаёт тон до того, как человек прочитает первое слово. Технологическому стартапу вряд ли подойдет витиеватая готическая вязь — она будет кричать о старине и консерватизме. А солидному финансовому учреждению, наоборот, не к лицу легкомысленный скриптовый шрифт. Всё это — вопрос ассоциаций и культурных кодов.
Значит ли это, что выбирая шрифт для дизайна сайта новой компании, например, пекарни у дома, можно и нужно опираться на анализ конкурентов? Да — чтобы получить представление чего ожидают пользователи. И всё-таки каждый пекарне нужно добавить собственную изюминку. Например, шрифт Oven Bake – Bold Retro Display Font.
Итак, мы разобрались с визуальными и техническими характеристиками для выбора шрифта. Теперь поговорим о тексте.
Лайфхаки: как сделать текст красивым, не учась на типографа
Типографика — это искусство оформления текста для улучшения читабельности и визуального восприятия. Это долгая и кропотливая работа с кернингом и интерлиньяжем. Она также включает в себя выбор шрифта, размера, цвета, начертания, а также настройку интервалов, отступов и общей композиции. В общем — задаёт 100500 правил.
Кернинг — изменение расстояния между буквами, цифрами, знаками препинания и другими символами в тексте для удобочитаемости.
Вы уже наверняка слышали, что количество «горизонтальных палочек» сильно больше двух: дефис и тире, диапазонное тире, знак переноса, математический минус и другие. И про кавычки — «лапки „растут“ на ёлочке» — вы тоже наверняка знаете. А как насчёт того, что пробелы бывают разной длины, разрывными и неразрывными? Даже зная все эти правила, уследить за их выполнением — непростая задача. Поэтому нам пригодятся инструменты, автоматизирующие процесс исправления типографских ошибок в тексте. Какие есть варианты?
Если рассматривать сам шрифт, то есть, например, шрифты со встроенным микротипографом (к примеру, Hint студии Paratype). Есть отдельные сайты, вроде Типографа студии Лебедева. Если вёрстка какого-то большого издания происходит в InDesign, существуют специальные скрипты для подготовки текста (например, DoTextOk).
Микротипограф — это встроенный в шрифтовый файл набор правил, который автоматически изменяет отображение текста, но не изменяет сам текст. Вы устанавливаете шрифт на сайте, например, в своей CMS, и весь контент, который создают пользователи, автоматически отображается красиво и правильно.
Типограф — это веб-приложение, которое исправляет исходный текст, заменяя в нём кавычки, тире, знаки копирайта и прочее. Вам нужно вставить свой текст в форму на странице типографа и «Оттипографить» его, а потом скопировать результат в своё веб-приложение.
Многие думают, хороший шрифт отличается большим набором лигатур. Но это уже устаревающий подход. По мнению эксперта:
Количество лигатур не особенно влияет на шрифт: у нас уже давно не металлический набор, когда создавались антиколлизионные лигатуры вроде fl fi. Сейчас лигатуры носят скорее эстетическую составляющую, а не практическую.
Примечание: лигатура — это изображение двух и более букв одним письменным знаком (специальный глиф для определенной последовательности символов).
В эпоху металлического набора лигатуры
fiиflбыли технической необходимостью. Дело в том, что у буквы f длинная и хрупкая верхняя часть (вынос). Если поставить рядом с ней точку от i или штрих от l, они физически сталкивались и ломались. Лигатура решала эту проблему, объединяя символы на одной литере.
В современном мире признак хорошего и продуманного шрифта — это богатый набор OpenType-возможностей. Это специальные инструкции, вшитые в файл шрифта, которые автоматически заменяют стандартные символы на улучшенные или альтернативные версии, чтобы текст выглядел профессионально и изящно. OpenType-функции могут включать:
лигатуры:
liga(стандартные),dlig(дискреционные, более редкие);кернинг:
kern(в современных шрифтах обычно включен по умолчанию);контекстные альтернативы:
calt;стилистические наборы:
ss01,...,ss20;альтернативные формы символов:
salt;вариации цифр:
lnum— цифры старого стиля,onum— выровненные по высоте,pnumпропорциональные,tnum— моноширинные.дроби:
frac(для готовых дробей),numrиdnom(для создания дробей из любых цифр)надстрочные и подстрочные индексы:
sups,subs.
В CSS эти функции подключаются через свойство font-feature-settings:
css
.your-text {
font-feature-settings: "kern", "liga", "calt", "onum", "ss01";
/* Включены: кернинг, стандартные лигатуры, контекстные альтернативы, выровненные цифры и стилистический набор №1 */
}
Всё это позволяет верстальщику или дизайнеру одной строчкой в CSS включить «режим красоты», не настраивая каждую деталь вручную. Ищите шрифты, у которых эти функции есть — они сэкономят вам массу времени.
Типографика — это не физика, а скорее кулинария
В физике есть формулы. В типографике — нет. Выбор шрифта — это не поиск волшебной кнопки «сделать красиво». Это не калькулятор, куда можно ввести «финтех» и получить идеальный шрифт. Прямой и однозначной связи между бизнес-доменом и конкретным шрифтом нет.
Выбирая шрифты для проекта, мы опираемся не на строгие правила. Есть базовые ориентиры, а дальше — свобода в рамках системы. Мы можем опереться на вполне конкретные законы сочетаемости (те самые контраст, геометрию, открытость), чтобы собрать гармоничную гамму шрифтов для проекта. А выбирая акцидентные шрифты мы вкладываем индивидуальность — будь то вкус дизайнера, смелость заказчика или амбиции бренда.
Отдельная благодарность нашему эксперту, шрифтовому дизайнеру Томе Стрельцовой, которая поделилась своим опытом и профессиональным взглядом на выбор шрифтов. Важно отметить: все выводы и мнения в статье — это моя интерпретация, которая появилась в процессе разговора с Томой. Поэтому любые вопросы, уточнения и возражения по материалу приветствуются и их следует направлять мне, как автору, а не Томе. Её цель была — прояснить тонкости своей профессии, а не диктовать единственно верные решения.
Размещайте облачную инфраструктуру и масштабируйте сервисы с надежным облачным провайдером Beget.
Эксклюзивно для читателей Хабра мы даем бонус 10% при первом пополнении.
