В вебе, как и в дизайне плаката, иногда хочется сделать текст заметнее. Помогут пять CSS-свойств.
Первое — background-clip. Раньше буквы обычно заливали сплошным цветом, но можно взять картинку и обрезать её по форме текста. Для этого у background-clip есть значение text: фон маскируется внутри букв, получается эффектный текст с изображением. Приём появился в конце 2000-х и до сих пор популярен.
Второе — vertical-align и align-content. С горизонтальным выравниванием всё просто, а вот по вертикали текст часто встаёт криво. vertical-align пришёл из эпохи табличной вёрстки: он выравнивает инлайн-элементы вроде span, img или input относительно строки текста. А вот чтобы выровнять сам текст внутри блока по вертикали, нужно align-content — это свойство из современных раскладок работает и с flex box, и с grid, и с обычным блоком. Например, ставим text-align: center и align-content: center — и текст оказывается в центре квадрата.
Третье — box-decoration-mode. Когда длинный текст переносится на несколько строк, разорванные края обычно выглядят неопрятно: рамка или тень обрываются. Свойство box-decoration-mode (в коде — box-decoration-break: clone) заставляет все фрагменты строк получать одинаковое оформление: рамки, тени, скругления.
Четвёртое — letter-spacing. С его помощью управляют межбуквенным расстоянием: положительные значения раздвигают буквы, отрицательные — сжимают. Это единственная возможность воздействовать на отдельные глифы, ведь CSS не умеет выбирать конкретную букву (кроме первой). Анимация letter-spacing даёт эффект проявления текста: буквы разъезжаются и окрашиваются.
Пятое — text-combine-upright. Оно пригодится для вертикального письма. Если writing-mode: vertical-lr, можно вставить короткий горизонтальный фрагмент — например, числа или латинские сокращения — и свойство text-combine-upright: all совместит их в одну вертикальную строку. Удобно для единиц измерения или дат в вертикальном тексте.
Эти пять свойств не исчерпывают типографику в CSS, но дают хорошую отправную точку.