Размер шрифта в HTML меняют через CSS-свойство font-size. Для всего текста страницы хватит одной строки body { font-size: 18px; }, для отдельного абзаца или заголовка правило пишут на его класс: .note { font-size: 0.875rem; }. Тег <font size> из старых учебников больше не нужен: стандарт HTML относит его к устаревшим и советует CSS.
Ниже пошаговая инструкция, разница между px, rem и em, размер текста в полях <input> и <textarea> и ошибки, из-за которых правило не срабатывает. Если CSS для вас пока в новинку, начните с материала о том, что такое CSS.
CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как изменить размер шрифта: пошаговая инструкция
Порядок одинаковый для заголовка, абзаца, кнопки и всей страницы. Меняется только селектор.
- Найдите элемент. Откройте страницу, нажмите на тексте правой кнопкой и выберите просмотр кода. Посмотрите тег и класс:
<p class="note">. - Напишите правило. Селектор плюс свойство с единицей измерения:
.note { font-size: 14px; }. - Подключите стили. Правило должно попасть на страницу через
<style>или внешний файл. Три способа подключения разобраны в инструкции как подключить CSS к HTML. - Обновите страницу и проверьте итог. Браузер покажет итоговый размер в пикселях, даже если вы писали rem или em.
Для четвёртого шага удобно вызвать в консоли браузера getComputedStyle. Он возвращает вычисленное значение свойства:
getComputedStyle(document.querySelector('.note')).fontSize
// '14px'Если в ответ пришло не то число, которое вы писали, правило перебито другим или не применилось вовсе. Причины собраны в разделе про ошибки.
Три способа задать font-size в HTML
Свойство одно, а место, где его пишут, разное. От места зависит, сколько элементов поменяется и легко ли будет найти правило через месяц.
Атрибут style прямо в теге
<p style="font-size: 20px;">Крупный абзац</p>Так меняют размер текста у одного элемента, например в письме или в редакторе CMS. На сайте лучше не злоупотреблять: стиль приходится искать по всему HTML-коду.
Тег style в head
<style>
body { font-size: 18px; }
h1 { font-size: 2.5rem; }
</style>Внешний файл стилей
/* styles.css */
p { font-size: 1rem; }
.caption { font-size: 0.875rem; }| Способ | Когда подходит |
|---|---|
Атрибут style |
Один элемент, письмо, быстрый тест |
Тег <style> |
Одностраничный сайт, учебный проект |
Файл .css |
Любой сайт больше одной страницы |
Как это выглядит на живой странице с несколькими блоками, видно в разборе HTML-кода сайта на пяти примерах. Абзацы и их оформление подробно разобраны в статье про тег p.
Канал основателя Checkroi Вани Буявца3 800 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяЕдиницы размера: px, rem, em, проценты и ключевые слова
Значение font-size без единицы измерения не работает, исключение только у нуля. Единицу выбирают по тому, от чего должен зависеть размер. Если сомневаетесь, берите rem: почему, видно ниже на примере вложенных блоков.
| Единица | От чего считается | Пример при базе 16 px |
|---|---|---|
px |
Абсолютное значение | 12px = 12 px |
rem |
Размер шрифта корневого <html> |
1.25rem = 20 px |
em |
Размер шрифта родителя | 2em = 32 px |
% |
Размер шрифта родителя | 150% = 24 px |
| Ключевое слово | Шкала браузера от базового размера | xx-large = 32 px |
vw |
Ширина окна, 1vw = 1 % ширины | 5vw на 1440 px = 72 px |
Полный список допустимых значений и единиц есть в справке MDN по свойству font-size и в разделе о единицах длины.
Ключевые слова
Вместо числа можно написать small, large и другие слова из шкалы спецификации CSS Fonts. В Chrome 156 с базовым размером 16 px они дают такие значения:
| Значение | Размер |
|---|---|
xx-small |
9 px |
x-small |
10 px |
small |
13 px |
medium |
16 px |
large |
18 px |
x-large |
24 px |
xx-large |
32 px |
xxx-large |
48 px |
Ещё два слова, smaller и larger, считают размер от родителя: при родителе 16 px вышло 13,33 и 19,2 px.
Пункты, пиксели и сам кегль как типографское понятие разобраны в статье про кегль, там же таблица размеров для сайта, печати и презентаций.
Почему em растёт сам по себе
Em умножается на размер родителя, а родитель сам может быть задан в em. Чаще всего так выходит во вложенных контейнерах div. Блок 1.5em внутри другого блока 1.5em при базе 20 px получает не 30, а 45 px.
Rem от вложенности не зависит: 1.5rem на любой глубине даёт 24 px, пока размер у <html> равен 16 px. Поэтому для основного текста и заголовков удобнее rem, а em оставляют для отступов и иконок, которые должны расти вместе с текстом своей кнопки.
Размер шрифта в текстовом поле input и textarea
Частый вопрос звучит так: на странице 18 px, а в поле поиска текст мелкий. Поля формы не берут шрифт страницы, у браузера для них свой размер.
В Chrome 156 у <input>, <textarea>, <button> и <select> без стилей размер 13,33 px, даже когда у страницы 20 px. Гарнитура тоже своя: у <textarea> моноширинная.
Решение: одна строка в начале файла стилей.
input, textarea, select, button {
font: inherit;
}Свойство font переносит в поле и размер, и гарнитуру родителя. Если нужен только размер, пишите font-size: inherit или конкретное значение: input { font-size: 1rem; }.
Целиком форма с полями и кнопкой собрана в последнем примере статьи про HTML-код сайта, туда эту строку можно добавить как есть.
Атрибут size у <input> размер шрифта не меняет. По стандарту HTML он задаёт, сколько символов видно в поле, то есть ширину. Поле с size="40" вышло шириной 293 px против 153 px у поля без атрибута, а шрифт остался 13,33 px.
Размер текста, который подстраивается под экран
Заголовок в 48 px хорош на ноутбуке и разваливается на телефоне. Есть два способа сделать размер текста гибким.
Медиазапросы
h1 { font-size: 1.75rem; }
@media (min-width: 768px) {
h1 { font-size: 2.5rem; }
}Размер переключается ступенькой на заданной ширине экрана. Подробно про точки перелома в инструкции о медиазапросах CSS.
Функция clamp
h1 { font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem); }Функция clamp() принимает минимум, желаемое значение и максимум. Размер растёт плавно вместе с шириной окна и не выходит за границы. Такие приёмы адаптивной вёрстки отрабатывают на курсах по CSS.
- ширина 375 px: 16,55 px;
- ширина 768 px: 20,48 px;
- ширина 1440 px: 24 px, сработал потолок 1.5rem.
Голые vw без clamp так не ограничены. Тот же 5vw на телефоне шириной 375 px даёт 18,75 px, а на мониторе 1440 px уже 72 px.
Пользователь тоже может увеличить шрифт
В настройках браузера можно поменять базовый размер шрифта. При базе 20 px вместо 16 текст в rem, % и medium вырос до 20 px, а текст в 16px остался прежним.
Поэтому основной текст пишут в rem. Критерий доступности WCAG 1.4.4 требует, чтобы текст увеличивался до 200 % без потери содержимого и функций.
Тег font и атрибут size
В старом коде и на сайтах-конструкторах до сих пор встречается такая разметка:
<font size="5">Крупный текст</font>Браузеры её ещё понимают. Атрибут принимает числа от 1 до 7, и раздел стандарта об отрисовке сопоставляет каждое число с ключевым словом CSS.
| size | Ключевое слово | Chrome 156 |
|---|---|---|
| 1 | x-small | 10 px |
| 2 | small | 13 px |
| 3 | medium | 16 px |
| 4 | large | 18 px |
| 5 | x-large | 24 px |
| 6 | xx-large | 32 px |
| 7 | xxx-large | 48 px |
Новый код так не пишут. Тег <font> нельзя вынести в общий файл стилей, и стандарт перечисляет его среди устаревших элементов. Замена: <span class="big"> и правило .big { font-size: x-large; }. Похожая история с жирным текстом: разбор в статье о жирном тексте в HTML и CSS.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналЧастые ошибки и что с ними делать
- Число без единицы.
font-size: 20в документе с<!doctype html>браузер отбрасывает, и текст остаётся 16 px. Пробел внутри значения (20 px) и запятая вместо точки (1,5rem) ломают правило так же. Решение:20pxслитно, дробная часть через точку. - Размер вырос в разы. Это em, умноженный на em родителя. Решение: перевести вложенные элементы на rem.
- Текст в таблице не увеличивается. Если в начале файла нет
<!doctype html>, браузер работает в режиме совместимости, и стандарт велит сбрасывать размер шрифта у таблицы. При 20 px у страницы ячейка осталась 16 px. Решение: добавить doctype первой строкой. Про режимы совместимости есть справка MDN. - Правило написано, а размер прежний. Его перебивает более точный селектор или стиль в атрибуте
style. Решение: проверить итоговое значение черезgetComputedStyleи поднять точность селектора, например писать правило на класс блока, а не на тег. - У html жёстко стоит 16px. Так весь rem-текст перестаёт следовать за настройкой браузера: при базе 20 px он остался 16 px. Решение: не задавать корню размер в px, а если нужна другая база, писать проценты, например
html { font-size: 112.5%; }.
Где освоить CSS системно
Размер шрифта поменять легко, сложнее собрать из размеров, отступов и сеток аккуратную вёрстку под любой экран. Этому учат курсы по CSS: в каталоге Чекроя собраны программы разных школ с ценами и отзывами.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| HTML и CSS с нуля Перейти на сайт курса |  Skillbox | 91 626 ₽ | 7635 ₽/мес. | 11 месяцев | Обзор курса |
| HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса |  HTML Academy | 23 400 ₽ | 3900 ₽/мес. | 2 месяца | Обзор курса |
| Основы вёрстки HTML и CSS Перейти на сайт курса |  Академия Синергия | 32 676 ₽ | 2723 ₽/мес. | 3 месяца | Обзор курса |
| HTML и CSS с нуля |  Skypro | 195 160 ₽ | 7972 ₽/мес. | 12 месяцев | Обзор курса |
| Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса |  Бруноям | 36 900 ₽ | 2491 ₽/мес. | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по CSS
