Дизайн с использованием плавных шкал шрифтов#
Джеймс Гиляэд
Для меня размеры шрифтов, заданные по брейкпоинтам, всегда казались немного произвольными. Это выглядит как смесь угадывания и компромисса: чем лучше мы хотим, чтобы всё работало, тем больше элементов нужно разрабатывать. Это кажется неэлегантным и неэффективным.
За последние несколько лет мне повезло работать с очень умными дизайнерами и разработчиками, которые помогли мне оформить мои мысли и идеи в более осязаемый подход к адаптивному дизайну с плавной типографикой.
Хотя у каждого проекта свои требования, вариация размера шрифта на телефоне обычно довольно консервативна, поскольку горизонтального пространства мало. На большом ноутбуке или настольном дисплее часто желательно использовать более драматические шкалы шрифтов, чтобы максимально использовать дополнительное пространство. Вопрос в том, как учесть оба размера экрана, при этом соблюдая пропорции для всех промежуточных размеров.
Большая идея, которая стала отправной точкой для моих размышлений, теперь кажется очень простой:
Задаём шкалу шрифтов для маленького экрана
Задаём шкалу шрифтов для большого экрана
Просим браузер интерполировать между этими двумя шкалами в зависимости от текущей ширины окна просмотра
Это приводит к набору размеров шрифтов, который всегда «в гармонии» с самим собой и выглядит естественно на любом устройстве, без необходимости вручную задавать размеры для определённого количества произвольных брейкпоинтов. Например, можно просто сказать, что заголовки H2 всегда «размер 4», и довериться расчету, который создаст подходящий размер заголовка для всех.
График плавных типографских шкал#
Визуализация того, что это означает
В приведённом примере я задал типографскую шкалу 1.2x для 320px (мобильный экран) и 1.333x для 1500px (настольный экран). Для любой ширины окна между этими значениями набор размеров шрифтов остаётся пропорциональным, хотя мне не пришлось вручную задавать дополнительные значения. Я отметил линию на 1024px, чтобы показать автоматически рассчитанные значения шрифта для этого размера окна. В этом примере я сгенерировал значения с помощью Google Sheets, но это можно элегантно воспроизвести в CSS, как описано в отличной статье разработчика Clearleft Триса.
Вот как эти значения могут быть использованы в дизайне:
Простой пример показывает, как типографика автоматически «подстраивается» под доступное пространство на планшете.
Трис создал живую версию этого примера, чтобы можно было увидеть процесс в действии: наблюдайте, как шрифты «дышат», когда вы изменяете размер окна.
Точные значения двух шкал шрифтов зависят от шрифтов вашего продукта, визуального стиля, контента, макета, аудитории и т.д. Этот подход не заменяет хороший дизайн, но побуждает сосредоточить усилия на создании надёжной системы. Это помогает ускорить будущую работу и принятие решений, а также поддерживает консистентность, создавая «палитру» связанных размеров шрифтов.
Пользователь получает преимущество: типографика всегда будет выглядеть «правильно», независимо от используемого устройства. При стандартном подходе это не всегда так: новый планшет может неожиданно попасть на «неправильный» брейкпоинт.
Первая публикация: 1 февраля 2020 года
https://utopia.fyi/blog/designing-with-fluid-type-scales/