Как изменить размер текста в HTML
Главная › Разработка › 13 ›

Как изменить размер текста в html

Как изменить размер текста в html

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

Тег <font> ранее позволял менять размер текста с помощью атрибута size, но он давно не рекомендуется к использованию. Современные проекты используют только CSS.

Через CSS свойство font-size можно задавать размер в пикселях (px), относительных единицах (em, rem), процентах (%) или динамических единицах (vw, vh). Например: font-size: 16px; устанавливает фиксированное значение, а font-size: 120%; масштабируется относительно родительского элемента.

Для адаптивной верстки удобнее использовать em или rem. Так, 1em равен размеру шрифта родителя, а 1rem – корневому значению, определённому для <html>. Это упрощает поддержку единого масштаба на сайте.

При разработке интерфейсов рекомендуется задавать базовый размер шрифта в диапазоне 16–18px и корректировать его в зависимости от устройства через медиазапросы.

Изменение размера текста с помощью тега <font>

Тег <font> позволяет задавать размер текста напрямую через атрибут size. Значение атрибута может быть числом от 1 до 7, где 1 – самый маленький размер, а 7 – самый крупный. По умолчанию размер текста равен 3.

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

  • <font size=»1″>Очень маленький текст</font>
  • <font size=»3″>Текст стандартного размера</font>
  • <font size=»5″>Крупный текст</font>

Можно использовать относительные значения, добавляя или уменьшая размер относительно текущего:

  • <font size=»+2″>На два уровня больше стандартного</font>
  • <font size=»-1″>На один уровень меньше стандартного</font>

Рекомендации по использованию:

  1. Для единообразного оформления текста лучше ограничивать диапазон размеров 2–5.
  2. Тег <font> устарел, поэтому для современного HTML рекомендуется использовать CSS (font-size), но <font> сохраняет совместимость со старыми проектами.
  3. Не комбинировать слишком много уровней размера на одной странице, чтобы не нарушить визуальную иерархию текста.

Применение атрибута style с CSS-свойством font-size

Применение атрибута style с CSS-свойством font-size

Для изменения размера текста непосредственно в HTML можно использовать атрибут style с CSS-свойством font-size. Это позволяет задавать индивидуальные размеры для каждого элемента без подключения внешнего CSS.

Примеры значений для font-size:

  • Пиксели (px) – фиксированный размер текста. Например: style="font-size:16px".
  • Проценты (%) – размер относительно родительского элемента. Например: style="font-size:120%" увеличит текст на 20% от базового.
  • em – масштаб относительно размера шрифта родителя. 1em соответствует текущему размеру, 1.5em увеличит на 50%.
  • rem – размер относительно корневого элемента (<html>). Удобно для единообразного масштабирования на странице.

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

<p style="font-size:18px">Текст размером 18px</p>

<<3>


Рекомендации при использовании style="font-size":


    

  1. Использовать относительные единицы (em, rem, %) для адаптивного дизайна.
    2. 

  2. Фиксированные пиксели применять только для точного соответствия макету.
    3. 

  3. Не смешивать единицы в одном блоке текста для сохранения визуальной согласованности.
    4. 

  4. Минимизировать использование inline-стилей на больших проектах, чтобы сохранить читаемость кода.
    5. 



Комбинируя style и font-size, можно быстро тестировать визуальное оформление текста без изменения внешних CSS-файлов, что удобно для небольших элементов или временных корректировок.


Использование встроенных единиц измерения px, em и rem


Единица px (пиксель) задаёт точный размер шрифта относительно экрана. Например, font-size: 16px; всегда отобразит текст размером 16 пикселей вне зависимости от настроек браузера. Рекомендуется использовать px для элементов интерфейса, где важна строгая фиксация размеров.


Единица em является относительной и рассчитывается от размера шрифта родительского элемента. Если у родителя font-size: 16px;, то font-size: 1.5em; у дочернего элемента создаст текст размером 24px. em удобен для масштабирования текста внутри блоков и для адаптивного дизайна, но многократное вложение может привести к непредсказуемому увеличению.


Единица rem аналогична em, но всегда ориентируется на корневой элемент <html>. Например, при html { font-size: 16px; } значение font-size: 2rem; создаст текст размером 32px независимо от вложенности. rem обеспечивает стабильное масштабирование по всей странице и упрощает поддержку единообразного дизайна.


Практическая рекомендация: использовать px для кнопок и пиксельной точности, em для локального масштабирования внутри контейнеров, rem для глобального управления размерами текста. Сочетание em и rem позволяет гибко адаптировать текст под разные устройства без потери пропорций.


Задание размеров текста в процентах


Задание размеров текста в процентах


Размер текста в процентах задается относительно родительского элемента. Значение 100% соответствует базовому размеру шрифта родителя. Например, если родитель имеет 16px, 150% увеличит текст до 24px.


Процентные размеры полезны для адаптивного дизайна, так как они сохраняют пропорции при изменении базового шрифта страницы. Рекомендуется использовать диапазон от 80% до 200% для заголовков и основного текста, чтобы обеспечить читаемость на разных устройствах.





Процент
Пример размера при 16px родителя
Рекомендация




80%
12.8px
Мелкий вспомогательный текст




100%
16px
Основной текст




125%
20px
Подзаголовки, выделение информации




150%
24px
Ключевые заголовки




200%
32px
Главные заголовки, акценты





Для точной настройки рекомендуется комбинировать проценты с медиазапросами: например, на мобильных устройствах снижать размер на 10–15%, чтобы текст оставался удобочитаемым без горизонтальной прокрутки.


При использовании процентов избегайте цепочек вложенных элементов с разными размерами: это может привести к непредсказуемым итоговым размерам текста.


Использование относительных ключевых слов small, medium, large


Использование относительных ключевых слов small, medium, large


В HTML размер текста можно задавать с помощью относительных ключевых слов: small, medium, large. Эти значения управляют размером шрифта относительно базового значения, определённого для элемента или страницы.


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


medium соответствует стандартному размеру шрифта браузера (обычно 16px). Используется для основного текста, абзацев и списков, обеспечивая читабельность без дополнительных настроек.


large увеличивает текст примерно на 20–30% относительно базового размера. Эффективно для заголовков второго уровня, важных блоков информации или кнопок, которые должны быть визуально заметными.


Использование этих ключевых слов удобно для адаптивного дизайна, так как они автоматически масштабируются при изменении базового размера шрифта в браузере пользователя, обеспечивая консистентность интерфейса.


Пример применения в HTML:


<p style="font-size: small;">Вспомогательный текст</p>


<p style="font-size: medium;">Основной текст страницы</p>


<p style="font-size: large;">Выделенный блок информации</p>


Для точной типографики рекомендуется комбинировать относительные ключевые слова с единицами em или rem, чтобы сохранять пропорции при масштабировании текста на разных устройствах.


Масштабирование текста через классы CSS


Масштабирование текста через классы CSS


Создавайте отдельные CSS-классы для каждого размера текста. Для фиксированного размера используйте пиксели: .text-small { font-size: 12px; }, .text-medium { font-size: 16px; }, .text-large { font-size: 24px; }.


Для адаптивного дизайна применяйте относительные единицы: em и rem. Пример: .text-base { font-size: 1rem; }, .text-lg { font-size: 1.5rem; }, .text-xl { font-size: 2rem; }.


Используйте медиазапросы для изменения размеров текста на разных устройствах. Пример: @media (max-width: 768px) { .text-lg { font-size: 1.25rem; } }.


Применение классов в HTML: <p class="text-lg">Пример текста</p>. Это упрощает масштабирование и поддержание единого размера текста в проекте.


Настройка размеров текста для мобильных устройств


Настройка размеров текста для мобильных устройств


Для оптимального отображения текста на мобильных устройствах используют относительные единицы измерения: em, rem и vw. Например, базовый размер текста можно задать через html { font-size: 16px; }, а заголовки масштабировать относительно него: h1 { font-size: 2rem; }.


Использование медиазапросов позволяет адаптировать текст под разные размеры экранов. Пример: @media (max-width: 600px) { p { font-size: 1rem; } h1 { font-size: 1.5rem; }}. Это гарантирует читаемость без необходимости увеличивать масштаб вручную.


Минимальный рекомендуемый размер текста для мобильных устройств – 14px. Для кнопок и интерактивных элементов – не менее 16px, чтобы обеспечить удобное касание пальцем.


Метод viewport width (vw) позволяет динамически изменять текст в зависимости от ширины экрана: p { font-size: 4vw; }. При этом важно устанавливать максимальный и минимальный размер через медиазапросы, чтобы текст не стал слишком маленьким или крупным.


Для читаемости заголовков и основного текста соблюдают соотношение контраста и межстрочного интервала: line-height 1.4–1.6 для абзацев и 1.2–1.3 для заголовков. Это повышает комфорт чтения на маленьких экранах.


Использование адаптивных шрифтов через CSS-функцию clamp() позволяет задать минимальный, предпочтительный и максимальный размер текста одновременно: font-size: clamp(14px, 2vw, 18px);. Такой подход обеспечивает стабильное отображение текста на экранах любых размеров.


Изменение размера текста через CSS-переменные


CSS-переменные позволяют централизованно управлять размерами текста и упрощают поддержку масштабируемых интерфейсов. Для объявления переменной используют синтаксис --имя-переменной внутри селектора :root, например:


:root { --font-size-base: 16px; --font-size-large: 24px; }


Применение переменной в стиле выполняется через функцию var():


p { font-size: var(--font-size-base); } h1 { font-size: var(--font-size-large); }


Можно создавать производные размеры с помощью calc(), что позволяет автоматически масштабировать текст относительно базового значения:


h2 { font-size: calc(var(--font-size-base) * 1.5); }


Для адаптивного дизайна переменные удобно комбинировать с медиа-запросами:


@media (max-width: 768px) { :root { --font-size-base: 14px; --font-size-large: 20px; } }


Использование CSS-переменных упрощает единообразное изменение типографики по всему проекту и снижает риск ошибок при редактировании отдельных селекторов.


Вопрос-ответ:


Какие способы изменения размера текста в HTML существуют?


В HTML есть несколько методов изменения размера текста. Самый простой — использование тега  с атрибутом style, где указывается свойство font-size. Размер можно задавать в пикселях (px), относительных единицах (em, rem) или процентах. Кроме того, можно использовать встроенные заголовки 


–


, которые имеют предустановленные размеры, либо подключить CSS через тег