Текст, который выглядит дорого

Два одинаковых текста, одинаковый шрифт и размер. Один выглядит как страница книги, другой — как вставка из мессенджера. Отличий обычно с десяток, и ни одно по отдельности не бросается в глаза.

Одинокое слово на второй строке заголовка. Последняя строка абзаца из трёх букв. Подчёркивание, перечёркивающее хвост буквы «р». Строка в сто двадцать символов, на которой глаз теряет начало следующей.

Раньше висячее слово в заголовке убирали вручную — ставили неразрывный пробел перед последним словом. Это работает ровно до смены ширины экрана.

text-wrap: balance просит браузер выровнять длину строк в блоке. Для заголовков и коротких подписей это лучшее, что можно сделать одной строкой.

text-wrap: pretty решает другую задачу — не даёт последней строке абзаца остаться из одного короткого слова. Он рассчитан на длинный текст.

<h2>Как выбрать зерно и не переплатить за
  &nbsp;упаковку</h2>

h1, h2, h3,
.lead {
  text-wrap: balance;
}

Самый заметный параметр читаемости — не размер шрифта, а длина строки. Комфортный диапазон — 45–75 символов; за сотню глаз начинает промахиваться мимо начала следующей строки.

Единица ch измеряется в ширинах нуля текущего шрифта, поэтому max-inline-size: 65ch — самый честный способ задать меру.

1.prose {2  /* Мера набора: примерно 65 символов в строке */3  max-inline-size: 65ch;4}56/* Иллюстрации и код могут быть шире текста */7.prose > figure,8.prose > .code {9  max-inline-size: none;10}

Первая буква на три строки — приём из книжной вёрстки. Делается псевдоэлементом ::first-letter и обтеканием.

Тонкость в том, что line-height у буквицы нужно занижать: при обычном значении буква окажется слишком высокой и не сядет по строкам.

1.article > p:first-of-type::first-letter {2  float: inline-start;3  font-size: 3.2em;4  /* Подбирается на глаз: около 0.8 сажает букву ровно на три строки */5  line-height: .82;6  padding-inline-end: .08em;7  padding-block-start: .05em;8  font-weight: 700;9}

Обычный float заставляет текст обтекать прямоугольник. shape-outside задаёт настоящую форму обтекания — круг, многоугольник или контур по прозрачности картинки.

<article class="article">  <div class="blob"></div>  <p>Обжарка меняет вкус сильнее, чем сорт. Одно и то же зерно из Эфиопии в светлой обжарке будет кислотным и ягодным, а в тёмной — горьким и плотным. Дата обжарки на пакете важнее любых медалей на этикетке: кофе раскрывается примерно через неделю и держится месяца полтора.</p></article>

.blob {  float: inline-start;  width: 120px;  height: 120px;  margin-inline-end: 14px;  border-radius: 50%;  background: linear-gradient(135deg, #7c5cff, #b06cff);​  /* Без этой строки текст обтекал бы квадрат */  shape-outside: circle(50%);  /* Воздух между фигурой и текстом */  shape-margin: 10px;}​.article p {  margin: 0;  font-family: Georgia, serif;  line-height: 1.6;  text-align: justify;  hyphens: auto;}

Выключка по формату (text-align: justify) без переносов даёт дыры между словами — особенно в русском, где слова длинные.

hyphens: auto включает словарь переносов, но работает только если у страницы правильно указан lang. Без него браузер не знает, какой словарь брать, и молча ничего не делает.

Стандартное подчёркивание ссылки проходит ровно по хвостам букв «у», «р», «д». Три свойства делают его аккуратным.

1a {2  /* Отодвигаем линию от базовой линии текста */3  text-underline-offset: .18em;4  /* Тонкая линия вместо толстой по умолчанию */5  text-decoration-thickness: 1px;6  /* Линия прерывается на хвостах букв */7  text-decoration-skip-ink: auto;8}

Обычный шрифт — это отдельный файл на каждое начертание: обычный, полужирный, жирный, курсив. Шесть начертаний — шесть файлов и шесть загрузок.

Вариативный шрифт хранит все промежуточные состояния в одном файле. Вес задаётся любым числом, а не ступенями: доступны и 350, и 620.

1@font-face {2  font-family: "Onest";3  src: url("onest-var.woff2") format("woff2-variations");4  /* Диапазон, а не одно значение */5  font-weight: 100 900;6  font-display: swap;7}89h1 { font-weight: 780; }10.lead { font-weight: 420; }1112/* Оси, кроме веса, задаются так */13.condensed {14  font-variation-settings: "wdth" 88;15}

1@layer base {2  :where(h1, h2, h3, .lead) {3    text-wrap: balance;4    letter-spacing: -0.02em;5  }67  :where(p, li) {8    text-wrap: pretty;9    line-height: 1.7;10  }1112  .prose {13    max-inline-size: 68ch;14    hyphens: auto;15  }1617  /* Кавычки-ёлочки и тире не набирают руками:18     их подставляет редактор, а CSS только не мешает */19  :where(blockquote) {20    quotes: "«" "»" "„" "“";21  }2223  blockquote p::before { content: open-quote; }24  blockquote p::after { content: close-quote; }2526  /* Цифры в таблице должны быть моноширинными,27     иначе колонка «пляшет» */28  .table td {29    font-variant-numeric: tabular-nums;30  }31}

• Выключка по формату в узкой колонке. На ширине телефона justify без переносов превращает текст в решето из дыр. Либо включай hyphens, либо оставляй выравнивание по началу строки.
• Буквица в интерфейсе. Это приём для длинного чтения. В карточке товара или в модальном окне он смотрится случайно.
• Разрядка основного текста. letter-spacing помогает крупным заголовкам и капслоку, но ухудшает читаемость обычного текста: слова перестают восприниматься целиком.
• Все оси вариативного шрифта сразу. Каждая ось — это вес файла. Подключай только те, которые реально используешь.

<article class="article" lang="ru">  <h1 class="article__title">Как выбрать зерно и не переплатить за красивую упаковку</h1>​  <div class="article__figure"></div>​  <p class="article__text">Обжарка меняет вкус сильнее, чем сорт. Одно и то же зерно из Эфиопии в светлой обжарке будет кислотным и ягодным, а в тёмной — горьким и плотным. Дата обжарки важнее любых медалей на этикетке: кофе раскрывается через неделю и держится месяца полтора. Подробнее — в <a href="#">нашем разборе</a>.</p></article>

.article {  font-family: Georgia, serif;}​.article__title {  font-size: 26px;  /* 1. Балансировка строк */}​.article__figure {  float: left;  width: 110px;  height: 110px;  margin-right: 14px;  border-radius: 50%;  background: linear-gradient(135deg, #7c5cff, #b06cff);  /* 4. Круглое обтекание */}​.article__text {  /* 2. Мера, интервал, переносы */}​/* 3. Буквица */​/* 5. Подчёркивание ссылки */​

1<article class="article" lang="ru">2  <h1 class="article__title">Как выбрать зерно и не переплатить за красивую упаковку</h1>34  <div class="article__figure"></div>56  <p class="article__text">Обжарка меняет вкус сильнее, чем сорт. Одно и то же зерно из Эфиопии в светлой обжарке будет кислотным и ягодным, а в тёмной — горьким и плотным. Дата обжарки важнее любых медалей на этикетке: кофе раскрывается через неделю и держится месяца полтора. Подробнее — в <a href="#">нашем разборе</a>.</p>7</article>

1.article {2  font-family: Georgia, serif;3}45.article__title {6  font-size: 26px;7  text-wrap: balance;8}910.article__figure {11  float: left;12  width: 110px;13  height: 110px;14  margin-right: 14px;15  border-radius: 50%;16  background: linear-gradient(135deg, #7c5cff, #b06cff);17  shape-outside: circle(50%);18  shape-margin: 10px;19}2021.article__text {22  max-inline-size: 62ch;23  line-height: 1.7;24  hyphens: auto;25  text-align: justify;26}2728.article__text::first-letter {29  float: inline-start;30  font-size: 3.2em;31  line-height: .82;32  padding-inline-end: .08em;33  padding-block-start: .05em;34  font-weight: 700;35}3637.article__text a {38  text-underline-offset: .18em;39  text-decoration-thickness: 1px;40  text-decoration-skip-ink: auto;41}