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

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

Обновлено: 2026-10-28 21:27:37 АМ Антон Малаховавтор материала

Шрифт текста в CSS

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

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

Браузер сначала попробует Arial, затем перейдет к Helvetica Neue. Последнее значение sans-serif обозначает общее семейство без засечек. Его конкретный шрифт зависит от системы и настроек браузера.

Заключайте в кавычки названия с пробелами, оставляя общие семейства serif, sans-serif и monospace без кавычек.

Веб-шрифт подключайте через @font-face. Например, сохраните разрешенный для использования файл в папке fonts рядом с CSS-файлом:

@font-face {
  font-family: "Article Font";
  src: url("fonts/article-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

Замените путь на расположение вашего файла шрифта. Название Article Font вы задаете сами и повторяете в font-family. Значение swap разрешает показывать запасной шрифт, пока загружается основной.

Для отдельных файлов жирного и курсивного начертаний добавьте свои правила @font-face. Укажите в них соответствующие font-weight и font-style. Проверьте, что выбранные файлы содержат кириллические символы.

Визуальное оформление текста в CSS

Свойство text-decoration добавляет подчеркивание, надчеркивание или зачеркивание. Это сокращенная запись для нескольких свойств оформления линии.

Свойство text-underline-offset задавайте отдельно: сокращение text-decoration его не включает.

.article-link {
  color: #0645ad;
  text-decoration: underline solid currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.article-link:hover,
.article-link:focus-visible {
  text-decoration-thickness: 0.14em;
}

.crossed {
  text-decoration: line-through;
}

.menu-link {
  text-decoration: none;
}

Примените классы к соответствующим элементам в HTML:

<p><a class="article-link" href="guide.html">Руководство</a></p>
<p class="crossed">Зачеркнутый текст</p>
<nav><a class="menu-link" href="index.html">Главная</a></nav>

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

Значение inherit относится к глобальным значениям CSS. Оно явно запрашивает вычисленное значение свойства у родителя. При этом text-decoration по умолчанию не наследуется. Линия, проведенная родителем через дочерний текст, не исчезнет от text-decoration: none у потомка.

Цвет текста в CSS

Свойство color задает цвет текста. Для обычного текста учитывайте фон: прозрачный цвет смешивается с ним.

.text-primary {
  color: #222;
}

.text-accent {
  color: hsl(280 67% 40%);
}

.text-translucent {
  color: rgb(119 34 170 / 50%);
}

Сокращайте HEX, если каждая пара цифр состоит из повторов: например, #ff00aa до #f0a.

Для обычного текста WCAG задает минимальный контраст 4,5:1 на уровне AA. Для крупного текста действует отдельный порог. Определения и исключения описаны в пояснении W3C к критерию контраста. Не делайте вспомогательный текст бледным только ради визуальной легкости.

Размер текста в CSS

CSS-свойство font-size позволяет задать размер текста. Для экранной типографики удобно сочетать относительные единицы и ограниченные адаптивные значения.

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

Для адаптивного заголовка используйте clamp(). Функция принимает минимум, желаемое значение и максимум:

.article-title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.article-text {
  font-size: 1.125rem;
}

Заголовок увеличивается вместе с шириной окна в пределах указанных границ. При корневом размере 16px границы составят 28px и 48px. При изменении ширины окна размер заголовка должен плавно меняться.

Не задавайте основной текст только через vw. На узком экране он может стать слишком мелким. Сочетание rem и vw в clamp() помогает ограничить размер. Дополнительно проверьте увеличение страницы средствами браузера.

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

Свойство line-height задает высоту строки. Начните с числа без единиц, например 1.6 для абзацев.

.article-text {
  font-size: 1.125rem;
  line-height: 1.6;
}

.article-title {
  line-height: 1.15;
}

Число 1.6 означает множитель относительно размера шрифта элемента. При размере 20px высота строки составит 32px. Дочерние элементы наследуют множитель и применяют его к собственному размеру.

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

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

Отступ текста в CSS

Свойство text-indent задает отступ только первой строки абзаца.

.indented {
  max-width: 36rem;
  text-indent: 2em;
}

<p class="indented">Первая строка этого абзаца начинается с отступа.
Добавьте достаточно текста, чтобы абзац занял несколько строк:
тогда разница между первой строкой и остальными станет заметной.</p>

Значение 2em здесь зависит от размера шрифта самого абзаца. Если нужно сдвинуть весь текст внутри блока, используйте padding-inline-start. Для расстояния между соседними абзацами подходит margin-block.

Жирный и наклонный текст в CSS

Свойство font-weight задает насыщенность шрифта. Наклон регулирует отдельное свойство font-style.

Число запрашивает насыщенность, но не создает недостающее начертание. Если точного варианта нет, браузер подбирает доступный по правилам CSS. Иногда браузер синтезирует жирность. Вариативный шрифт может поддерживать диапазон насыщенности вместо отдельных файлов.

.fragment-bold {
  font-weight: 700;
}

.fragment-italic {
  font-style: italic;
}

.fragment-oblique {
  font-style: oblique;
}

<p>Здесь <span class="fragment-bold">жирный фрагмент</span>,
а здесь <span class="fragment-italic">курсивный фрагмент</span>.</p>

Используйте <strong>, если фрагмент передает особую важность. Используйте <em> для смыслового ударения. Класс на <span> подходит для чисто визуального выделения.

Тень текста в CSS

CSS-свойство text-shadow позволяет задать тексту тень. Удобный порядок записи: горизонтальное смещение, вертикальное смещение, размытие, цвет.

.shadow-title {
  text-shadow: 2px 3px 4px rgb(0 0 0 / 25%);
}

.double-shadow {
  text-shadow:
    -2px -2px 0 #fff,
    2px 2px 4px rgb(0 0 0 / 30%);
}

В первом примере тень смещается вправо на 2px и вниз на 3px. Значение 4px задает радиус размытия. Отрицательные смещения направляют тень влево и вверх.

Несколько теней разделяйте запятыми; первая располагается поверх следующих. Радиус размытия можно опустить, тогда тень останется резкой. В том случае, если цвет тени не задан, используется цвет текста.

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

Чтобы убрать эффект, задайте text-shadow: none.

Выравнивание текста в CSS

Свойство text-align выравнивает строчное содержимое внутри блока. Оно не перемещает сам блок по странице.

.article-text {
  text-align: start;
}

.caption {
  text-align: center;
}

Для русского текста start соответствует левому краю. Такое выравнивание сохраняет одинаковые пробелы между словами на узком экране. Выравнивание justify на узкой колонке может создавать большие промежутки между словами.

Свойство vertical-align работает со строчными элементами и ячейками таблиц. Обычный блочный контейнер оно по вертикали не центрирует.

.inline-mark {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  background-color: #7722aa;
  vertical-align: middle;
}

<p><span class="inline-mark" aria-hidden="true"></span> Текст рядом с меткой</p>

Значение middle совмещает середину метки с базовой линией родителя плюс половина высоты строчной буквы x. Поэтому это не точное центрирование относительно всей строки.

У строчных элементов baseline выравнивает базовые линии. Значения top и bottom ориентируются на верх и низ строки. Значения text-top и text-bottom ориентируются на границы шрифта родителя. Значения sub и super опускают или поднимают базовую линию.

В ячейке таблицы vertical-align: middle размещает содержимое посередине высоты ячейки. Для центрирования содержимого обычного контейнера используйте Flexbox:

.centered-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
}

Интервалы, переносы и обрезка текста

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

Для однострочного многоточия сочетайте три свойства и ограниченную ширину:

.short-label {
  max-width: 18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Если текст не помещается в блок, браузер покажет многоточие. Одного свойства text-overflow со значением ellipsis для этого недостаточно. Не скрывайте таким способом основной текст статьи.

Для автоматических переносов укажите язык текста в HTML:

<p class="hyphenated" lang="ru">Длинный абзац с автоматическими переносами слов.</p>

.hyphenated {
  hyphens: auto;
}

.long-address {
  overflow-wrap: anywhere;
}

Автоматические переносы слов зависят от языкового словаря браузера. Свойство overflow-wrap: anywhere помогает вместить длинный адрес даже без подходящих точек переноса. Различия пробелов и переносов описывает справочник MDN по white-space.

Готовые правила для основного текста

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

1. Создайте файл text-demo.html в текстовом редакторе.
2. Вставьте код целиком и сохраните файл в кодировке UTF-8.
3. Откройте файл в браузере. Вы увидите заголовок, два абзаца и подчеркнутую ссылку.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Оформление текста в CSS</title>
  <style>
    body {
      margin: 0;
      padding: 1rem;
      font-family: Arial, "Helvetica Neue", sans-serif;
      font-size: 1.125rem;
      line-height: 1.6;
      color: #222;
      background-color: #fff;
    }

    .article {
      max-width: 65ch;
      margin-inline: auto;
      overflow-wrap: anywhere;
    }

    .article h2 {
      margin-block: 0 1rem;
      font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
      line-height: 1.15;
      text-align: start;
    }

    .article p {
      margin-block: 0 1em;
    }

    .article a {
      color: #0645ad;
      text-decoration: underline;
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.18em;
    }

    .article a:hover,
    .article a:focus-visible {
      text-decoration-thickness: 0.14em;
    }
  </style>
</head>
<body>
  <main class="article">
    <h2>Текст, который удобно читать</h2>
    <p>Основной текст получает общий шрифт, цвет и межстрочный интервал.
      <strong>Важный фрагмент</strong> выделен жирным начертанием.</p>
    <p>Размер заголовка зависит от ширины окна.
      <em>Смысловое ударение</em> выделено курсивом.
      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Справочник CSS</a>
      сохраняет подчеркивание.</p>
  </main>
</body>
</html>

Величина 65ch ограничивает ширину колонки относительно ширины символа «0». Она не гарантирует ровно 65 букв в каждой строке.

Уменьшите ширину окна, затем увеличьте масштаб страницы. Абзацы должны переноситься без горизонтальной прокрутки, заголовок – оставаться читаемым. Для проверки отдельных свойств добавляйте CSS-правила из примеров внутрь <style>, а HTML-фрагменты – внутрь <main>.

Перед переносом правил на существующий сайт сохраните копию его CSS. Если оформление ухудшится, восстановите копию и обновите страницу.

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