Разработка адаптивной типографики может сбить с толку. Какие единицы вы должны использовать для размера шрифта: px, em, rem, vw? Как вы можете убедиться, что ваши шрифты доступны? И что такое гибкая типографика?
В этой статье мы ознакомимся с основами определения размера шрифтов в CSS и рассмотрим несколько различных подходов, которые вы можете использовать в своих собственных проектах веб-сайтов.
Каковы лучшие практики написания стилей шрифтов в CSS?
Давайте рассмотрим несколько основных рекомендаций, которые сделают ваши шрифты хорошо выглядящими на всех устройствах и обеспечат их доступность для пользователей, которым нужно либо увеличить масштаб, либо изменить базовый размер шрифта в браузере.
Используйте относительные, а не абсолютные единицы для шрифтов
Абсолютные единицы статичны, и их результирующие размеры не зависят от чего-либо еще. В CSS единицей измерения по умолчанию, к которой мы можем обратиться, является единица пикселя (px).
Размер шрифта 18px будет 18 пикселей, независимо от того, на каком устройстве или экране вы его просматриваете. А пиксели знакомы и довольно просты для понимания. Мы знаем, что шрифт 10px крошечный, а шрифт 100px — гигантский заголовок.
Может показаться заманчивым использовать пиксели для font-size, но это не рекомендуется по причинам доступности.
Это связано с тем, что даже несмотря на то, что увеличение изображения приведет к увеличению размера в пикселях, изменение базового размера шрифта в настройках браузера не окажет никакого эффекта. Таким образом, пиксели не являются полностью доступным решением для шрифтов.
Относительные единицы — это единицы измерения, которые зависят от других факторов, таких как ширина области просмотра, высота области просмотра или родительский элемент. Существует несколько относительных единиц: проценты (%), em, rem, ширина области просмотра (vw) и высота области просмотра (vh).
Процент (%)
Процентные единицы — это просто процент от родительского элемента. Если у вас есть <div>, для которого задан width: 50%, он будет половиной ширины своего родителя. Для шрифтов установка font-size: 100% сделает ваш текст 100% базового размера шрифта, установленного в браузере. Большинство браузеров по умолчанию используют базовый размер шрифта 16px, поэтому 100% этого размера будет 16px, а 50% — 8px.
Обычно считается, что для обеспечения доступности рекомендуется установить базовый font-size на 100% в элементе <html> и использовать относительные единицы для обработки всех других правил font-size в вашем CSS. Это позволяет пользователям изменять базовый размер шрифта в своем браузере и контролировать размер шрифта веб-страниц.
Em
Единица em — пережиток тех времен, когда типографика включала в себя настоящие металлические блоки и печатные станки. Согласно Википедии, «одна em традиционно определялась как ширина заглавной буквы M в текущем шрифте и eё кегль». Таким образом, настоящее имя «em», похоже, происходит от фонетического произношения буквы M. Поскольку единица 1 em зависит от текущего размера шрифта, это означает, что размер текста 1em не всегда будет таким же размером в пикселях на экране.
Как это переводится в CSS, так это то, что любой текст, размер которого определяется с использованием единиц em, будет зависеть от font-size его родительского элемента. Например, если вы установили для своего <html> значение font-size: 100% (что дает 16px), дочерний элемент с font-size: 2em будет иметь размер 2 * 16 или 32px.
Одним из недостатков использования em-единиц является то, что вы можете столкнуться с неожиданным результатом, если у вас возникнут вложенные размеры шрифта.
Подумайте, установлен ли у вас базовый шрифт на 16px, для дочернего элемента — на 1.5em (в итоге на 24px), а затем на элемент абзаца в качестве дочернего для этого элемента, установленного на 0.75em.
Вы могли подумать, что размер абзаца будет 0.75 * 16px или 12px. Но эти 0.75em будут относиться к родительскому абзацу, установленному на 24px, поэтому размер шрифта в результате фактически будет 0.75 * 24px или 18px.
Rem (root em)
Вы можете избежать этой проблемы вложенности, используя модуль rem (root em).
Как следует из названия, он будет вести себя как единица em в том смысле, что он относителен. Но вместо того, чтобы относиться к родительскому элементу, размер шрифта с использованием единиц rem всегда будет относиться к корневому элементу веб-сайта, что обычно означает элемент <html>.
Если вы установите размер корневого шрифта на 100% или 16 пикселей, вы можете быть уверены, что любые другие шрифты, использующие единицы rem, будут относиться к этим 16px.
Вы можете увидеть единицы em и rem в действии в созданной мной демоверсии Codepen.
Единицы области просмотра (viewport units)
Единицы области просмотра относительно новы, и они могут добавить дополнительный уровень отзывчивости к CSS.
Они включают ширину области просмотра (vw) и высоту области просмотра (vh). Эти единицы измеряют фактическую ширину и высоту вашего устройства.
Допустим, у вас есть iPhone 8 с шириной устройства 375 пикселей и высотой 667 пикселей. Для этого iPhone 100vw составляет 100% ширины области просмотра, что составляет 375px, а 50vw— это 50% ширины области просмотра, или 187.5px.
Захватывающая часть использования единиц просмотра в отношении размера шрифта заключается в том, что они по своей сути адаптивны, поскольку область просмотра изменяется на разных устройствах.
Если вы установите для текста значение font-size: 4vw, это будет равно 4% от ширины вашего окна просмотра. На этом iPhone font-size будет 15px. Если у вас планшет шириной 768px, вы получите font-size 30.72px, а на экране рабочего стола шириной 1440px текст будет отображаться с размером 58px.
Возможно, вы уже определили проблему с использованием единиц просмотра для шрифтов. Текст абзаца, приятный и читаемый при разрешении 15px на мобильных телефонах, быстро станет слишком большим — почти 60px для ширины рабочего стола.
И есть еще один недостаток использования единиц просмотра для шрифтов. Тот факт, что они относятся к размеру устройства, а не к базовому font-size, означает, что на них не повлияет изменение базового font-size в браузере.
Попытка увеличить текст путем увеличения в окне браузера может пойти не так, как ожидалось, поскольку само окно просмотра изменяется при увеличении или уменьшении масштаба. Вы можете сами увидеть, как ведет себя размер текста с помощью единиц просмотра в демонстрации Codepen здесь.
Однако, как мы увидим позже, мы все еще можем каким-то образом использовать изначально отзывчивую единицу окна просмотра для изменения размера шрифта.
Различные подходы к адаптивной типографике
Теперь, когда у нас есть базовая линия того, как изменение размера шрифта работает в CSS, давайте рассмотрим несколько различных подходов, которые у нас есть для создания адаптивного текста для Интернета. Мы рассмотрим традиционный адаптивный подход, а также два разных гибких подхода. Любой из этих трех вариантов — прекрасное решение для адаптивной типографики, в зависимости от ваших предпочтений и требований к дизайну.
Подход №1: Адаптивная типографика
Адаптивный дизайн — это практика написания стилей CSS таким образом, чтобы сайт правильно отображался на всех устройствах ширины. Независимо от того, используете ли вы мобильный телефон, планшет или сверхширокий монитор, веб-сайт должен хорошо выглядеть и быть читаемым, даже если он не будет выглядеть одинаково на всех устройствах.
Использование медиа-запросов для нацеливания на разную ширину точек останова и написание разных наборов CSS для разных точек останова лежат в основе адаптивного дизайна. Например, вы можете создать макет с двумя столбцами на рабочем столе и добавить его к макету с одним столбцом для планшета и мобильного устройства.
Для типографики мы можем использовать медиа-запросы, чтобы уменьшить размер шрифта на мобильных устройствах и увеличить на десктопах:
html {
font-size: 100%;
}
h1 {
font-size: 2.25rem; // 36px
}
@media (min-width: 700px){
h1 {
font-size: 3.5rem; // 56px
}
}
@media (min-width: 1000px){
h1 {
font-size: 4.75rem; // 76px
}
}
В этом примере текст h1 будет иметь размер 2.25rem (36px) для устройств шириной менее 700 пикселей, 3.5rem (56px) для устройств шириной от 700 до 1000 пикселей и 4.75rem (76px) для устройств шириной больше или равной 1000 пикселей.
При таком подходе мы используем базовый font-size 100% и единицы относительного размера шрифта с rems, чтобы веб-сайт был доступен. Пользователь может увеличить размер отображаемого содержимого, изменив настройку размера шрифта своего браузера или увеличив масштаб. Это стандартный адаптивный подход, и он также позволяет довольно легко понять, как шрифты будут вести себя, глядя на стили CSS.
Рабочая демонстрация адаптивной типографики.
Возможные проблемы
Одна проблема, которая возникает при использовании медиа-запросов для ваших стилей CSS, заключается в том, что они не полностью соответствуют требованиям будущего.
Хотя большинство современных телефонов имеют ширину не более 414px, а планшеты — не более 800px, мы можем с уверенностью предположить, что ширина этих устройств будет увеличиваться по мере развития технологий. Так что наши брейкпоинты, вероятно, нужно будет обновить в какой-то момент. (Это не столько практический вопрос, сколько один из принципов.)
Было бы хорошо, если бы мы могли писать стили, которые более элегантно масштабируются по мере увеличения ширины устройства — и если бы они могли плавно масштабироваться независимо от ширины устройства, не будучи столь зависимыми от медиа-запросов. Если бы стили масштабировались плавно, текст был бы немного больше на больших телефонах по сравнению с меньшими телефонами и больше на экранах настольных компьютеров по сравнению с небольшими экранами ноутбуков.
Давайте посмотрим, как следующий подход решит эту проблему.
Подход # 2: гибкая типографика
Гибкая типографика — это способ изменения размера шрифтов таким образом, чтобы они увеличивались по мере увеличения ширины области просмотра. И они не обязательно требуют медиа-запросов!
Двумя основными компонентами гибкой типографики являются:
- CSS-функция
calc(), которая позволяет выполнять математические операции, используя комбинацию различных CSS-модулей. - Единицы области просмотра, в частности, ширина экрана (
vw)
Как мы упоминали ранее, единицы области просмотра сами по себе быстро выйдут из-под контроля в зависимости от того, насколько они будут масштабироваться вверх и вниз. Но что, если мы объединим единицы vw с единицами rem, используя calc()? Используя эту функцию, мы можем создать такое правило:
h1 {
font-size: calc(1.3rem + 3.6vw);
}
Это вычисленное значение будет не менее 1.3rem или около 21px, если область просмотра гипотетически была равна нулю (чего не было бы в реальном мире). Тогда значение 3.6vw добавит скорость роста, которую мы можем контролировать, чтобы она была более постепенной, чем просто единицы окна просмотра сами по себе.
При ширине области просмотра 414px, 3.6vw будет 3,6% или около 15px. Таким образом, рассчётный font-size будет 21px + 15px, или около 36px. При ширине устройства 1440px, 3.6vw будет около 52px, поэтому font-size будет 21px + 52px или около 73px.
Эта комбинация модулей calc() и области просмотра — действительно мощный способ прописывать шрифты, размер которых зависит от размера. И мы знаем, что это решение будет доступно, если установить html { font-size: 100% } и использовать единицы rem как часть расчета.
Вы можете посмотреть рабочую демонстрацию гибкой типографики здесь.
И если вам интересно продолжить чтение по этой теме, Крис Койер рассказал о некоторых возможных вариантах использования формул смешанных единиц в CSS Tricks, а Майк Ритмюллер применил это для вычисления font-size.
Возможные проблемы
Как мы упоминали ранее, есть некоторые проблемы доступности с единицами области просмотра, поскольку на них не влияет изменение базового размера шрифта браузера. И хотя сами единицы rem подвержены влиянию, это будет компенсировано единицами области просмотра при вычислении.
Это означает, что чем больше вы установите часть vw функции calc(), тем больше будет это смещение. Но в целом у вас все будет хорошо, если вы установите часть rem функции на 1rem или больше.
Получение более точного контроля с помощью медиа-запросов
Кроме того, существует некоторая степень приближения при использовании этой функции расчета для размера шрифта. По своей природе он будет продолжать увеличивать font-size по мере увеличения размера экрана и уменьшать его по мере уменьшения ширины устройства.
В большинстве случаев это нормально, но не всегда желательно. Если вам нужно добавить конкретные ограничения на размер шрифта, к сожалению, всё-таки придется добавить медиа-запросы. Таким образом вы можете установить минимальные и максимальные значения размера шрифта для наименьшем и наибольшем брейкпоинтах и плавно масштабировать между этими значениями ширины.
Вот пример ограничения шрифта не менее 36 пикселей и не более 76 пикселей:
h1 {
font-size: 2.25rem; // 36px
}
@media (min-width: 414px){
h1 {
font-size: calc(1.3rem + 3.6vw); // fluidly scale
}
}
@media (min-width: 1440px){
h1 {
font-size: 4.75rem; // 76px
}
}
Если вы выберете этот подход, вам, возможно, придется поиграть со значениями rem и vw, чтобы попытаться приблизиться к 36px при 414px и 76px при 1440px. Лично мне нравится подход без медиа-запросов, поскольку он позволяет гибко реагировать на размер шрифта с помощью одного правила CSS.
Если вам действительно нужно иметь точный контроль над размером шрифта в определенных брейкпоинтах, этот последний подход даст вам это. Давайте проверим!
Подход № 3: гибкая типографика с «замками»
Этот метод аналогичен предыдущему подходу, в котором для вычисления font-size используется calc(). Он добавляет некоторую математику, чтобы гарантировать, что font-size будет именно таким, как мы хотим, как для минимального, так и для максимального брейкпоинта.
Обратной стороной, как мы вскоре увидим, является то, что эта точность требует более сложной математической формулы, чем простое сложение. Мы рассмотрим, как это работает, и я оставлю вам решать, подходит ли это для ваших проектов.
Наш предыдущий подход использовал calc(1.3rem + 3.6vw), который будет увеличиваться при увеличении ширины области просмотра и уменьшаться при ее уменьшении. Теперь мы хотим сделать font-size равным 36px при ширине области просмотра 414px и ровно 76px при ширине области просмотра 1440px.
Формула с использованием диапазона ширины области просмотра и размеров шрифта
Для этого мы воспользуемся математической формулой, впервые написанной в 2012 году (насколько я могу судить) Тимом Брауном в сообщении в блоге, чтобы вычислить line-height. Майк Ритмюллер и другие затем применили его к font-size. Позже Тим опубликовал дополнительное объяснение, используя аналогию с замками каналов в 2016 году. Вот формула в функции font-size: calc(, которую мы используем:
Давайте рассмотрим три части формулы. Крайний левый раздел начинается с минимального размера шрифта. Это гарантирует, что результирующий размер шрифта будет не меньше этого значения, если не больше. Затем, игнорируя пока средний раздел, мы можем перейти к последнему разделу справа, чтобы увидеть разницу между максимальным размером шрифта и минимальным размером шрифта. Если мы добавим эту разницу к минимальному размеру шрифта, мы получим максимальный желаемый размер шрифта.
Теперь давайте посмотрим на более сложную среднюю часть, в которой используется ширина области просмотра. Она умножается на разницу в размере шрифта. Если этот множитель равен 0, итоговая формула будет равна минимальному размеру шрифта. А если множитель равен 1, итоговая формула будет равна максимальному размеру шрифта.
Это возможно будет легче увидеть, если мы подставим фактические значения для каждой части формулы. Давайте подставим значения и предположим, что текущая ширина области просмотра будет равна минимальной ширине области просмотра, 414px. (Сначала мы будем использовать пиксели, чтобы упростить синтаксический анализ, а затем, в самом конце, преобразуем в ремы)
Мы получаем 36 пикселей + (0 * 40 пикселей) = 36 пикселей. Это именно то, что мы хотим — при ширине области просмотра 414 пикселей мы хотим, чтобы шрифт был 36 пикселей. Теперь предположим, что текущая ширина области просмотра будет равна максимальной ширине области просмотра, 1440 пикселей:
После того, как мы посчитаем, у нас получится 36 пикселей + (1 * 40 пикселей) = 76 пикселей. Опять же, это то, что мы хотим — при ширине области просмотра 1440 пикселей шрифт будет 76 пикселей. Теперь, преобразовав наши пиксели в ремы, окончательное правило размера шрифта будет выглядеть так:
h1 {
font-size: calc(2.25rem + (((100vw - 20rem) / (90 - 20))) * (4.75 - 2.25));
}
Обратите внимание, что нам нужно удалить единицы отовсюду, кроме начального минимального размера шрифта и числителя множителя области просмотра, чтобы функция calc () работала правильно.
Добавление медиа-запросов для ограничения минимального и максимального размера шрифта
Поскольку формула будет вычислять font-size между нашими контрольными точками от 414px до 1440px, нам нужно использовать медиа-запросы, чтобы заставить наши минимальные и максимальные значения font-size ниже 414px и больше 1440px. Это похоже на то, что мы делали в предыдущем подходе, и будет выглядеть так:
h1 {
font-size: 2.25rem; // 36px
}
@media (min-width: 414px){
h1 {
font-size: calc(2.25rem + (((100vw - 20rem) / (90 - 20))) * (4.75 - 2.25)); // fluidly scale
}
}
@media (min-width: 1440px){
h1 {
font-size: 4.75rem; // 76px
}
}
Вы также можете превратить это в Sass mixin для удобства:
@mixin calc-font-size($min-vw, $max-vw, $min-font-size, $max-font-size){
font-size: calc(#{$min-font-size}rem + ((100vw - #{$min-vw}rem) / (#{$max-vw} - #{$min-vw})) * (#{$max-font-size} - #{$min-font-size}));
}
h1 {
font-size: 2.25rem;
}
@media (min-width: 414px){
h1 {
@include calc-font-size(25.875, 90, 2.25, 4.75);
}
@media (min-width: 1440px){
h1 {
font-size: 4.75rem;
}
}
Вы можете посмотреть живую демонстрацию этой формулы гибкой типографики здесь.
Этот последний подход с гибкой типографикой дает нам высочайший уровень контроля над масштабированием font-size. Однако вполне возможно, что это будет сложнее, чем требуется. Чтобы полностью разобраться в математике, требуется немалое количество времени, что может усугубить разочарование разработчика, впервые увидевшего это правило CSS.
Вывод
Если бы мне пришлось выбрать один подход для моих собственных нужд веб-разработки, я бы, вероятно, выбрал более простой гибкий подход без медиа-запросов. На мой взгляд, трудно превзойти возможность установить font-size с помощью всего одной строчки CSS:
h1 {
font-size: calc(1.3rem + 3.6vw);
}
Несмотря на то, что нет явных минимальных или максимальных ограничений на font-size, если вы больше опираетесь на rems, а не на часть vw в инструкции calc(), вы не получите слишком маленький размер шрифта или слишком большой.
От автора: Я надеюсь, что эта статья помогла объяснить некоторые возможные способы работы с адаптивной и плавной типографикой. Я также пишу уроки по разработке в своем блоге Coder-Coder.com.
vnikitinsky.medium.com/элементы-адаптивной-типографики-6a5fd6c2611d
Оставьте первый комментарий