# Замінила 27 фактичних розмірів шрифту, сусідні значення яких різнилися лише на 0,6%, шестиступеневою шкалою Major Third і написала лінтер, який відхиляє двадцять восьмий.

серпень 2026

**Ситуація.** Вимірювання відображеного тексту сайту виявило двадцять сім різних розмірів шрифту, що використовувалися. Деякі відрізнялися менш ніж на відсоток: п'ять значень між 0,8 і 0,85 від розміру основного тексту діяли одночасно, а такої різниці жоден читач не помітить, зате кожен наступний редактор додасть до неї ще одне значення. Двом заголовкам таблиця стилів узагалі не задавала розміру, і вони отримували стандартні значення самого браузера — співвідношення 1,33, яке не збігалося ні з чим іншим на сторінці.

**Завдання.** Розміри мали скластися в шкалу із задекларованим співвідношенням, і щось мало не допустити появи двадцять восьмого.

**Дія.** Шкала — велика терція зі співвідношенням 1,25: шість іменованих щаблів від дрібного шрифту до заголовкового, і кожен із них — токен, а не значення. Заголовки явно прив'язано до щаблів, а не залишено на розсуд браузера, і саме це виправило ті два, що не мали власного розміру. Мінімум задано лише для найнижчого щабля, тож дрібний шрифт лишається розбірливим на телефоні, а вся шкала не фіксується. Логотипи виключено явно, за назвою, а не випадково. Тримає все це лінтер: він відображає сайт у браузері й зупиняє перевірку на двадцять восьмому окремому розмірі. Він уже двічі довів свою користь: спіймав заголовок розміром 1,17 від основного тексту, що не є щаблем жодної шкали, і назвав це співвідношення в повідомленні про помилку, а ще спіймав вбудований код розміром 0,9 — саме таке значення, проти якого шкала й існує. Разом зі шкалою з'явилася довжина рядка приблизно в сімдесят два символи замість успадкованої фіксованої ширини, яка давала дев'яносто один символ на сторінці відгуку й сто десять на сторінці контактів.

**Результат.** Шість розмірів замість двадцяти семи, із задекларованим співвідношенням, задекларованою довжиною рядка й перевіркою, яка відхиляє наступне незаплановане значення. Обмеження реальне й часом незручне: якщо дизайну потрібен розмір між двома щаблями, доводиться або перейти на щабель, або обґрунтовувати зміну шкали, і таку суперечку вже не раз вели й програвали.

---

- Роль: Інженер дизайн‑систем
- Категорії: [Frontend‑розробка](https://brand.engineer.company/uk/categories/frontend/), [Автоматизація та CI/CD](https://brand.engineer.company/uk/categories/automation/), [Тестування та QA](https://brand.engineer.company/uk/categories/testing/), [Дизайн‑системи та UI](https://brand.engineer.company/uk/categories/design-systems/), [UX / UI‑дизайн](https://brand.engineer.company/uk/categories/ux-ui/), [Документація](https://brand.engineer.company/uk/categories/documentation/)
- Послуги: [Frontend‑розробка](https://brand.engineer.company/uk/services/frontend-development/), [UI/UX‑дизайн та дизайн‑системи](https://brand.engineer.company/uk/services/ui-ux-design/), [Бренд, маркетинг та SEO](https://brand.engineer.company/uk/services/brand-marketing/)

<https://brand.engineer.company/uk/portfolio/replaced-27-font-sizes-with-a-six-step-scale-129/>
