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

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

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

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

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

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

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

vw – ширина окна браузера,


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

vh – высота окна браузера,

vmin – ширина или высота окна браузера, выбирается меньшее

vmax — ширина или высота окна браузера, выбирается большее

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

h1 {
 font-size: 13 vw;
}

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

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

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

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

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

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

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

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

h1 {
 font-size: 13vmin;
}

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

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

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

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

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

h1 {
 font-size: 13vmin;
}
h2 {
 font-size: 5vmin;
}

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

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

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

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

h2 {
 font-size: calc(0.5rem + 2.5vmin);
}

На экране шириной 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

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Научись верстать сайты, используя все возможности фреймворка Bootstrap.

Научиться

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree