Как увеличить шрифт в html

Для изменения размера текста существует несколько возможностей — это использование заголовков , ..., , тегов и . Кроме того, размер текста можно задавать с помощью CSS, устанавливая его в пунктах, пикселах или других единицах в свойстве font-size.

<h1>Заголовок 1го уровня<h1>
<p>Пример текста, который будет больше чем заголовок h1</p>

Для создания размера шрифта текста в HTML можно также воспользоваться CSS, но прямо в HTML коде:

<div>
    <p style="font-size: 42px;">Шрифт</p>
</div>

И уже менять размер текста можно прям в HTML коде

Результат

Размер текста задают CSS-свойством font-size. Чтобы увеличить шрифт одного абзаца, добавьте ему стиль:

<p style="font-size: 24px;">Крупный текст</p>

Для всей страницы задайте размер элементу body:

<style>
  body {
    font-size: 18px;
  }
</style>

Обычный размер текста в браузере — 16px.

Через класс

Стиль в атрибуте style подходит для проверки. В проекте стили выносят в CSS и подключают классом:

<style>
  .big {
    font-size: 32px;
  }
</style>

<p class="big">Крупный текст</p>
<p>Обычный текст</p>

Так один стиль можно применить к любому числу элементов и поменять его в одном месте.

Какие единицы выбрать

Для текста чаще всего используют rem. Если пользователь увеличит шрифт в настройках браузера, текст в rem увеличится вместе с ним, текст в px останется прежним.

Огромный шрифт для заголовка

Чтобы заголовок рос вместе с экраном, но не выходил за пределы, используют clamp():

h1 {
  font-size: clamp(2rem, 6vw, 5rem);
}

Размер будет 6% ширины окна, но не меньше 2rem и не больше 5rem.

Заголовки h1–h6

Теги <h1>–<h6> выводят текст крупнее обычного, но их выбирают по смыслу: <h1> — главный заголовок страницы, <h2> — раздел. Ставить <h1> только ради крупного шрифта нельзя: поисковики и программы экранного доступа читают заголовки как структуру страницы. Размер заголовка меняют тем же font-size.

Устаревшие способы

Теги <font size="5"> и <big> удалены из HTML5. Браузеры их ещё понимают, но валидатор покажет ошибку. Используйте CSS.

Если размер не меняется

• Другое правило перебивает ваше. Откройте DevTools (F12), выберите элемент и посмотрите во вкладке Styles, какое правило зачёркнуто.
• Нет единицы измерения: font-size: 20 не сработает, нужно 20px.
• Опечатка в имени класса в HTML или CSS.

Стили текста и единицы измерения разбирают на курсе «Профессиональная верстка».