Как правильно определяют значение «em» в макете?

Question

[Senseich]

Всем привет! Сегодня задался таким вопросом, т.к. до этого использовал везде font-size в пикселях. Вот на примере чужой верстки и макета к нему смотрю у body: 14px , а у элемента следующего, назовём его next_element: 1.2 em.
Ок, я посмотрел в макет, у этого элемента next_element: 18px .
Суть вопроса в чём, как эти размеры em определяют? На глаз? )
Я поделил 18px / 14px , получилось 1,285714285714286
Получается округлили в меньшую сторону. Что же это и делить каждое значение друг на друга (математика пошла) или я не правильно рассуждаю?

Answer 1

[Игорь Воротнёв]

Если я еще не совсем забыл фронтенд, то считаются от размера текста конкретного элемента. Стандартный размер шрифта в body по умолчанию во всех браузерах сейчас вроде 16px, если его не переопределять для элементов, то inherit означает что 1em = 16px. Если размер переопределен на 14px, значит 1em = 14px. Ну и еще вроде использовалось правило html { font-size:100%; }, чтобы это точно работало как надо.

Впрочем, если вопрос не только в CSS, то все интереснее. Дело в том, что изначально термин "em" означал ширину заглавной буквы М. Соответственно, в разных шрифтах, в зависимости от дизайна этой буквы, значение будет разным. Далее, Adobe утверждает, что em = размер шрифта в pt, а не в px. А спека W3C говорит следующее:

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement.

Поскольку мы говорим о CSS, то отталкиваемся от W3C.

Немного чтива:

https://en.wikipedia.org/wiki/Em_(typography)
v1.jontangerine.com/log/2007/09/the-incredible-em-...

И калькулятор в придачу:

pxtoem.com