Адаптивная типографика
Масштабирование на разных устройствах
Изучить методыАдаптивная типографика обеспечивает читаемость и эстетичность текста на устройствах любого размера. Использование правильных единиц и методов позволяет создать гибкий шрифт, который масштабируется естественным образом.
Типичные шкалы шрифтов
| Элемент | Мобильный | Десктоп | Соотношение |
|---|---|---|---|
| Основной текст | 16px | 18px | 1.0 |
| H3 | 18px | 22px | 1.2 |
| H2 | 22px | 28px | 1.5 |
| H1 | 28px | 40px | 2.0-2.2 |
Пример CSS: font-size: clamp(1rem, 2.5vw, 2rem);
Заключение
Адаптивная типографика сочетает относительные единицы, размеры на основе области просмотра и CSS clamp() для плавного масштабирования. Начните с читаемого базового размера (16–18px), установите постоянное соотношение шкалы и протестируйте на разных устройствах. Хорошая адаптивная типографика повышает удобочитаемость и удобство использования на любом экране.