Пособие для тех, кто работает с типографикой и сталкивается со сложностями выбора размеров шрифта для каждой подписи на сайте.
Очень часто сталкиваюсь с тем, что начинающие дизайнеры не понимают, какой размер для каждого типа текста нужно подобрать. Этот процесс также усложняет отсутствие насмотренности и то, что в Figma можно бесконечно увеличивать или уменьшать масштаб макета, что не позволяет адекватно оценить реальный размер текста.
Как же в этой ситуации быть и какими правилами руководствоваться? Конечно, основное правило – это иерархия типографики, которое можно свести к простому принципу: чем выше расположен заголовок, тем крупнее в блоке он должен быть.
Допустим, с иерархией типографики все просто и система уже настроена:
Проверим, как это будет примерно выглядеть на макете, расставим заголовки для каждого блока в иерархическом порядке и не забудем про сетку и отступы – разделение объектов на группы с помощью пустых мест является нашим основным средством упорядочивания и помогает легче воспринимать информацию:
Отлично, кажется, теперь структура сайта выглядит хорошо: получилось добиться иерархии типографики, установить порядок важности информации, отступы расставлены системно – пользователю легче сгруппировать блоки в смысловые единицы, а сетка упорядочивает расположение элементов на странице.
Как выбрать соотношение размеров заголовков и других текстовых элементов?
1. Использовать помощники – сайты и плагины
Для упрощения работы с подбором размеров на первых порах рекомендую использовать этот сервис: https://type-scale.com/
Также у Figma есть несколько очень простых плагинов:
Typescale — мгновенно генерирует гармоничные модульные системы типографики на основании заданного соотношения. Достаточно установить настройки во всплывающем окне и плагин сам составить схему из нужного количества заголовков:
Только не забудь привести шрифты к целым значениям. На макетах в Figma корректнее работать с целыми числами, чтобы избежать дробных значений в отступах.
Perfecter — настраивает гармоничные соотношения размеров шрифтов, интервалов, элементов с применением математических расчетов.
В целом, алгоритм работы такой же – на выходе вы получаете готовую систему типографики с необходимым количеством шрифтовых стилей.
2. Использовать метод колоночного подбора размеров
Подробнее о методе рассказано в этой статье. Если же кратко передать суть метода, то нужно настроить сетку, выбрать базовую единицу и, используя ширину колонок, выставить размеры текстов:
Пример (базовая единица – 4 px):
Основные правила, которые следует помнить:
1. Для основного текста на сайте рекомендуется использовать размер шрифта не менее 16 px. На экранах обычной плотности он примерно такого же размера, как текст, напечатанный в книге или журнале, на расстоянии вытянутой руки.
2. Определяйте размер текста также исходя из длины строки, чтобы ее было комфортно читать. Когда в строке умещается 1-2 слова – это проблема:
Как еще подобрать удачный размер?
Можно пользоваться негласными стандартами для каждого текстового элемента (написала размеры примерные, которые сама часто встречаю в других проектах и использую сама, кратные БЕ 4):
На этом все правила, которыми нужно руководствоваться, заканчиваются.
Помните, что ключевая формула иерархии заключается в гармоничном сочетании главных и второстепенных компонентов. Не забывайте готовить контент заранее, выделяя уровни иерархии — главное, важные детали и дополнительная информация.
Минимализм, работа с размерами, акцентами, цветом и расположением элементов на визуальном поле согласно тщательно выстроенной структуры — залог интерфейса, который работает.