Фреймворк по иерархичности шрифта для дизайнеров
Попался мне на днях один интересный сайт (https://type-scale.com/) по правильной и логичной иерархии шрифтов. Суть данного сайта в следующем — нам нужно задать базовый шрифт для нашего проекта, а после, система сделает все для нас. Базовый шрифт равняется 14–16px и в зависимости от размера шрифта и модуля выстраивается иерархия.
Но это еще не все. Как мы видим, у нас есть выбор шрифтов из библиотеки Google Fonts. Но сама система не идеальна и дает лишь начальные значения, от которых мы будем отталкиваться при дальнейшем использовании.
Итак, вот несколько правил, которые я использую при работе с данным фреймворком:
- Система выдает нам дробные значения. Соответственно, нам нужно их округлить до целого числа.
- Все шрифты должны быть кратны 2 (12/24/48).
- В зависимости от шрифта нужно выбрать правильный модуль (для большинства своих проектов, я использую 1.333 и 1.250), для мобайлов, данный фреймворк я еще не тестировал, ведь там тоже есть свои нюансы.
Условия
Данные условия я отобразил на скриншоте с адаптацией под округление, а также то, как рассчитывает размер шрифта, в зависимости от выбранного модуля.
Конечно же, многие при использовании данной иерархии могут зайти в тупик и сказать: “Нуу, да, конечно же это бред, а как же начертания шрифтов”. А никто и не говорит, что эту систему нельзя адаптировать под ваш проект и использовать свои размеры и начертания. Идея в том, чтобы увидеть полностью всю структуру заголовков, отходя от фреймворка.
Удачи в использовании и внедрении.
С уважением, автор: Павло Жидких, UX/UI Дизайнер