Насыщенность

Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное (рис. 1).

Разная насыщенность шрифта

Рис. 1. Разная насыщенность шрифта

Браузер не всегда может адекватно показать требуемую насыщенность шрифта, это зависит от размеров текста и вида шрифта.

Насыщенность шрифта управляется элементами <b>, <strong> или, более гибкий вариант, через свойство font-weight. Оно определяет насыщенность с помощью ключевых слов: bold — полужирное, bolder — жирное, lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900 с шагом 100. Сверхсветлое начертание шрифта, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно значению 400, стандартный полужирный текст — 700.

Поскольку свойство font-weight предоставляет больше возможностей по управлению жирным начертанием текста, то можно переназначить свойства элемента <b> через стили (пример 1).

Пример 1. Насыщенность шрифта

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Жирный текст</title>
  <style>
   b {
    color: #000080; /* Тёмно-синий цвет текста */
    font-weight: 900; /* Сверхжирная насыщенность */
   }
  </style>
 </head>
 <body>
  <p><b>Жирный текст</b></p>
  <p>Обычный текст</p>
 </body>
</html>

В примере показано изменение параметров элемента <b>, в частности текст будет тёмно-синего цвета и максимальной насыщенности.

Как и в случае с <i> и <em>, элементы <b> и <strong> дают одинаковый результат в браузере, но по своей задумке различаются. Элемент <b> (от англ. bold — жирный) предназначен для жирного начертания, а <strong> (англ. сильный) — для важного акцентирования текста.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid