Главная » Статьи » Упрощенная гибкая типографика

Упрощенная гибкая типографика

Упрощенная гибкая типографика

От автора: гибкая типографика — это идея, что font-size (и, возможно, другие атрибуты шрифта, например line-height) меняются в зависимости от размера экрана (или, возможно, запросов контейнера, если они у нас были).

Основная хитрость заключается в единицах на основе окна просмотра. Вы можете буквально задать шрифт в единицах на основе окна просмотра (например font-size: 4vw), но колебания в размерах настолько велики, что это обычно нежелательно. Это имитируется, с помощью чего-то вроде font-size: calc(16px + 1vw). Но в то время как нам все равно нравятся вычисления, самая распространенная реализация оказалась уравнением для вычисления простого английского текста:

Я хочу, чтобы шрифт был от 16px на экране 320px и 22px на экране 1000px. Что дало это:

html { font-size: 16px;
}
@media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); }
}
@media screen and (min-width: 1000px) { html { font-size: 22px; }
}

Это, по сути, установка минимального и максимального размера шрифта, чтобы шрифт не уменьшался и не увеличивался до слишком экстремальных размеров. «CSS-блокировки» — это термин, придуманный Тимом Брауном.

Минимум и максимум ты говоришь?! Ну, так получилось, что функции для них попали в спецификацию CSS в виде min() и max().

Таким образом, мы можем упростить вышеприведенную настройку с помощью одной строки и сохранить блокировки:

html { font-size: min(max(16px, 4vw), 22px);
}

На самом деле мы могли бы остановиться на этом. Но вы, вероятно, захотите задать объявление font-size таким образом, чтобы установить приемлемое резервное значение без каких-либо необычных функций.

Но пока мы расширяем границы, есть еще одна функция, которая еще больше упрощает все — clamp()! Она принимает три значения: min, max и гибкие единицы (или расчет или что-то еще), которые будут использовать в случае, если значение находится между минимумом и максимумом. Итак, наша одна строка становится еще меньше:

body { font-size: clamp(16px, 4vw, 22px);
}

Это будет реализовано в Chrome 79+ (который не был поставлен в стабильной версии, но скоро появится). Дядя Дэйв очень рад, что FitText теперь занимает несколько байтов вместо all-of-jQuery плюс еще 40 строк. Вот, как Дэйв проверяет пользовательские свойства CSS:

Автор: Chris Coyier

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

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