Куда прописывать font-size, если будет использоваться rem?

Question

[htmlclassic]

Допустим, что шрифт документа 24px. Для других элементов я хочу задать шрифт относительно этих 24px.
По классике или как там ещё писали бест практис, как я понял, фонт сайз и тп прописывается в body.

В моем случае, чтобы работал rem, придется font-size: 24px прописывать в html.
Это ок или нет?

Comments

[Сергей delphinpro]

По классике или как там ещё писали бест практис, как я понял, фонт сайз и тп прописывается в body.

Где такое написано? Всю дорогу инициирую базовый размер в html теге.

[htmlclassic]

Сергей delphinpro, на стак оверфлоу ответы читал, название темы не помню

[htmlclassic]

Сергей delphinpro, а сам шрифт и тп тоже прописывать в хтмл?

[Сергей delphinpro]

htmlclassic, И семейство шрифта для основного использования тоже. Если несколько шрифтов, то там уже для отдельных элементов указывается.

Answer 1

[Pavel-ww]

html, body {
 font-size: 24px;
}

Comments

[htmlclassic]

а зачем дублировать для body?

[Сергей delphinpro]

htmlclassic, по умолчанию для body user agent не задает свойство font-size. Так как свойство наследуемое, то оно примет значение inherit.
Поэтому достаточно просто указать размер шрифта для корневого элемента (:root или html)

[Антон Литвиненко]

Для боди напишите 1rem

[htmlclassic]

Антон Литвиненко, зачем?

[Антон Литвиненко]

htmlclassic, от боди наследуются все размеры шрифтов, если они будут заданы в рем относительно 1рем, который у боди. Тогда достаточно будет при необходимости поменять у html размер в пикселях и все шрифты поменяют размер. Например при разрешении экрана выше 1920 или ниже скажем 768. Это же основы

[Pavel-ww]

htmlclassic, вообще для управления размером шрифта используются em. Rem это компенсатор em. Rem зависит от размера шрифта html. Em от размера шрифта body. При создании адаптивных элементов, для размера шрифта, паддингов, бордер радиусов, теней используются em. Значение em переопределяется внутри элемента. Например если для элемента вы пропишете font-size: 1.5em; padding: 1em. То реальный padding будет равен не 24px как вы прописали в body, а будет рассчитываться из размера шрифта элемента - 1em*1.5 em = 36px. А rem используются в случаях когда нужен статичный размер, например для боковых паддингов когда надо выровнять отступ в блоках текста с разным размером шрифтов. Rem не переопределяется внутри элемента.

То есть надо понимать что rem и em единицы служат не только для управления размером шрифта как таковым, а для создания адаптивных медиа. В которых все размеры зависят от размера шрифта. Такой подход позволяет сильно сократить количество кода в точках остановки и получить более пропорциональный внешний вид элемента. Вместо изменения кучи свойств в точке остановки, в объекте достаточно изменить font-size и все его размеры пропорционально изменятся

Answer 2

[asmodeus13th]

html {
  font-size: [значение в px];
}

Comments

[Сергей delphinpro]

Нет.

html {
  font-size: [значение в %];
}

при этом по умолчанию считаем, что 100% == 16px
Т.е. в случае автора

html {
  font-size: 150%;
}

[htmlclassic]

Сергей delphinpro, а почему фонт сайз в процентах?

[Сергей delphinpro]

htmlclassic, Потому что относительные абсолютные размеры фиксированы. И в результате не работает настройка браузера "Размер шрифта".
Многие сайты этим грешат, даже Хабр.
Вот у меня выставлен в браузере крупный шрифт (я плохо вижу). А Хабру пофиг на это. Он все равно отображает текст шрифтом 15. Приходится масштабировать, а это уже совсем другое поведение.
Причем здесь на хабре для html шрифт не задан (100% по дефолту) и в инспекторе видно, что базовый размер в моем случае увеличился до 20px, но для body какого-то черта прописан абсолютный размер в 15 пикселей.

[htmlclassic]

Сергей delphinpro, потыкал эту настройку в хроме (впервые), в ютубе не работает, гугл поиске тоже, в яндекс поиске только сверху шрифт увеличился.

спасибо за информацию!

[htmlclassic]

Сергей delphinpro, еще вопрос, а везде дефолт размер шрифта 16пкс? что если я напишу 150% и получу не то, что надо?

ну, например, везде будет одинаково 16*1.5 = 24пкс, а в каком-нибудь одном браузере по дефолту будет шрифт больше/меньше?

[Сергей delphinpro]

htmlclassic, Во всех мне известных 100% == 16px
В каких-то редких китайских – хз.