Как правильно использовать в html единицу измерения em?

Question

[Кирилл]

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

В самом верху главного CSS-файла у меня прописывается значение font-size по-умолчанию:

html {
    font-size: 1em;
}

Теперь я хочу, чтобы чуть ниже на web-страничке у меня было слово размером в 12px. Но как задать размер в em? Как использовать при стилизации только единицу измерения em?

Поделитесь, пожалуйста, практикой. Вот, решили вы создать сайт. Решили правильно задать размеры шрифтов и т.д. Что и где вы прописали? Спасибо !

Answer 1

[Ivan Bogachev]

Вы задаете :root значение размера шрифта (кстати познакомьтесь с вот этой идеей - сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно - это как масло масляное.

1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.

1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.

---

Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях - вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.

Comments

[Кирилл]

Спасибо большое!

Answer 2

[Сергей Горячев]

За единицу (1em) берется 16 пикселей.
Чтобы указать размер в 12 пикселей, нужно соответственно, указать .75em.
Но нужно учитывать всех родителей последнего блока.
Вообще тут уже подробно разжевали.

Answer 3

[Yustas Alexu]

Это:

html {
    font-size: 1em;
}

Нужно заменить на это:

html {
    font-size: 12px;
}

Дальше везде писать 1em, когда нужно 12px и больше 1em, когда нужно больше 12px.