Относительный размер шрифта

Лекция про font-size

Абсолютные величины применительно к размеру шрифта — это простое, но не совсем гибкое решение и применяется для самых простых случаев. К примеру, для всего документа задан размер шрифта:

body { 
    font-size: 16px; 
}

                        

Заголовку на странице мы зададим другое фиксированное значение размера шрифта:

h1 { 
    font-size: 32px; 
}

                        

Пока что всё хорошо. Но представьте, что теперь появляется требование: на больших экранах мониторов увеличить размер шрифта документа с 16px до 20px. Если поменять размер у body, то у «наследников» размер тоже изменится. Но у заголовка размер никак не поменяется, он будет фиксированным — 32px.

Хочется сделать так, чтобы при изменении основного размера шрифта для родителя (в нашем случае это body), его дочерние элементы пропорционально меняли свои размеры шрифта. И для этого случая есть специальная единица измерения — em.

Величина 1em — это такой же размер шрифта, что и у родителя. Соответственно, если мы хотим, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то зададим значение 2em:

h1 { 
    font-size: 2em; 
}

                        

Такой подход к написанию стилей позволяет сделать код более гибким.