Чему равен font-size?

16 мая, 2017
Если задать font-size: 16px, то шрифт на экране не станет равным 16px. Ни заглавные буквы, ни строчные, ни даже пресловутая буква «х»! И ничего из того, что мы можем померить, не станет равным 16px. Мифическое свойство какое-то.

Что оно на самом деле меняет?

А на самом деле font-size определяет высоту рабочего квадрата, в который вписана каждая буква. Увидеть его можно только в каком-нибудь редакторе шрифтов: FontForge, например. Там он измеряется в условных единицах, а в вёрстке принимает значение, равное заданному font-size. Для каждого шрифта этот квадрат имеет свои параметры, и именно поэтому разные гарнитуры при равном размере выглядят кто крупнее, кто мельче. Там же, в метриках шрифта, заданы размеры заглавных и строчных букв, то есть для нас они станут прямой пропорцией от 16px.

Следующий вопрос: чему при этом равно line-height, которое по умолчанию, вообще-то, normal? Высота строки для каждого шрифта тоже индивидуальна и равна сумме выносных элементов плюс межстрочный зазор (и ещё плюс округление браузера, ведь он не станет работать с половинками пикселей). Величины всех этих метрик заданы в параметрах шрифта и повлиять на них из вёрстки мы никак не можем! И ещё одно: высота строки измеряется не от базовых линий (нижней границы букв). Если подумать, это весьма логичный вывод из всего вышесказанного.

И самое последнее, что важно понимать: мерить в макете какие-либо размеры от границ букв — плохая идея.