Клавиша / esc

font-weight

Как изменить толщину букв в тексте?

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство font-weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

Примеры

Скопировано

Ключевые слова:

        
          
          div {  font-weight: normal;  font-weight: bold;}
          div {
  font-weight: normal;
  font-weight: bold;
}

        
        
          
        
      

Значения относительно родительского элемента:

        
          
          div {  font-weight: lighter;  font-weight: bolder;}
          div {
  font-weight: lighter;
  font-weight: bolder;
}

        
        
          
        
      

Значения в цифрах:

        
          
          div {  font-weight: 100;  font-weight: 200;  font-weight: 300;  font-weight: 400;  font-weight: 500;  font-weight: 600;  font-weight: 700;  font-weight: 800;  font-weight: 900;}
          div {
  font-weight: 100;
  font-weight: 200;
  font-weight: 300;
  font-weight: 400;
  font-weight: 500;
  font-weight: 600;
  font-weight: 700;
  font-weight: 800;
  font-weight: 900;
}

        
        
          
        
      

Как понять

Скопировано

Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold. Их в основном и используют.

Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.

Как пишется

Скопировано

Толщину текста можно задать с помощью ключевых слов или числовым значением:

  • normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
  • bold — жирный набор текста. Соответствует 700.
  • lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
  • bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
  • 100, 200, 300, 400, 500, 600, 700, 800, 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.

Подсказки

Скопировано

💡 Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal, а от 600 до 900 — жирный шрифт bold.

Ещё примеры

Скопировано

Попробуем задать насыщенность сразу разными способами к разным элементам кода:

        
          
          <body>  <h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold.  В цифровом значении он равен 700 единицам.</h1>  <p> Это текст стандартной толщины внутри контейнера <p>.  Он эквивалентен 400 единицам толщины.</p>  <div>    Это текст внутри контейнера <div> — и он чуть толще, чем стандартный normal,    но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.<br>    <span>В контейнере <span> шрифт тоньше, чем в <div>, внутри которого он находится.    Его мы задали с помощью значения lighter.</span>  </div></body>
          <body>
  <h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold.
  В цифровом значении он равен 700 единицам.</h1>

  <p> Это текст стандартной толщины внутри контейнера <p>.
  Он эквивалентен 400 единицам толщины.</p>

  <div>
    Это текст внутри контейнера <div> — и он чуть толще, чем стандартный normal,
    но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.<br>
    <span>В контейнере <span> шрифт тоньше, чем в <div>, внутри которого он находится.
    Его мы задали с помощью значения lighter.</span>
  </div>
</body>

        
        
          
        
      
        
          
          body {  font-family: "Roboto", sans-serif;}/* Зададим толщину заголовка с помощью слова bold. */h1 {  font-weight: bold;}/* Обычный текст в абзаце <p> сделаем стандартным normal */p {  font-weight: normal;}/* В контейнере <div> текст будет средним по жирности между normal и bold */div {  font-weight: 500;}/* В элементе <span> текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span {  font-weight: lighter;}
          body {
  font-family: "Roboto", sans-serif;
}

/* Зададим толщину заголовка с помощью слова bold. */
h1 {
  font-weight: bold;
}

/* Обычный текст в абзаце <p> сделаем стандартным normal */
p {
  font-weight: normal;
}

/* В контейнере <div> текст будет средним по жирности между normal и bold */
div {
  font-weight: 500;
}

/* В элементе <span> текст будет на один уровень меньше по жирности,
чем у родительского элемента, внутри которого он находится */
span {
  font-weight: lighter;
}

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Скопировано

Денис Русаков советует

Скопировано

🛠 У каждого значения насыщенности есть своё название, принятое в типографике.

Распространённые названия насыщенности
  • 100 — тонкое начертание (thin, hairline);
  • 200 — сверхсветлое (extra light, ultra light);
  • 300 — светлое (light);
  • 400 — нормальное (normal, regular, book);
  • 500 — среднее (medium);
  • 600 — полужирное (semi bold, demi bold);
  • 700 — жирное (bold);
  • 800 — сверхжирное (extra bold, ultra bold);
  • 900 — тяжёлое (black, heavy).

В большинстве графических редакторов насыщенность шрифта для блока с текстом указана в цифрах, поэтому удобнее использовать в коде цифровое значение.

Чтобы использовать все 9 начертаний (100–900), шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в подключаемом шрифте и поэтому надёжнее использовать то значение font-weight, которое вы указали в директиве font-face.

Например, у всеми известного шрифта Roboto, нет насыщенности шрифта равной 800, поэтому при выборе данного значения браузер будет показывать 900, как ближайшее корректное значение.

Алёна Батицкая советует

Скопировано

🛠 Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font-weight.

🛠 Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.