Глобально задаем размер шрифта для body

Question

[Michael]

Доброго вечера, Хабр.

Не так давно я, просматривая для верстку проектов ведущих студий, наших и зарубежных, отметил одну закономерность: используются разные способы глобальной установки размера шрифта для всего сайта — соответственно, разные способы изменения шрифта для отдельного элемента относительно глобального значения. Это и пошатнуло мою непоколебимую веру в то, как все-таки делать правильно.

Собственно, вариантов набралось как минимум 4, однако, если с первыми все давно ясно, то сомнения возникли касательно следующих:

body {font-size: 100%;}
.element {font-size: 0.625em;}

(возможен со значением 100.01%, не суть).

и

body {font-size: 62.5%;}
.element {font-size: 1em;}

Собственно, вопрос:
Какие проблемы мы можем получить, пользуясь способом номер 2?

Comments

[Илья Плотников]

Вообще .body — это класс в данном случае.

Answer 1

[Softlink]

Явных проблем нет никаких. Это нормальная практика. Стоит понимать, что в указанных вариантах используются масштабируемые единицы измерения. Может быть это обусловлено адпативной версткой, может специфическими размерами шрифтов и вертикального ритма в макетах. Единственное, что надо запомнить, что в таких ситуациях размер шрифта высчитывается исходя из размера шрифта родителя. Т.е. если вы вдруг поставили блоку font-size: 0; то размер шрифта потомка будет точно таким же.

Answer 2

[egorinsk]

100.01% — это хак для какой-то из древних (реально древних) версий Оперы. Те кто его применяют — тупые копипастеры, которые не понимают, что они делают. Сейчас во всех браузерах (включая ИЕ6) 100% — это дефолтный размер шрифта (т.е. 16px). И указывать font-size 100% особого смысла нет.

По поводу процентов. Проценты позволяют увеличивать шрифт средствами браузера. По крайней мере, так предполагалось при разработке стандарта CSS. Однако в реальности, кроме ИЕ6, во всех остальных браузерах применяется свой алгоритм увеличения страницы, и даже если размер шрифта указан в пикселах, они все равно будут его масштабировать. Т. обр. указывать размер шрифта в % имеет смысл либо ради ИЕ6, либо из чувства перфекционизма.

Особенно важно, если у вас к примеру есть кнопка, и она сделана картинками, и ее размер фиксирован в px, странно для такой кнопки указывать шрифт в em или %. Т.е. там, где есть жесткая привязка к пикселам, для шрифта должны указываться именно они.

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

Я лично дефолтный шрифт страницы определяю на элементе html.

Comments

[Michael]

я понимаю о чем вы, и в курсе про 100.01%, однако вопрос несколько в ином, посмотрите, пожалуиста еще раз.

[Michael]

а, вы про % отвечали :)

[Michael]

не мне*

Answer 3

[SergeiStartsev]

Как минимум проблемы с тем, что можно банально запутаться. Считать размеры относительно 100% гораздо понятнее, чем от 62.5%, да и цифру эту еще запомнить надо, забыть гораздо легче.

Comments

[Makito]

в таком случае 0.625 запомнить еще сложнее :)

[Сергей Протько]

16 * 0.625 = 10. А уже остальные числа подбирать из расчета размер_нужный_тебе/10. Быть может я не прав.

Answer 4

[ngreduce]

Для полноты ощущений: чем отличаются

... {font-size: 100%;}

... {font-size: 100.01%;}

Answer 5

[iminby]

body {font-size: 62.5%;}
.element {font-size: 1em;}

Это англ мужик там какой-то предложил.
смысл в том, если привык ставить пиксели, но хочешь использовать em, чтобы текст мог адаптироваться по барабану на браузеры и так далее...
то 62.5% от 16px по умолчанию в большинстве браузеров = 10px.

Таким образом если в пикселях в уме у тебя боди 10px, а 1em тогда тоже равен 10px.
Тогда удобно выставлять em считать.

Например, h1 2.6em будет у тебя 26px в уме.

Главное вложенность следить, чуть что, можешь использовать rem.