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

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

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

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

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

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

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

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

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

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

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

В Sass

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

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {

      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }

      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

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

$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;

html {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}

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

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

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

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

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

$mod_1: 1.2; // мобильные устройства
$mod_2: 1.5; // десктоп

h1 {  
  font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h2 {  
  font-size: $mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h3 { 
  font-size: $mod_1*$mod_1 *1rem;
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);
}

Автор: Geoff Graham

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

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

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

HTML5 и CSS3 с Нуля до Профи

Научись верстать сайты, используя все возможности HTML5 и CSS3, прямо сейчас

Научиться

Метки:

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

Комментарии 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