Read this article in English.

阅读这篇文章

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

В этом руководстве мы разберём ключевые настройки типографики и узнаем, как можно управлять ими с помощью CSS, чтобы текст в ваших приложениях и на сайтах выглядел хорошо «по умолчанию». Этот туториал будет полезен разработчикам, которые хотят получить 80 % результата, приложив 20 % усилий, не погружаясь с головой в типографику. Он может пригодиться и тем, кто уже разбирается в типографике, но мало работал с вебом и хочет быстро понять CSS-аналоги знакомых понятий.

В статье мы не будем обсуждать выбор конкретного шрифта для проекта или их классификацию. Мы поговорим о том, в каком формате должен быть ваш шрифт. Мы не затронем темы вроде правильного выбора кавычек или того, когда использовать дефисы вместо длинных тире, поэтому если вам интересно это направление, очень рекомендую книгу Butterick’s Practical Typography.

Основы типографики: выбор шрифта

Рассмотрим локальный шрифт

В вебе вы можете выбирать шрифты, уже установленные на устройстве пользователя, или подключать собственные. Для проектов без строгих требований к типографике я рекомендую использовать встроенные системные шрифты. И это вовсе не означает Arial и Times New Roman! Вы удивитесь, насколько далеко может завести вас system-ui. А для ещё большего выбора загляните в Modern font stacks.

Внешние шрифты

Чтобы загрузить собственный шрифт, нужно разместить его на хостинге и добавить в стили правило @font-face.Есть сервисы, которые делают это за вас, самый популярный и бесплатный — Google Fonts. Если вы используете коммерческий шрифт, возможно, его разместит для вас сам дистрибьютор или студия.

Формат для внешних шрифтов

Исторически шрифты распространялись в разных форматах. Самые известные — TrueType (.ttf) и OpenType (.otf). Оба можно использовать как внешние шрифты, но в этом мало смысла, если только вам не нужна поддержка очень старых браузеров. Для современных браузеров лучше выбрать WOFF2. Браузеры умеют загружать шрифты в разных форматах, но нас интересуют современные, и все они отлично работают с WOFF2.

Шрифты WOFF похожи на TrueType и OpenType, но сжаты, а разработчики шрифтов чаще готовы лицензировать их для веба именно в формате .woff, а не .ttf или .otf. Конвертировать шрифты в WOFF2 (и обратно) можно с помощью инструментов woff2 от Google (или через формулу на Mac).

Отдавайте предпочтение переменным шрифтам

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

/* Это определение загружает только файл шрифта с весом 400 и обычным стилем */
@font-face { font-family: 'Sonko'; 
src: url('path/to/sonko-regular.woff2') format('woff2'); 
font-weight: normal; 
font-style: normal; 
font-display: swap;} 
/* Если нужен другой вес или курсив, придётся загрузить несколько файлов */

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

К счастью, в мире появились переменные шрифты. Их можно настраивать, изменяя значения по одной из осей: ширина, наклон, оптический размер и т. д. Чаще всего нас интересует ось wght (вес). Она позволяет гибко задать вес, например 582, тогда как у обычных шрифтов приходится выбирать между 500 и 600.

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

@font-face { font-family: 'MyFont'; 
/* Допустимый диапазон веса */ 
font-weight: 100 900; 
font-style: normal; 
font-display: swap; 
src: url(/fonts/MyFont.woff2) format('woff2-variations');}

Подмножество

Некоторые шрифты поддерживают множество письменностей, а значит содержат огромное количество глифов.  Возможно, вам они не нужны. Если ваш контент только на английском, нет смысла заставлять пользователей загружать части шрифта с кириллицей, греческими или арабскими символами. Чтобы ускорить загрузку, используют subsetting — создают новый шрифт на основе исходного, удаляя ненужные глифы. Это делает файл легче и заметно ускоряет загрузку.

Размер и расстояния

Размер шрифта

Шрифт должен быть достаточно большим для комфортного чтения. Браузеры по умолчанию используют 16 px — этого обычно достаточно. Если выбранный шрифт кажется слишком крупным или мелким, настройте размер на корневом уровне в процентах:

:root { font-size: 112.5%; /* = 18px */}

Из-за особенностей типографики шрифты одинакового размера могут выглядеть по-разному, поэтому при смене шрифта возможно придётся подкорректировать размер. Больше можно узнать тут.Используйте rem для задания размера других элементов:

.alert { font-size: 1.25rem; /* = 20px */} 
.tip { font-size: 0.875rem; /* = 14px */}

Некоторые пользователи меняют размер шрифта в браузере (например, слабовидящие). Если задать размер в абсолютных единицах (например, 16 px), браузер проигнорирует пользовательский выбор. Поэтому лучше использовать проценты для корня и rem для остальных элементов.

Нет жёстких правил для размеров заголовков. Хорошей отправной точкой может стать типографическая шкала — она помогает рассчитать размеры элементов на основе фиксированного коэффициента. На typescale.com можно поэкспериментировать с разными коэффициентами и увидеть результат.

Межстрочный интервал

Это один из самых простых и важных параметров. Если строки слишком близко, то текст тяжело читать. Если слишком далеко — теряется ритм.В CSS line-height можно задать в абсолютных единицах (например, 24 px) или относительно размера шрифта. Абсолютные значения редко нужны, поэтому лучше использовать относительные:

:root { 
line-height: 1.5; /* The font-size multiplied by 1.5 */ 
}

Значения по умолчанию для межстрочного интервала (line height) в браузерах находятся в диапазоне от 1.1 до 1.2, что слишком мало для больших объёмов текста. Идеальное значение будет зависеть от используемого шрифта, но хорошей отправной точкой считается 1.5.

Эта рекомендация относится к основному тексту, то есть к размеру шрифта около 16 px, плюс-минус. Для более крупного текста, например заголовков, столько интерлиньяжа не требуется. Всё зависит от шрифта и желаемого внешнего вида, но обычно хорошо работают значения между 1.15 и 1.3.

Если хотите глубже разобраться, почему межстрочный интервал ведёт себя по-разному у разных шрифтов, вот парочка статей для вас: первая, вторая.

Ограничьте ширину строки

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

Исследования по оптимальной длине строки не дают абсолютно точных данных, но считается, что комфортный диапазон от 45 до 100 символов. Например, средняя длина строки на этом сайте 90 символов.

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

main { 
max-width: 800px;
}

Поиграйте с кернингом

Это чуть более тонкая настройка. Кернинг — это расстояние между буквами. Если вы используете качественный шрифт, велика вероятность, что оптимальный кернинг уже встроен. Если сомневаетесь, нужно ли его менять, скорее всего не нужно. Но иногда может понадобиться ручная коррекция: например, для очень мелкого текста, чтобы улучшить читаемость, или для очень крупного, чтобы сделать его компактнее.

Кернинг задаётся свойством letter-spacing, обычно в em – относительных единицах, зависящих от размера шрифта текущего элемента. Здесь пример с классом small-tip, но, разумеется, имя класса может быть любым.

.small-tip { 
letter-spacing: -0.02em;
}

Создайте иерархию

Чёткая иерархия определяет, что на странице важнее. Она помогает пользователю лучше понять порядок значимости контента. Когда заголовки, подзаголовки и основной текст структурированы, документ легче воспринимается и по нему проще ориентироваться.
Чаще всего иерархию строят с помощью размера: заголовки больше, основной текст меньше. Но это не правило. Иерархию можно создать также с помощью цвета и насыщенности. Посмотрите пример на сайт Emil Kowalski.

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

Выбирайте цвета

Для основного текста полезно выбрать нейтральный цвет, чтобы не напрягать глаза читателя. Обычно это светло-серый для страниц с тёмным фоном и тёмно-серый для страниц со светлым. Классическая комбинация чисто чёрного на белом (и наоборот) может выглядеть слишком контрастной на некоторых экранах.Элементы интерфейса, такие как кнопки, обычно более яркие. Важно обеспечить достаточный контраст текста на них. Для мелкого и обычного текста контраст должен быть не менее 4.5, а для крупного и жирного — не менее 3:1. Проверить это можно прямо в Chrome DevTools или с помощью специальных приложений, например, это.

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

В типографике слово, которое перенесено на новую строку в одиночестве, называют «сиротой», и это выглядит неаккуратно, особенно в заголовках. К счастью, существует свойство text-wrap: balance, которое помогает исправить это.

h1, h2, h3, h4, h5, h6 { 
text-wrap: balance;
}

С этим свойством браузер использует другой алгоритм переноса многострочного текста — он старается сбалансировать строки, чтобы их длина была примерно одинаковой. Это помогает избежать «сирот» и делает заголовки аккуратнее. Есть, правда, ограничение: оно работает только для коротких блоков текста (до 6 строк в Chrome и 10 — в Firefox). Поэтому лучше применять его для заголовков и коротких текстовых блоков вроде уведомлений или подсказок. Вот отличная статья на эту тему.

Chrome поддерживает text-wrap: pretty, которое даёт похожий результат и подходит для больших текстов, но пока не поддерживается Firefox и Safari.

Особенности браузеров

Размер шрифта на мобильных

Мобильные браузеры (часто Safari на iOS) могут автоматически увеличивать размер шрифта в некоторых случаях (подробнее тут). Обычно это нежелательно, поэтому отключите его с помощью свойства text-size-adjust.

:root { 
-moz-text-size-adjust: 100%; 
-webkit-text-size-adjust: 100%; 
text-size-adjust: 100%;
}

Если нужно изменить размер шрифта именно на мобильных, используйте медиазапросы.

Сглаживание шрифтов на macOS

CSS позволяет выбирать, как шрифты будут рендериться в macOS. Для этого есть свойства -webkit-font-smoothing и -moz-osx-font-smoothing. По умолчанию браузер выбирает то, что считает лучшим, обычно это subpixel-antialiased. Однако можно вручную задать antialiased/grayscale, что (субъективно) делает текст более чётким.

Это довольно спорная тема. Например, есть популярная статья, которая объясняет, почему не стоит так делать. Но при этом примерно 60 % сайтов включают экранное сглаживание, и оно есть в стандартных стартах Vite.

На мой взгляд, эта настройка делает отрисованный текст лучше, более «чётким», если можно так выразиться.

:root { 
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

Я бы решал вопрос использования сглаживания в каждом случае отдельно. Если у вас есть Mac, посмотрите, как сайт выглядит с этой настройкой (или попросите знакомого проверить). Этот сайт тоже применяет это свойство, особенно для шрифтов в заголовках разница заметна.

Вот заголовок с кернингом по умолчанию

Дополнительные материалы

Если вам интересна типографика, вот отличный ресурс для дальнейшего изучения. Уже упомянутая книга Butterick’s Practical Typography — одна из моих любимых на эту тему. А если хотите углубиться в создание собственных шрифтов, Type Design Resources — самая большая коллекция информации, которую я знаю. 

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

Этот пост впервые был опубликован на сайте Korniieko.

При подготовке перевода этого туториала мы протестировали возможности искусственного интеллекта ChatGPT, Claude и Gemini.

Финальный текст был проверен и отредактирован носителями языка из нашей команды.

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