font-size

Используй это свойство, чтобы задать размер текста.

Размер шрифта в абзаце будет равен 14 пикселям:

        
          
          p {  font-size: 14px;}
          p {
  font-size: 14px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Вот какие значения можно задать:

• em — относительная единица, которая определяется по родительскому элементу. 1em — это стандартный размер текста, который установлен в браузере. Обычно он равен 16px. Соответственно, 2em будут равны 32px, а 0.5em — 8px. Если задаёшь font-size внутри другого элемента, то em будет рассчитан относительно этого элемента.
• rem — работает похожим образом, что em, но в этом случае размер шрифта зависит не от родительского элемента, а от корневого html элемента. Другими словами, так можно не зависеть от размера родительского элемента.
• % — значение в процентах, например 80%. Работает похожим образом, что и единица em. За 100% берётся размер текста в родительском элементе. Значение может быть только положительным.
• px — можно задать значение в пикселях, когда важно, чтобы шрифт всегда был одного конкретного размера, вне зависимости от браузера и настроек устройства. Это не всегда лучший вариант, потому что, например, пользователи, которые плохо видят и используют крупные шрифты, не смогут увеличить текст в своём браузере.
• xx-small, x-small, small, medium, large, x-large, xx-large — абсолютные значения, которые зависят от настроек браузера и операционной системы. Обычно не используют.
• larger, smaller — больший или меньший размер шрифта относительно родительского элемента. Обычно не используют.

Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.

        
          
          <div class="parent">  Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,  <span class="child">    а этот текст в 1.5 раза больше, чем в родительском контейнере.  </span></div>
          <div class="parent">
  Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,
  <span class="child">
    а этот текст в 1.5 раза больше, чем в родительском контейнере.
  </span>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .parent {  font-size: 1.5em;}.child {  font-size: 1.5em;}
          .parent {
  font-size: 1.5em;
}

.child {
  font-size: 1.5em;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А вот как сочетается значение em, когда родительский элемент задан в процентах.

Очень часто можно встретить ситуацию, когда размер шрифта у html равен 62.5%. Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.

        
          
          <div>  <span>    Здесь основной текст такой же, как в стандартных настройках браузера,    <span>а эта фраза в 1.6 раз больше, чем основной текст</span>.  </span></div>
          <div>
  <span>
    Здесь основной текст такой же, как в стандартных настройках браузера,
    <span>а эта фраза в 1.6 раз больше, чем основной текст</span>.
  </span>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта <span> будет 10 * 1.6 = 16px:

        
          
          html {  font-size: 62.5%;}span {  font-size: 1.6em;}
          html {
  font-size: 62.5%;
}

span {
  font-size: 1.6em;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Пример, где размер шрифта не зависит от родительского элемента, потому что мы задали его в rem.

        
          
          <span>  Теперь один контейнер находится <span>внутри другого</span>, но относительный  размер текста больше не зависит от родительского элемента.</span>
          <span>
  Теперь один контейнер находится <span>внутри другого</span>, но относительный
  размер текста больше не зависит от родительского элемента.
</span>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Размер 1em равен 16px, как в стандартных настройках браузера:

        
          
          html {  font-size: 100%;}span {  font-size: 2rem;}
          html {
  font-size: 100%;
}

span {
  font-size: 2rem;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

И ещё три примера, как можно задать размер шрифта.

Текст параграфа будет очень большим:

        
          
          p {  font-size: xx-large;}
          p {
  font-size: xx-large;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Заголовок <h1> будет в 2.5 раза больше, чем текст вокруг него:

        
          
          h1 {  font-size: 250%;}
          h1 {
  font-size: 250%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Размер текста внутри тега <span> будет равен 16px, независимо ни от чего:

        
          
          span {  font-size: 16px;}
          span {
  font-size: 16px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Если не задать никакое значение font-size, то браузер использует размер по умолчанию. Обычно это 16px.

💡 У font-size не бывает отрицательных значений.

💡 Размер шрифта наследуется.

На практике

Скопировать ссылку "На практике" Скопировано

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

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Для использования относительных единиц измерения — em, rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что вы запутаетесь в вычислениях.

🛠 Если в вёрстке используются строчно-блочные (inline-block) элементы, то не забывай задавать родителю свойство font-size со значением 0.

Между строчно-блочными (inline-block) элементами, как и между словами в тексте, есть небольшие отступы — пробелы. Устанавливайте размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.

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

Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.

+ Развернуть