Размер шрифта в CSS можно задавать разными способами, используя абсолютные и относительные единицы измерения. Выбор правильного способа влияет на удобочитаемость текста, адаптивность и доступность сайта.

1. Способы задания размера шрифта в CSS

Абсолютные единицы измерения

Абсолютные единицы фиксированы и не зависят от родительского элемента или масштаба страницы.

Единица	Описание	Соответствие пикселям
`px`	Пиксели, фиксированный размер	Зависит от разрешения экрана
`pt`	Пункты (используется в печати)	1 pt = 1/72 дюйма
`cm`	Сантиметры	1 cm ≈ 37.8 px
`mm`	Миллиметры	1 mm ≈ 3.78 px
`in`	Дюймы	1 in = 2.54 cm = 96 px

Пример использования пикселей (px):

p {
    font-size: 16px; /* Размер шрифта 16 пикселей */
}

Минус пикселей – они не масштабируются при изменении размера шрифта браузера.

Относительные единицы измерения

Относительные единицы зависят от родительского элемента или настроек браузера.

Единица	Описание	Зависимость
`em`	Относительно родительского шрифта	1em = 100% от родителя
`rem`	Относительно корневого `html`	1rem = 100% от `html`
`%`	Процент от родителя	100% = 1em
`vw`	Процент от ширины экрана	1vw = 1% от `viewport width`
`vh`	Процент от высоты экрана	1vh = 1% от `viewport height`

Пример использования em и rem:

html {
    font-size: 16px; /* Базовый размер */
}

p {
    font-size: 1.5em; /* 1.5 × 16px = 24px */
}

h1 {
    font-size: 2rem; /* 2 × 16px = 32px */
}

Разница между em и rem:

em зависит от родителя, а rem – всегда от html.
rem удобнее для единообразия размеров.

Сравнение `px`, `em` и `rem`

body {
    font-size: 16px;
}

.container {
    font-size: 20px;
}

.px-text {
    font-size: 14px; /* Всегда 14px */
}

.em-text {
    font-size: 1.2em; /* 1.2 × 20px = 24px */
}

.rem-text {
    font-size: 1.2rem; /* 1.2 × 16px = 19.2px */
}

Вывод:

px — фиксированный размер.
em — зависит от родителя.
rem — зависит от html.

2. Оптимальный выбор размера шрифта

Для адаптивности лучше использовать rem, em или %.
Для фиксированных элементов (например, кнопок) можно использовать px.
Для заголовков удобно rem, чтобы сохранить масштабируемость.
Для печати стоит учитывать pt, но в вебе он почти не используется.

Заключение

Абсолютные единицы (px, pt, cm) фиксированы и не адаптируются.
Относительные единицы (em, rem, %, vw, vh) зависят от родительского элемента или экрана.
Лучший выбор для веба – rem, так как он обеспечивает предсказуемый масштаб шрифта.