Ограничение размера шрифта в CSS: от min- до max-font-size

Быстрый ответ

Отличной заменой для min-font-size и max-font-size может стать функция CSS clamp():

font-size: clamp(1rem, 2.5vw, 2rem);

Здесь задан минимальный размер — 1rem, максимальный — 2rem, а значение 2.5vw позволяет шрифту адаптивно масштабироваться. Получается, как тренировка для шрифта — мы не допускаем лишнего 'веса'!

Углубляемся: Использование calc() для адаптивного дизайна

Для создания динамически изменяемого размера шрифта рекомендуется использовать функцию calc() в сочетании с единицами вьюпорта.

font-size: calc(12px + 0.5vw); /* Шрифт расширяется, подобно бублику! */

Это правило задаёт начальный размер в 12px и пропорционально увеличивает его в зависимости от ширины вьюпорта, получается, как будто шрифт питается сбалансированно и растёт обоснованно.

Контроль размера шрифта с помощью медиа-запросов

При разговоре об адаптивном дизайне невозможно обойтись без упоминания медиа-запросов:

@media screen and (min-width: 768px) {
    body {
        font-size: 16px; /* На больших экранах текст дышит в свободном пространстве! */
    }
}

@media screen and (max-width: 767px) {
    body {
        font-size: 14px; /* На малых экранах текст компактный и понятный! */
    }
}

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

Не забывайте про мета-тег viewport

Чтобы всё было под контролем, всегда включите мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Этот тег подсказывает браузеру, что сайт оптимизирован под разные размеры экранов и учтена их гибкость.

Визуализация

Метафора с минимальными и максимальными скоростями поможет яснее представить эту концепцию:

Представьте дорогу с ограничением скорости:

Мин. скорость 🚗💨: 30 миль/час  (min-font-size)
Макс. скорость 🚓🚨: 60 миль/час  (max-font-size)

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

|       Шрифты на веб-странице       |
|------------------------------------|
| До: 📏🔡 Слишком маленькие или большие   |
| После: 🚗💨 30 <= 🔠 <= 60 🚓🚨  |

Учитывайте разные браузеры

Помимо всего прочего, имейте в виду, что разные браузеры могут интерпретировать одинаковый код по-разному, учитывая предпочтения пользователей.

font-size: 100%; /* Это предложение, на которое браузер может ответить "да" или "нет". */

Выбирайте процентные значения или единицы em, чтобы сохранить относительные размеры шрифта.

Взгляд в будущее: CSS4

Хотя о CSS4 пока только говорят, уже появились слухи о новых свойствах: font-min-size и font-max-size. Следите за обновлениями в мире CSS!

Эксперименты с Clamp

Используя функцию clamp, вы накладываете ограничение на размер шрифта:

font-size: clamp(1rem, 5% + 1vw, 2rem); /* Шрифт 'в хорошей форме', без лишних "кг" */

Медиа-запросы и они работают линейно!

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

@media screen and (min-width: 600px) {
    body {
        font-size: calc(14px + (18 – 14) * ((100vw – 600px) / (1200 – 600))); /* Удивительно адаптивный шрифт */
    }
}

Полезные материалы

1. Fluid Typography | CSS-Tricks — содержательное разъяснение процесса создания жидкой типографики с использованием calc() и единиц вьюпорта.
2. clamp() – Каскадные таблицы стилей CSS | MDN — справочник MDN по функции clamp().
3. Responsive And Fluid Typography With vh And vw Units — Smashing Magazine — эффективные стратегии по созданию адаптивной типографики.
4. CSS Values and Units Module Level 4 — аналитический обзор CSS о функциях min, max и clamp.
5. Introduction to variable fonts on the web | Articles | web.dev — гид по использованию переменных шрифтов для улучшения адаптивности веб-типографики.
6. Responsive Web Design: What It Is And How To Use It — Smashing Magazine — исчерпывающая информация о медиа-запросах для создания гибкого и отзывчивого дизайна.
7. CSS Font Size — практические примеры и уроки по работе с размерами шрифтов в CSS.