Фреймворк по иерархичности шрифта для дизайнеров

Вступление

Попался мне на днях один интересный сайт по правильной илогичной иерархии шрифтов. Суть данного сайта в следующем — нам нужно задать базовый шрифт для нашего проекта, а после, система сделает все для нас. Базовый шрифт равняется 14–16px и в зависимости от размера шрифта и модуля выстраивается иерархия.

https://type-scale.com/

Но это еще не все. Как мы видим, у нас есть выбор шрифтов из библиотеки google fonts. Но сама система не идеальна и дает лишь начальные значения, от которых мы будем отталкиваться при дальнейшем использовании.

Итак, вот несколько правил, которые я использую при работе с данным фреймворком:

• Система выдает нам дробные значения. Соответственно, нам нужно их округлить до целого числа
• Все шрифты должны быть кратны 2 (12/24/48)
• В зависимости от шрифта нужно выбрать правильный модуль (для большинства своих проектов, я использую 1.333 и 1.250), для мобайлов, данный фреймворк я еще не тестировал, ведь там тоже есть свои нюансы, статью я дополню, когда дойду до этого момента.

Условия

Данные условия я отобразил на скриншоте с адаптацией под округление, а также то, как рассчитывает размер шрифта, в зависимости от выбранного модуля.

Конечно же, многие при использовании данной иерархии могут зайти в тупик и сказать: “Нуу, да, конечно же это бред, а как же начертания шрифтов”. А никто и не говорит, что эту систему нельзя адаптировать под ваш проект и использовать свои размеры и начертания. Идея в том, чтобы увидеть полностью всю структуру заголовков, отходя от фреймворка.

Удачи в использовании и внедрении.

С уважением, автор: Павло Жидких UX/UI Дизайнер