Балансировка текста в адаптивном дизайне

От автора: в прошлом году на сайте 24 ways я призывал вас делать шрифты выразительными. Я задал очень большой размер текста, чем привлек ваше внимание и объяснил свою точку зрения. Большой текст нужно рассматривать наравне с баннерами. Баннер – это такая большая картинка, создающая нужную атмосферу и привлекающая внимание к определенной области макета.

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

Тем не менее, отображаемый текст, исходя из его целей и относительного размера, является текстом, который мы видим в первую очередь, но читаем уже только во вторую очередь. Другими словами это изображение текста. Если говорить об изображениях, обычно мы масштабируем все изображения (фотографии, баннеры и т.д.) относительно разрешения. Используйте тот же подход для отображаемого текста: заблокируйте размер и форму текста под конкретный экран или окно браузера.

Знакомство с viewport единицами измерения

CSS3 принес нам новые единицы измерения, которые связаны с разрешением экрана. Новые единицы измерения можно использовать, где только можно, в остальных случаях можно использовать единицы измерения длины, например, пиксели, ems и проценты. Существует четыре viewport единицы измерения, во всех них значение 1 равно 1% от ширины или высоты разрешения, как указано в опорных пикселях:

Одним движением вы можете задать размер заголовка так, чтобы он был пропорционален ширине экрана или окна браузера, вместо того, чтобы выбирать размер при помощи медиа запросов. Код ниже изменяет размер заголовка так, чтобы тот составлял 13% от ширины окна браузера:

Для набора разных значений ширины текст будет иметь следующий размер:

Видимый размер шрифта в px

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

С единицами vw текст в альбомном режиме намного больше, чем в портретном

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

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

С единицами vmin текст одинаковый как в портретном, так и в альбомном режиме

Если сравнивать изображения на vw и vmin на разных экранах, можно заметить, как vmin уменьшает размер текста до удобочитаемого:

Гибридный размер шрифта

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

Используем vmin для быстрого масштабирования вспомогательного текста

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

Тут нам поможет гибридный метод установки размера текста2. При помощи функции calc() можно одновременно вычислять размер текста под rems и viewport единицы. К примеру:

На экране шириной 320px текст будет 16px. Вычисления: (0.5 × 16) + (320 × 0.025) = 8 + 8 = 16px

На экране шириной 768px текст будет 27px: (0.5 × 16) + (768 × 0.025) = 8 + 19 = 27px

Так подзаголовки выглядят более сбалансированно и не отвлекают от основного заголовка:

Чтобы вы поняли, в чем заключается эффект гибридного подхода, ниже я представил вам сравнение гибридного метода и метода на viewport единицах в реальных размерах:

Сверху: calc() гибридный метод; снизу: только vmin

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

Автор: Richard Rutter

Источник: //24ways.org/

Редакция: Команда webformyself.

Комментарии Вконтакте: