Перейти до вмісту

Замінила 27 розмірів шрифту шкалою з 6 кроків

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

  • Typewriter, old typewriter, vintage
    Фото: RodrigoAlabart / Pixabay
  • Stairway, spiral stairs, architecture
    Фото: 16692474 / Pixabay

27 розмірів шрифту замінено шестиступеневою шкалою

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

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

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

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

Одна частина довшого переліку — і він увесь на цьому сайті.

Кожен запис написано однаково: ситуація, завдання, що ми зробили і що змінилося.

Переглянути весь перелік