Typography

Как и в графическом дизайне печатных постеров, иногда веб-тексту нужна выразительность. Правильный выбор шрифта — только начало: насыщенность, стиль, интервалы и декорирование помогают многое, но порой этого недостаточно, чтобы текст действительно выделялся.

Пять свойств ниже помогают сделать текст красивее или хотя бы интереснее. Все реализации достаточно простые и легко комбинируются с другими приёмами.

1. background-clip

Заливка букв в типографике обычно сплошной цвет (бывают и экзотические исключения). Но заполнить эту область изображением тоже несложно: достаточно выбрать подходящий фон и обрезать его по форме текста. В результате получаются яркие "вырезанные" буквы, которые остаются читаемыми.

В конце 2000-х для свойства background-clip появилось значение text, позволившее маскировать фоновые изображения (или градиенты) внутри реального текста. С тех пор это одно из самых востребованных правил для эффектной типографики.

<p>Belize Reef</p>
p {
  /* `background-clip: text` включён в сокращённую запись */
  background: text url("image.jpg") center/auto 1lh;
  /* прозрачный текст, чтобы был виден обрезанный фон под ним */
  color: transparent; 
}

2. vertical-align / align-content

Иногда именно базовые вещи оказываются самыми важными.

Горизонтальное выравнивание текста доступно давно (text-align: center;). А вот с вертикальной осью всё не так однозначно. Разобраться в этом помогают два свойства.

Свойство vertical-align пришло из эпохи раннего веба, когда вёрстка строилась на HTML-таблицах, и активно использовалось для выравнивания содержимого внутри ячейки. Вне таблицы оно, строго говоря, не выравнивает текст по вертикали — оно выравнивает inline-элементы относительно текста.

Если в строку текста добавляется элемент вроде span, img или input, и его нужно выровнять относительно строки — за это отвечает vertical-align.

31 B<span class="emoji">&#x1F4BA;</span>
.emoji {
  vertical-align: top;
}

То, что многие изначально считают задачей vertical-align — выравнивание текста по вертикали внутри блока — на самом деле выполняет более новое свойство align-content.

Появившееся в эпоху современной вёрстки, align-content работает не только с flexbox и grid, но и с обычным блочным боксом, выстраивая содержимое блока по вертикали.

<p>Bonjour</p>
p {
  width: 360px;
  aspect-ratio: 1;
  text-align: center;

  /* grid и flexbox больше не нужны */
  align-content: center;
}

3. box-decoration-mode

В типографике редко думают о строке как об отдельном элементе. Но если такая задача возникает, для неё есть, по сути, только одно решение.

В CSS есть отдельный модуль для управления разрывами контента при переносе по потоку, колонке или странице — fragmentation. Но долгое время он отвечал только за отступы, перенос и расположение разрыва — пока не появился box-decoration-mode, взявший на себя оформление.

Когда строка текста разрывается, край разрыва обычно остаётся без оформления, из-за чего фрагменты выглядят рвано. С box-decoration-mode можно добиться того, что края всех фрагментов оформлены единообразно — рамки, тени и прочие стили применяются к каждому краю элемента.

<span>
water cooler chat <br>
everyone agrees <br>
it is hot
</span>
span {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* стили края */
  border: solid blue;
  border-width: 0 1px 1px 0;
  box-shadow: 2px 2px 3px rgb(171, 171, 245);
  padding-inline: 6px;
  border-radius: 3px;
}

4. letter-spacing

Свойство letter-spacing недооценено — не только с точки зрения эстетики, но и для анимации.

В CSS нет способа обратиться к отдельным глифам текста (кроме первого). Но letter-spacing отчасти решает эту проблему, задавая расстояние после каждого глифа в тексте. Значение может быть как положительным (увеличение расстояния), так и отрицательным (сжатие).

Анимация этого свойства даёт эффект "проявления" текста.

<section id="text">
  <span>Ingvar</span> 
  <span>Kamprad</span> 
  <span>Elmtaryd</span> 
  <span>Agunnaryd</span>
</section>
span {
  /* Сжать и скрыть буквы */
  letter-spacing: -1ch;
  color: transparent;
  /* Оставить видимой первую букву */
  &::first-letter {
    color: #FBDA0C; /* жёлтый */
  }
  /* При раскрытии */
  body:has(:checked) & {
    /* Раскрыть и показать буквы */
    letter-spacing: 0ch;
    color: #0057AD; /* синий */
    transition: letter-spacing 0.4s cubic-bezier(.8, -.5, .2, 1.4), color 0.8s linear;
  }
}

5. text-combine-upright

text-combine-upright создано для восточноазиатской типографики, где короткие фрагменты текста иногда записываются мелким размером как вертикальное "предложение".

Свойство работает только тогда, когда режим письма установлен как vertical.

В языках с направлением письма слева направо, например в английском, вертикальное письмо иногда используется ради экономии места или внешнего вида. При этом бывает нужно сохранить часть текста горизонтальной.

<p>2 Kilo <span>4 lb</span>Sugar</p>
<p><span>&#x1F3C2;</span><span>Feb</span>02/26</p>
p {
  writing-mode: vertical-lr;
  span {
    text-combine-upright: all;
  }
}

Существует множество других свойств, полезных для типографического дизайна, но эти пять дают хорошую отправную точку и понимание того, какие аспекты типографики можно контролировать средствами CSS.