Жидкая типографика

Жидкая типографика

От автора: с помощью вьюпорт единиц измерения и функции calc() можно настраивать размер font-size и других свойств относительно размера экрана. То есть размер может быть жидким. Шрифт не будет всегда фиксированным или прыгать с размера на размер в медиа запросах.

Формула от Mike Riethmuller:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Например, если необходимо держать шрифт в рамках, где 14px – это минимальный размер на самой маленькой ширине вьюпорта в 300px, а 26px – максимальный размер на самой большой ширине вьюпорта в 1600px, то наша формула приобретет вид:

Жидкая типографика

Текст становится жидким и изменяется вместе с шириной вьюпорта

Чтобы не вылезать за минимум и максимум, пропишите эту формулу в медиа запросах. Тут вам поможет Sass…

В Sass

Можно написать довольно надежный миксин:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Который используется следующим образом:

Вот еще один пример Mike, где исправлен жидкий ритм:

Жидкая типографика

Применяем идею к заголовкам с помощью модульной шкалы

Модульная шкала означает, что чем больше пространства, тем более драматичными будут изменения. Возможно, на самой большой ширине вьюпорта каждый заголовок в иерархии будет 1.4х раза больше, чем следующий, однако на самом маленьком вьюпорте это всего 1.05х.

С нашим Sass миксином:

Автор: Geoff Graham

Источник: https://css-tricks.com/

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Верстка-Мастер. От теории до верстки популярных шаблонов

Станьте современным верстальщиком с нуля

Подробнее

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree