Шрифтові пари і сітка: типографіка для новачків

Що таке типографіка простими словами

Шрифт - це голос тексту. Те саме слово можна прошепотіти, прокричати або сказати спокійно й вагомо. І ось новачок уперше дорвався до списку шрифтів - і поводиться як дитина в кондитерській. Хочеться всього й одразу. А на виході сторінка, де шість шрифтів горлають один на одного, і читати це неможливо.

Секрет, до речі, до образи простий. Хороший текстовий дизайн - це один-два шрифти, зрозуміла драбинка розмірів і єдиний крок відступів. Ні таланту, ні десяти років надивленості. Просто пара правил, які працюють завжди.

Навіщо новачку розбиратися в шрифтах

Малювати ти можеш не вміти. А от текст ставиш постійно: лендинг, презентація, пост, README, інтерфейс застосунку, який вайбкодиш. І типографіка видає аматора першою - швидше, ніж колір і картинки.

• Зрозумієш, чому чужий сайт виглядає дорого, а твій - «на коліні», хоча текст рівно той самий.
• Перестанеш обирати шрифт «по вайбу» й почнеш збирати пари, які гарантовано дружать.
• Будь-який екран читатиметься одразу: око саме знайде, де головне, без твоїх пояснень.
• Сітка та єдиний відступ приберуть те саме «щось не так, а що - не доберу». Зазвичай це блок, що зʼїхав на пару пікселів.

Девʼять із десяти «дилетантських» макетів - це не поганий смак. Це пʼять шрифтів, розміри на око й відступи, виставлені пробілами. Три правила нижче лагодять майже все.

Чотири кити хорошої типографіки

Скільки шрифтів використовувати на сторінці

Залізне правило новачка: один шрифт - нормально, два - добре, три - стеля. Один хороший шрифт у різній жирності й розмірі закриє взагалі все. Це не бідність. Це дисципліна.

Навіщо тоді другий? Щоб розвести ролі: заголовковий Заголовковий (display) шрифт - великий, з характером, для заголовків і акцентів. Часто надто вигадливий, щоб читати ним довгий текст, зате ловить увагу. ловить увагу, а текстовий Текстовий (body) шрифт - спокійний, без зайвого характеру, заточений під довге читання дрібним кеглем. Його завдання - не заважати, а бути прозорим. спокійно несе сенс. Як фронтмен і басист: один світить, інший тримає.

Як підібрати шрифтову пару: контраст і спорідненість

Хороша пара тримається на двох речах одразу.

• Контраст. Шрифти мають явно відрізнятися, інакше навіщо їх два - виглядатиме як помилка. Класика жанру: серифний Серифний (із засічками) шрифт - у літер є маленькі «лапки» на кінцях штрихів. Виглядає класично, по-книжному, солідно. плюс гротеск Гротеск (без засічок, sans-serif) - літери з гладкими кінцями, без «лапок». Виглядає сучасно, чисто, по-інтерфейсному. . Один із засічками, інший без - різницю видно миттєво.
• Спорідненість. При цьому щось спільне в них бути зобовʼязане, інакше пара розвалиться. Головна ознака - схожа висота рядкових літер Висота рядкових (x-height) - наскільки високі у шрифту маленькі літери на кшталт «ікс» порівняно з великими. Якщо у двох шрифтів вона різна, поряд вони виглядають як із різних епох. . У одного літери великі й пузаті, у іншого дрібні й підтиснуті? Поряд вони виглядатимуть як чужі.

Найбезпечніший лайфхак: візьми одну сімʼю в різних накресленнях - тонке, звичайне, жирне. Контраст буде, а спорідненість гарантована: це буквально один шрифт. Осмілієш - додаси другий.

Ієрархія заголовків: щоб око саме знайшло головне

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

• Розмір. Заголовок помітно більший за текст. Не на пару відсотків - так, щоб різниця читалася одразу.
• Жирність. Головне - жирним, решта - звичайним. Часто цього одного вистачає.
• Повітря. Навколо важливого залишай більше порожнього місця. Порожнеча - це не «не доробив», це підсвічування.

А щоб не виставляти розміри на око, дизайнери беруть драбинку - шкалу розмірів Шкала розмірів (модульна шкала) - заздалегідь заданий набір кеглів, де кожен наступний виходить множенням попереднього на той самий коефіцієнт. Розміри виглядають узгоджено, бо повʼязані спільним кроком. . Береш базовий розмір тексту, множиш на постійний коефіцієнт - і отримуєш ряд: текст, підзаголовок, заголовок, величезний заголовок. Розміри виглядають рідними, бо виросли з одного кроку.

Сітка й відступи: єдиний ритм сторінки

Сітка Сітка (grid) - невидима система напрямних, по якій вирівнюються блоки на сторінці: колонки, відступи, краї. Сама не видна, але її відсутність відчувається одразу. - це невидимі рейки. По них вирівнюються краї тексту, колонки, картинки. Усе стоїть на одних рейках - сторінка виглядає зібраною. Кожен блок живе сам по собі - виходить те саме «зʼїжджає».

Але найпотужніше й найпростіше правило - єдиний крок відступів. Обери базову одиницю і будуй із неї всі проміжки, кратно. В індустрії найчастіше беруть крок, кратний 8: ряд 8, 16, 24, 32, 40 і далі. Так влаштовані великі дизайн-системи на кшталт Material Design від Google. Для дрібниць можна дробити кратно 4. Головне - не плодити випадкові 7, 13, 19 пікселів.

Як зібрати типографіку екрана за 6 кроків

Припустимо, верстаєш простий лендинг або екран застосунку. Не вгадуєш - дієш за кроками.

Обери два шрифти: один із характером для заголовків, один спокійний для тексту. Сумніваєшся - візьми один шрифт у двох накресленнях, звичайному й жирному. Це вже робоча пара.
Перевір спорідненість: постав обидва поряд і глянь на висоту маленьких літер. Сильно різна - міняй один, вони не подружаться.
Задай базовий розмір тексту, зручний для читання. Від нього побудуй драбинку: множ приблизно в 1.25 - 1.5 раза й отримай підзаголовок, заголовок, великий заголовок.
Розстав ієрархію: головне - більше й жирніше, другорядне - менше й спокійніше. Не більше трьох-чотирьох рівнів, інакше знову каша.
Обери єдиний крок відступів, кратний 8. Усі проміжки між блоками бери тільки з цього набору: 8, 16, 24, 32. Жодних випадкових чисел.
Вирівняй краї всіх блоків по одній лінії зліва. Це і є твоя найпростіша сітка. Відійди, подивись здалеку - усе має стояти рівно й дихати.

Якщо вайбкодиш і хочеш, щоб асистент зібрав типографіку сам, не пиши «зроби гарні шрифти». Дай йому ті самі правила словами - і результат буде передбачуваним.

Збери типографіку для цього екрана за правилами, не на око.

Використовуй максимум два шрифти: один заголовковий з характером, один спокійний текстовий. Якщо сумніваєшся - один гротеск у накресленнях regular і bold.
Розміри будуй модульною шкалою від базового кегля тексту з коефіцієнтом близько 1.3: текст, підзаголовок, заголовок, великий заголовок.
Ієрархію роби розміром, жирністю й повітрям, не новими шрифтами. Не більше чотирьох рівнів.
Усі відступи бери тільки кратними 8 (8, 16, 24, 32, 40). Жодних довільних значень.
Вирівняй усі блоки по єдиній лівій лінії. Покажи підсумкову шкалу розмірів і набір відступів окремим списком.

Часті помилки новачків у типографіці

• Пʼять шрифтів «для краси». Кожен новий шрифт робить гірше, а не краще. Скороти до одного-двох, різноманіття добирай жирністю й розміром.
• Пара без контрасту. Два схожі шрифти виглядають як помилка, а не як пара. Розводь ролі: із засічками плюс без засічок.
• Розміри на око. «Тут трохи більше, тут трохи менше» дає каламутну ієрархію. Побудуй драбинку з одного коефіцієнта.
• Заголовок майже як текст. Різниця в розмірі ледь видна - отже, ієрархії немає. Роби контраст явним, не соромся.
• Випадкові відступи. 7 пікселів тут, 13 там - і сторінка «зʼїжджає». Один крок, кратний 8, на всі проміжки.
• Тісно, без повітря. Усе впритул - читати важко й виглядає дешево. Порожнеча навколо важливого не пробіл, а акцент.
• Вирівнювання врозбрід. Один блок по лівому краю, інший по центру, третій поїхав. Посади все на одну ліву лінію - і одразу стане акуратно.