Как сделать красивый шрифт в HTML

Шрифт на странице меняет CSS-свойство font-family. Нестандартный шрифт подключают ссылкой на Google Fonts или правилом @font-face, а затем называют его в font-family. Красивый результат требует двух вещей: у шрифта есть кириллица, а в стеке стоит запасной шрифт.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

<style>
  body { font-family: "Roboto", Arial, sans-serif; }
</style>

Берите шрифт, в котором есть кириллица. Без нее русские буквы отобразятся запасным шрифтом, и вся красота пропадет.

Обновлено: 2026-10-01 23:34:29 РА Роман Ачкасовавтор материала

Где задавать шрифт: CSS-файл, тег style или атрибут style

Три места для правил

Правила шрифта лучше держать в отдельном CSS-файле. Один стиль работает на всех страницах, а править его удобно в одном месте.

• CSS-файл подключают тегом <link rel="stylesheet" href="style.css">. Это основной способ для сайта.
• Тег <style> в <head> подходит для одной страницы или быстрого примера.
• Атрибут style задает стиль одному элементу. Для целого сайта он неудобен, потому что правила разбросаны по разметке, а переопределить их из CSS-файла сложно.

Во всех примерах ниже стили вынесены в классы и селекторы. Атрибут style нужен только для быстрой проверки в браузере.

Почему тег font больше не нужен

Теги <font>, <big> и <center> устарели. В HTML Standard они попали в раздел устаревших элементов. По терминам стандарта это non-conforming: авторам такие элементы применять нельзя.

Атрибуты face, size и color тега <font> относятся к тому же разделу. Браузеры пока рисуют такую разметку, но валидатор ее отклонит, и полагаться на нее нельзя.

Вместо <font size="7" color="red" face="Arial"> напишите класс:

.lead {
  font-family: Arial, sans-serif;
  font-size: 2rem;
  color: red;
}

<p class="lead">Крупный красный текст</p>

Как подключить свой шрифт

Google Fonts: ссылка в head и @import

Сервис Google Fonts раздает шрифты по ссылке. Вы выбираете шрифт в каталоге, отмечаете нужные начертания и копируете готовый код. Ссылка формата css2 задает семейство в параметре family, начертания через wght, а способ показа текста в display.

https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap

Ссылку вставляют в <head> тегом <link>. Ту же ссылку можно подтянуть первой строкой CSS-файла через @import:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

Значение display=swap сразу показывает текст запасным шрифтом. Когда нужный шрифт загрузится, браузер подменит его. Читатель не смотрит на пустое место.

Если на странице всего несколько символов нужным шрифтом, например в логотипе, добавьте в ссылку параметр text=. Google Fonts вернет файл, оптимизированный под эти символы. Документация сервиса обещает уменьшение файла до 90% в некоторых случаях.

Как выбрать шрифт с кириллицей

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

Любой другой шрифт проверяют после подключения: откройте страницу и посмотрите, каким шрифтом выведен русский текст. Запасной шрифт в font-family добавляйте всегда.

Для статьи хорошо работает пара из двух шрифтов. Заголовки набирают шрифтом с засечками, например Lora, а основной текст шрифтом без засечек, например PT Sans или Open Sans.

Не набирайте больше двух семейств на страницу. Каждое семейство и каждое начертание – отдельные файлы, которые скачивает читатель.

Свой хостинг через @font-face

Файлы шрифта можно положить на свой сервер. Тогда страница не зависит от внешнего сервиса. Формат woff2 поддерживают все актуальные основные браузеры, по данным caniuse глобальный охват составляет около 97%. Формат woff остается запасным для старых версий.

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body { font-family: "MyFont", Arial, sans-serif; }

Правило @font-face объявляет шрифт и дает ему имя. Дальше это имя работает в font-family как любое другое.

Свойство font-display: swap дает шрифту очень короткий период блокировки и бесконечный период подмены. Пока файл не загрузился, браузер рисует текст запасным шрифтом.

unicode-range: загружать только нужные символы

Свойство unicode-range делит шрифт на части по диапазонам символов. Браузер скачивает файл только тогда, когда на странице есть хотя бы один символ из его диапазона. Для кириллицы это удобно, потому что латинский и кириллический файлы объявляют отдельно, и русская страница не грузит лишнего.

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont-latin.woff2") format("woff2");
  unicode-range: U+0020-007F;
}

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-04FF;
}

Диапазон U+0400-04FF покрывает основной блок кириллицы в Юникоде. Тексты только на русском обычно обходятся одним файлом с кириллицей и латиницей.

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

Семейство и запасные шрифты

Как работает стек font-family

Свойство font-family принимает список шрифтов через запятую. Браузер берет первый доступный, а остальные держит про запас. Имена из нескольких слов берите в кавычки. Последним ставьте generic-семейство: браузер подберет подходящий шрифт сам.

body {
  font-family: "Roboto", Arial, sans-serif;
}

Generic-семейства:

• serif: шрифты с засечками;
• sans-serif: шрифты без засечек;
• monospace: моноширинные шрифты для кода;
• system-ui: шрифт интерфейса той системы, где открыта страница;
• ui-serif и ui-monospace: системные шрифты интерфейса, с засечками и моноширинный.

MDN пишет про system-ui, что он нужен, чтобы элементы интерфейса выглядели как в нативных приложениях, а для верстки больших абзацев он не предназначен. Для длинных абзацев берите sans-serif или другой не интерфейсный шрифт.

Системные шрифты: что есть без загрузки

Системный шрифт не надо скачивать, страница открывается быстрее. Набор зависит от устройства, и надежно рассчитывать можно на немногое.

• В Windows есть Arial, Times New Roman, Verdana, Tahoma, Georgia, Segoe UI, Calibri, Consolas и Courier New: они входят в основной список шрифтов Windows 10.
• В macOS и iOS Apple относит к системным шрифтам Helvetica Neue, Arial и Georgia.
• В Android список системных шрифтов зависит от производителя и версии, поэтому опирайтесь на generic-семейства: sans-serif и system-ui выберут шрифт устройства сами.

Arial есть и в списке Windows, и в списке Apple, поэтому он стоит в запасных стеках примеров. Остальные системные шрифты ставьте в стек как дополнение, а в конце всегда держите sans-serif или serif. Стек с system-ui подходит для кнопок и полей форм, а текст статьи оставьте на sans-serif.

button, input, select {
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
}

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

Единицы измерения

Размер задает свойство font-size. Значения от 1 до 7 были только у атрибута size тега <font>. В CSS размер не ограничен этим набором.

• px: фиксированный размер в пикселях;
• em: размер относительно шрифта элемента (в самом font-size относительно родителя);
• rem: размер относительно шрифта корневого элемента;
• %: доля от размера родителя;
• ключевые слова small, medium, large и другие.

Почему rem удобнее для доступности

Единица rem опирается на корневой font-size, который пользователь может изменить в настройках браузера. Поэтому размеры в rem подстраиваются под его выбор. Для доступности это надежнее фиксированных пикселей: человек с плохим зрением увеличивает шрифт один раз, и вся страница следует за ним.

clamp(): адаптивный размер

Функция clamp(min, val, max) задает адаптивный размер с нижней и верхней границей. Среднее значение держите в виде суммы: часть в rem плюс часть в vw.

h1 {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

Заголовок растет вместе с шириной окна и не выходит за минимум и максимум, поэтому отдельные правила для телефона и компьютера не нужны. Часть 1rem привязана к настройке шрифта в браузере, поэтому читатель, увеличивший шрифт, получает и более крупный заголовок. Среднее значение из одних vw на эту настройку не реагирует.

У MDN есть требование для текста: максимум в clamp() должен быть относительной единицей и не меньше чем вдвое больше минимума. Этому требованию пример выше отвечает, ведь 3rem ровно вдвое больше 1.5rem.

Начертание: жирность, курсив, капитель

font-weight: числа и названия

Свойство font-weight принимает ключевые слова и числа. Слово normal равно 400, а bold равно 700. Числа от 1 до 1000 дают тонкую настройку у вариативных шрифтов. У обычного шрифта браузер выбирает ближайшее начертание из доступных.

Привычные значения соответствуют названиям начертаний так:

.thin  { font-weight: 300; }
.bold  { font-weight: 700; }

Значение сработает, только если у шрифта есть такое начертание. Если вы подключили в Google Fonts только 400 и 700, то font-weight: 300 покажет ближайшее из них.

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

Вариативный шрифт хранит все начертания в одном файле, а жирность меняется плавно по оси wght. В @font-face для такого файла указывают диапазон вместо одного числа. Диапазон должен совпадать с тем, что поддерживает сам шрифт.

@font-face {
  font-family: "MyVar";
  src: url("/fonts/myvar.woff2") format("woff2");
  font-weight: 100 900;
}

.semi { font-weight: 650; }

Вместо пяти файлов страница грузит один, а промежуточные значения вроде 650 становятся доступны.

font-style и font-variant: курсив и капитель

Свойство font-style принимает normal, italic и oblique. Курсив рисуется отдельным начертанием, а oblique наклоняет обычные буквы.

Свойство font-variant: small-caps включает капитель. Буквы получают форму прописных, но размер строчных. За заглавные буквы отвечает другое свойство, text-transform: uppercase.

.caps { font-variant: small-caps; }

Каждое подключенное начертание – отдельный файл, и страница становится тяжелее. Берите только те начертания, которые нужны на странице.

Сокращенное свойство font

Порядок значений и типичная ошибка

Свойство font собирает несколько свойств в одну строку. Стиль, вариант и жирность стоят до размера. Межстрочный интервал пишут через косую черту сразу после размера, а семейство ставят последним. Размер и семейство обязательны, пропущенные значения сбрасываются на начальные.

p {
  font: italic small-caps 700 1rem/1.6 Georgia, serif;
}

Частая ошибка: поставить жирность после размера, например font: italic 50px bold "Times New Roman". Такое правило браузер отбросит целиком.

Если сомневаетесь в порядке, запишите свойства по отдельности. Так вы ничего не собьете.

Цвет и оформление текста

color: способы задать цвет

Цвет задает color. Подойдет имя цвета, HEX, rgb() или hsl():

.a { color: blue; }
.b { color: #00ff99; }
.c { color: rgb(100 50 180); }
.d { color: hsl(220 30% 20%); }

Прозрачный цвет: rgba и hsla

Четвертое значение задает прозрачность. Ноль дает полностью прозрачный цвет, а 1 или 100% полностью плотный. В современной записи его ставят через косую черту внутри rgb() и hsl().

Старые имена rgba() и hsla() работают как псевдонимы, MDN называет их полностью равнозначными. Новый код пишите через rgb() и hsl(), как рекомендует MDN.

.e { color: rgb(0 0 0 / 25%); }
.f { color: hsl(220 30% 20% / 0.8); }
.g { color: rgba(0, 0, 0, 0.6); }
.h { color: hsla(220, 30%, 20%, 0.8); }

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

Контраст текста и фона

Для основного текста берите темно-серый вместо чистого черного, например #222: на светлом фоне он читается мягче. Критерий 1.4.3 рекомендаций WCAG 2.2 (уровень AA) требует контраста не ниже 4.5:1 для обычного текста и не ниже 3:1 для крупного. Крупным считается текст от 18pt или от 14pt жирного, то есть примерно от 24px или от 18.5px жирного.

Цвет #222 на белом фоне проходит порог с большим запасом, а светло-серый #aaa на белом не проходит.

Межстрочный интервал, разрядка, регистр и пресеты

Для красивого текста важны не только гарнитура и цвет. Вид задают еще несколько свойств:

• line-height: межстрочный интервал, для абзацев обычно около 1.5–1.7 без единиц;
• letter-spacing: расстояние между буквами;
• text-transform: регистр, значения uppercase, lowercase, capitalize;
• text-decoration: подчеркивание и зачеркивание;
• text-shadow: тень от текста.

Пресеты для заголовка и основного текста:

.title {
  font-family: Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
}

.text {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
}

Тень должна быть едва заметной, потому что сильная тень ухудшает читаемость.

Семантические теги форматирования

Что означает каждый тег

У HTML остались теги, которые несут смысл вместе с видом. Их внешний вид меняется через CSS.

• <strong>: важный, серьезный или срочный текст;
• <b>: текст, который привлекает внимание, но без особой важности; жирность для оформления лучше задать через font-weight;
• <em>: смысловой акцент в предложении;
• <i>: текст, выделенный из общего, например термин, идиома или латинское название;
• <mark>: фрагмент, выделенный как важный для контекста;
• <small>: побочные замечания и мелкий шрифт, например юридический текст;
• <sub>: нижний индекс, как в H₂O;
• <sup>: верхний индекс, как в м²;
• <ins>: добавленный текст;
• <del>: удаленный текст.

Теги <sub> и <sup> задают индексы и регистр букв не меняют. У <ins> подчеркивание стоит по умолчанию, и его меняют через text-decoration. Тег <small> означает побочное замечание, а не только мелкий кегль.

mark { background: #fff3a3; color: #222; }
del  { color: #888; }

Частые ошибки со шрифтами в CSS

• Кириллица не отображается, когда шрифт не содержит русских букв и браузер берет запасной. Берите шрифт с кириллицей, а любой другой проверьте: подключите его, откройте страницу и посмотрите на русский текст. Запасной шрифт в font-family добавляйте всегда.
• Текст невидим, пока грузится шрифт. Добавьте font-display: swap: браузер сразу покажет запасной шрифт.
• Текст «прыгает» при подмене запасного шрифта на загруженный. Подберите запасной шрифт с похожими пропорциями. Значение font-display: optional подмены не делает вовсе: если шрифт не успел загрузиться, страница остается на запасном.
• Страница тяжелая, когда подключено много начертаний: каждое лишнее начертание добавляет файл для загрузки. Оставьте только нужные.
• Значения в font стоят в неверном порядке. Размер и семейство обязательны, семейство идет последним.
• В новом коде остались теги font и big. Заменяйте их CSS-классами.

Готовый набор CSS для типографики страницы

Возьмите этот набор за основу и замените шрифты на свои:

html {
  font-size: 100%;
}

body {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
}

h1, h2, h3 {
  font-family: Georgia, serif;
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 2.5rem); }

small { font-size: 0.875rem; }
code, pre { font-family: monospace; }

Подключите выбранный шрифт, откройте страницу в браузере и убедитесь, что русский текст выводится нужным шрифтом.

Начните с одной пары шрифтов и рабочего запасного стека. Красивую типографику дают аккуратные размеры, межстрочный интервал и достаточный контраст.