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

Начнем с установки медиа-запроса для экранов меньше 45em:

@media screen and (max-width: 45em) {
 p {
 font-size: 1.5em;
 }
}

Тепер размер шрифта не изменяется до тех пор, пока минимальное значение не будет достигнуто.

Использование: root

Наше решение для более адаптивного типа заключается в вычислении размера шрифта на основе высоты и ширины экрана пользователя с помощью селектора :root.

:root {
 font-size: calc(1vw + 1vh + .5vmin);
}

Теперь Вы можете использовать значение em на основе того, которое рассчитанное с помощью :root.

body {
font: 1rem/1.6 "Open Sans", sans-serif;
}

Практика

Если Вы заметите, функция calc() обработает значения для размера шрифта веб-страницы. Давайте быстро рассмотрим их, чтобы понять, как вычисляется размер шрифта.

1vw = 1% ширины окна просмотра
1vh = 1% высоты окна просмотра
1vmin = 1vw или 1vh, в зависимости от того, что меньше
1vmax = 1vw или 1vh, в зависимости от того, что больше

Если мы применим это к размерам экрана iPhone 7, который равен 375×667, вычисленное значение :root будет:

:root {
  font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */
}

Что же дальше?

Постоянно технологии двигаются вперед и с каждым годом будут использоваться технологии проще и современнее. Но сейчас — это одна из лучших и адекватных технологий для быстрой адаптации шрифта в реалиях веб-сайта: использование :root обеспечивает наиболее гибкое решение.

---

Перевод статьи: Flexible type with :root

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!