Упрощенный адаптивный шрифт

Css
article image

Гибкая типографика - это идея при которой размер шрифта (или, например, высота строки) зависит от размеров экрана (контейтера, если он есть).

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

Я хочу, чтобы шрифт менялся от 16 пикселей на экране в 320 пикселей до 22 пикселей на экране в 1000 пикселей.

В итоге пришли к этому:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 Locks» (Замки CSS) - это термин, придуманный Тимом Брауном.

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

Таким образом мы можем упросить наше выражени до одной строки с сохранением "замков"

1
2
3
html {
  font-size: min(max(1rem, 4vw), 22px);
}

На самом деле, мы могли бы и остановиться на этом, потому что поддержка Safari (11.1+) and Chrome (79+) - это все что есть на сегодняшний день. Зная это скорее всего вы захотите установить резервное значение размера шрифта перед функцией.

На момент написания статьи поддержка браузерами уже расширилась. Можете посмотреть тут. (Примечание vimp.site)

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

1
2
3
body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
}

Это будет работать только в хроме с версии 79+

Актуальная поддержка тут. (Примечание vimp.site)

Дядя Дэйв теперь очень доволен, что FitText состоит из нескольких байт, вместо jQuery плюс сорока строк. Теперь это выглядит так:

See the Pen FitText in CSS with clamp() by Dave Rupert (@davatron5000) on CodePen.

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