Веб-типографика

что нужно знать?
→ Веб не сильно отличается от книжной

→ помимо читабельности, в вебе нужно бороться за внимание и акценты пользователя к нашим словам

→ в книжной второстепенно всё, кроме читабельности

→ в вебе все те же правила, но чуть больше свободы

шрифт

графический рисунок букв и знаков, составляющий единую и композиционную систему

→ антиква

→ гротеск

аристократичные, претензия на статусность. Лучше подходят для набора длинного текста

простой и стильный. Грамотно подобрав, можно сделать любой дизайн

→ моноширинные

→ декоративные

некоторые правила

размер текста

14-22 px

заголовки

24 и более px

контент

межстрочное расстояние

+8-10 px от размера шрифта

+5-15 spacing в Тильде

длина строки

от 40 до 85 символов

разбиваем на абзацы

создаём контрасты

выравнивание

левый флаг

по центру можно, но немного строк текста, иначе становиться трудно читать

самый популярный и предпочтительный. Стараемся всё выравнивать по левой стороне, ибо так читать привычнее всего

по центру

не стоит. Если только если ты осознанно нарушаешь правила

правый флаг

структурирование

заголовки нескольких уровней

правило

если текста много =

чем выше заголовок
по иерархии → тем крупнее и заметнее он сам

H1

H2

H3

межбуквенное расстояние

МОЖНО

(интериньяж)

нельзя

правило

прописные разряжаем, чтобы легче было читать

строчные разряжать нельзя

очень мелкий кегль шрифта

исключение

начертания

заголовок

Заголовок всегда виден

подзаголовок

контент

подсказка

навигация

Подзаголовок полегче

Большинство текстов на сайте. Эта пятёрка начертаний является стандартным набором начертаний для любого сайта. Можете брать и пользоваться

помогаю справиться с навигацией на сайте

black

bold

regular

light

ССЫЛКИ, КНОПКИ, ПРОЧАЯ ШТУКА

regular/
medium

определяемся в самом начале, всегда придерживаемся одних размеров

5

начертаний используется в среднем на сайте

преемственность

на всех страницах сайта шрифт должен выглядит идентично и одинаково

в самом начале определяем какие шрифты будут (размер, начертание и тд) и пользуемся как шаблоном