Типография

Веб-функции: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() и clamp() Viewport units

Общие рекомендации

  • Используйте для line-height числа без единиц измерения (например, 1.5), чтобы обеспечить относительное масштабирование при наследовании размера шрифта.
  • Используйте overflow-wrap: break-word (или anywhere), чтобы размещать длинные URL.
  • НЕ используйте px для размера шрифта. Используйте rem, чтобы учитывать настройки размера шрифта в браузере пользователя (размер шрифта корневого элемента), или em/проценты для контекстного размера.

Легкость чтения

  • Избегайте длинных строк текста. Ограничьте ширину абзацев до 80 символов.
  • Избегайте пробельных коридоров. Не используйте text-align: justify, так как это может затруднить чтение текста. Если вы все же хотите его использовать, добавьте hyphens: auto, чтобы между словами не было слишком много пустого пространства.
  • Не используйте декоративные шрифты. Не используйте курсив для основного текста.
  • Не используйте все заглавные буквы для выделения. Для визуального выделения лучше использовать полужирный шрифт, а для смыслового – теги <em>/<strong>.
  • Не злоупотребляйте выделением. Если выделять слишком много слов, это потеряет смысл. Выделяйте только то, что действительно важно.
  • Поддержка пользовательских настроек масштабирования. Позвольте пользователям увеличивать размер текста до 200% без потери контента или функциональности.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Перенос текста

  • Используйте text-wrap: balance для сбалансированных заголовков и похожего контента (например, <th>).
  • Используйте text-wrap: pretty для длинного основного текста (абзацев, цитат и т. д.).
  • Используйте text-wrap: balance или text-wrap: pretty только при необходимости. НЕ применяйте их к *, так как это может снизить производительность.
  • Не используйте text-wrap: balance для элементов с видимым полем (фоны, границы, тени и т. д.), поскольку это не меняет ширину контейнера, а влияет только на перенос текста внутри этой ширины. В результате в конце контейнера может остаться пустое пространство, что обычно нежелательно.

Адаптивная типографика

  • РЕКОМЕНДУЕТСЯ комбинировать в clamp() единицы, зависящие от области просмотра и шрифта, чтобы размер шрифта масштабировался в соответствии с размером области просмотра, но оставался в желаемом диапазоне. например clamp(2rem, 1rem + 5vw, 4rem). Отрегулируйте соотношение единиц измерения, связанных с областью просмотра и шрифтом, чтобы контролировать скорость изменения размера шрифта.
  • НЕ используйте vw для размера шрифта без clamp(), так как на некоторых экранах текст может быть слишком маленьким или слишком большим.