Font size что это

Свойства font-size и line-height

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

font-size и line-height

• font-size – размер шрифта, в частности, определяющий высоту букв.
• line-height – высота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

 body 
Ёрш р
 
Ёрш Ё

Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p , g . Как видно из примера выше, при размере строки, равном font-size , строка не будет размером точно «под букву».

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

Обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal .

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 — 1.25 , но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).

Множитель для line-height

Значение line-height можно указать при помощи px или em , но гораздо лучше – задать его числом.

Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2) .

Однако, между множителем и точным значением есть одна существенная разница.

• Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
• Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

 
стандартная строка 
шрифт в 2 раза больше 
шрифт в 2 раза больше
 

Свойство font-size

Свойство font-size устанавливает размер шрифта текста. Значением свойства служат любые единицы для размеров (как правило, это px , em или rem ) либо специальные ключевые слова (используются крайне редко).

Синтаксис

Значения в виде ключевых слов

Значение	Описание
xx-small	Самый самый маленький. Пример: Lorem ipsum dolor sit amet .
x-small	Самый маленький. Пример: Lorem ipsum dolor sit amet .
small	Маленький. Пример: Lorem ipsum dolor sit amet .
medium	Средний. Пример: Lorem ipsum dolor sit amet .
large	Большой. Пример: Lorem ipsum dolor sit amet .
x-large	Очень большой. Пример: Lorem ipsum dolor sit amet .
xx-large	Самый большой. Пример: Lorem ipsum dolor sit amet .
larger	Больше шрифта родителя на некоторое значение.
smaller	Меньше шрифта родителя на некоторое значение.

Значение по умолчанию: medium .

Пример

Давайте установим абзацам размер шрифта в 20px :

Lorem ipsum dolor sit amet.

p < font-size: 20px; >

Пример

В данном примере для абзаца задан размер в 16px , а для span внутри него — 150% . В этом случае размер шрифта для span будет составлять 150% от своего родителя, то есть абзаца, и его реальный размер будет 16px * 150% = 24px :

Пример

В данном примере для абзаца задан размер в 16px , а для span внутри него — 150% . В этом случае размер шрифта для span будет составлять 150% от своего родителя, то есть абзаца, и его реальный размер будет 16px * 150% = 24px :

Пример

В данном примере для абзаца задан размер в 16px , а для span внутри него — larger . В этом случае размер шрифта для span будет больше, чем у его родителя (абзаца):

Пример

Обратите внимание на то, что шрифты с разным font-family и одинаковым font-size визуально могут быть совсем не одного размера (для решения данной проблемы смотрите свойство font-size-adjust ).

В примере ниже обоим абзацам задан font-size в 16px , но разные font-family :

font — size

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

   Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,  а этот текст в 1.5 раза больше, чем в родительском контейнере.   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 пикселям. Что крайне удобно для расчётов.

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

Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта будет 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>    Скопировать Скопировано Не удалось скопировать   

Размер 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; >    Скопировать Скопировано Не удалось скопировать   

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

 h1  font-size: 250%;> h1  font-size: 250%; >    Скопировать Скопировано Не удалось скопировать   

Размер текста внутри тега будет равен 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, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.

Свойство font-size, размер шрифта

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

Самый главный «текстовый» параметр, которым можно управлять — это шрифт. Какой именно задан шрифт, какого он размера, начертания и насыщенности — разберём эти свойства по порядку.

Размером шрифта управляет свойство font-size . Значение свойства задаёт желаемую высоту символа шрифта. Причём единицы измерения могут быть абсолютными или относительными. Мы уже рассматривали единицы измерения в одном из заданий прошлой части, при работе с размерами шрифта они также актуальны.

Самая часто используемая единица измерения размера шрифта — пиксели px :

На самом деле абсолютную величину размера шрифта можно задавать не только в пикселях, пунктах и других величинах, но и особыми «шрифтовыми» ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . На практике этими единицами измерения пользуются редко. Подробно об этих ключевых словах можно узнать в спецификации.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим