Задание размера шрифта в процентах - ещё один способ выразить относительный размер в CSS, тесно связанный с единицей em. Калькулятор выше помогает перевести значение из пикселей в проценты относительно выбранного базового размера шрифта.
Формула перевода px в проценты
Расчёт похож на перевод в rem, но результат дополнительно умножается на 100, чтобы выразить его в процентах:
Проценты = (px ÷ Базовый размер шрифта) × 100%
По сути, это то же самое значение, что и в rem или em, просто представленное в другой, эквивалентной форме записи.
Пример: перевод стандартного размера текста
Основной текст сайта задан размером 18px при стандартном базовом размере шрифта 16px.
Проценты: (18 ÷ 16) × 100% = 112,5%.
Пример: настройка корневого элемента для упрощения расчётов
Многие разработчики задают корневому элементу html размер шрифта 62,5% от стандартных 16px браузера.
Итоговый базовый размер: 16 × 0,625 = 10px.
После такой настройки перевод rem в px в уме заметно упрощается - каждый 0,1rem соответствует ровно 1px, что удобно для быстрой прикидки размеров без калькулятора.
Практическая польза от базового размера в 10px
Настройка корневого размера шрифта на 62,5% (то есть 10px вместо стандартных 16px) - популярный приём именно потому, что упрощает арифметику для всех последующих значений в rem по всему сайту. Вместо необходимости делить или умножать на 16 при каждом переводе между px и rem, разработчик может просто сдвинуть десятичную точку - 2,4rem сразу соответствует 24px, а 0,8rem - 8px. Стоит помнить, что такая настройка меняет базовый размер именно для rem-значений, но не влияет напрямую на em-значения, которые по-прежнему считаются относительно конкретного родительского элемента, а не глобального корня страницы.
Пример: перевод крупного заголовка в проценты
Заголовок на странице имеет размер 40px при стандартном базовом размере шрифта браузера 16px.
Проценты: (40 ÷ 16) × 100% = 250%.
Такое значение эквивалентно 2,5em или 2,5rem при том же базовом размере - все три способа записи (проценты, em, rem) описывают одно и то же относительное соотношение, просто в разных, привычных для разных контекстов единицах измерения.
Совместимость процентного размера шрифта со старыми браузерами
Одно из исторических преимуществ задания размера шрифта в процентах - широкая поддержка даже в очень старых версиях браузеров, где более новые единицы вроде rem могли поддерживаться не полностью. Сегодня эта причина практически потеряла значение, поскольку современные браузеры давно и стабильно поддерживают rem, но исторически сложившаяся практика использования процентов для базового размера корневого элемента сохранилась во многих проектах как унаследованный от более ранних лет подход, который продолжает работать корректно и сейчас.
Проценты для других CSS-свойств, помимо шрифта
Помимо размера шрифта, проценты широко применяются и для многих других CSS-свойств - ширины и высоты блоков относительно родительского контейнера, отступов, позиционирования элементов. Принцип во всех этих случаях схож - процентное значение всегда высчитывается относительно соответствующего свойства родительского или иного опорного элемента, а не является абсолютной величиной. Понимание этого общего принципа помогает быстрее ориентироваться в самых разных сценариях использования процентов в CSS, далеко за пределами типографики страницы.