Основы работы с адаптивным текстом

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

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

Внедрение последних единиц установления

В CSS3 было добавлено некоторое количество последних единиц размера (то есть вы можете использовать их там же где и px, ems или проценты), которые зависят от размера окна просмотра (viewport). Вообще их четыре, единица равнозначна 1% от ширины или высоты экрана, в подневольности от конкретной единицы установления.

vm – ширина viewport.

vh – высота viewport.

vmin – высота или ширина, в подвластности, что меньше.

vmax – высота или ширина, в подвластности, что больше.

Теперь вы можете за раз установить размер для текста, без использования очереди медиа-запросов. Следующий код делает заголовки размером с 13% от ширины экрана:

Но появляется новая проблема. Текст в альбомной ориентации экрана устройства слишком большой по сравнению с тем же текстом, но при портретной ориентации.

Это возникает из-за того, что каждая ориентация экрана имеет собственные размеры viewport, а в итоге страдает наш дизайн.

Когда же размер текста не зависит от ориентации экрана, это выглядит приятнее. Вот здесь и появляется vmin. Если вы установите размер в vmin, он будет пропорционален меньшей стороне окна просмотра.

Гибридный алгоритм установления размера

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

На телефонах это работает прекрасно, но на экранах побольше он кажется непропорционально большим, хотя и масштабируется по тем же правилам, что и на телефонах. И чем больше экран, тем эта проблема становится виднее.