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

Дата публикации: 2017-03-17

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

От автора: с помощью вьюпорт единиц измерения и функции 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])));
}

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)));
}

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;
      }
    }
  }
}

@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);
}

$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);
}