Рідка типографіка

34

Від автора: за допомогою вьюпорт одиниць вимірювання та функції 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: 1200 px;
$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);
}