Если вы в данном материале ищете конкретные типографические правила, то данный материал не про это. Вместо этого я предлагаю вам потенциально сэкономить часы работы и обучения. Неплохое обещание? Начнем.
Подбор шрифтовых пар
Область работы со шрифтами уже давно автоматизирована. Чат-боты, сервисы подбора готовых шрифтовых пар, анализаторы шрифтов и многое другое. Все это позволяет нам, не прочитав ни единой строчки про шрифты, уже работать с типографикой. Поэтому первый вывод: «Мы делегируем работу со шрифтами сторонним сервисам».
Наберите в Google или Яндекс: «Шрифтовые пары» «Классные шрифты для сайта». Вместо тысячи слов… ?
Берем название шрифта с понравившегося сайта
Мы поняли, что сервисы могут дать нам качественные шрифты и его характеристики, но как же нам найти классные идеи, чтобы реализовать их в интерфейсе?
Тут мы возвращаемся к принципу, которые я описал в статье «Как стать веб-дизайнером?» или «Как стать UX/UI дизайнером?». Мы ищем примеры проектов, где используется шрифт, который нам нравится. Когда вы нашли нужный пример:
- Правой клавишей мышки кликаем на нужный текст на сайте
- Далее в правой части окна инспектора набираем в поиске «font-family» и ищем название шрифта. Ниже я представил вам скриншоты данного процесса.
Межстрочное расстояние
Стартовое значение для работы — 140%. Именно в процентах. Это нужно, чтобы при изменении размера шрифта, межстрочное расстояние автоматически подстраивалось. Дальше в зависимости от формы символов вы можете увеличивать или уменьшить межстрочник.
Межбуквенное расстояние
Межбуквенное расстояние мы применяем только для слов, которые написаны ЗАГЛАВНЫМИ буквами. У обычного (наборного) шрифта мы данную величины оставляем стандартной.
Контраст текста
Всегда следите, чтобы ваш текст четко читался. Ухудшения могут быть:
- Текст написан на изображении и плохо читается
- Текст слишком блеклый
- Фон слишком близок по цвету с цветом текста
Всех этих проблем нужно избегать. Также всегда учитывайте, что есть пользователи с экранами, у которых плохая цветопередача. Поэтому мы должны делать очень яркий контраст между фоном и цветом текста.
Иерархия текста
Вспомните курсовые или дипломные работы, их структуру. Заголовок работы был самым крупным, разделы — чуть меньше; главы — еще меньше; основной текст — самый маленький. Именно такой структуры мы должны придерживаться в наших дизайн макетах. Основная мысль должны быть явно выделена по размеру и начертанию, «под-мысли» меньше и обычный текст — еще меньше. Таким образом вы идеально сможете управлять вниманием пользователя и акцентировать его взгляд на нужные элементы в композиции.
