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

Вступ

Нещодавно я натрапив на один цікавий сайт з правильної та логічної ієрархії шрифтів. Суть цього сайту в наступному – нам потрібно задати базовий шрифт для нашого проекту, а пізніше, система зробить все сама. Базовий шрифт рівний 14-16px і в залежності від розміру шрифта і модуля вибудовується ієрархія.

https://type-scale.com/

Але це ще не все. Як ми бачимо, у нас є вибір шрифтів з бібліотеки google fonts. Але сама система не ідеальна і дає лише початкові значення, від яких ми будемо відштовхуватися при подальшому використанні.

Отже, ось декілька правил, котрі я використовую при роботі з цим фреймворком:

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

Умови

Ці умови я відобразив на скріншоті з адаптацією під округлення, а також те, як розраховується розмір шрифту, в залежності від обраного модуля

Звичайно, багато хто при використанні цієї ієрархії можуть зайти в глухий кут і сказати: «Нуу, та, це якась маячня, а як же начертання шрифтів». А ніхто і не каже, що цю систему не можна адаптувати під ваш проект і використовувати свої розміри і накреслення. Ідея в тому, щоб побачити повністю всю структуру заголовків, відходячи від фреймворку.

Нехай щастить у використанні та впровадженні.

З повагою, автор: Павло Жидких UX/UI Дизайнер