От автора: у меня непростые отношения со шрифтами. Важно не только то, какой шрифт использовать, но и то, как подобрать их размер для любого заданного размера экрана. Для меня это важно потому, что часто замечаю, как увеличиваю текст с помощью действий ⌘ + или просто переключаюсь в режим чтения Safari для лучшего чтения. Я часто нахожу, что контент слишком мал для меня, и стараюсь не допускать подобного для людей вроде меня с ухудшающимся зрением.
Я думаю о контексте, а не о ширине области просмотра
Один из способов подумать о размерах шрифтов — это учитывать не только устройство, но и то, как оно используется пользователем. Это не предписание и не исчерпывающее решение, но я имею в виду следующее:
Настольный компьютер / ноутбук: вероятно, контент просматривается сидя (или стоя) за столом на большом экране, находящемся примерно в 24–36 дюймов от лица. Если предположить, что хорошая эргономика — это достоинство, пользователь, скорее всего, откинется назад (если только он не стоит за столом).
Планшет: Возможно сидит, может быть, даже ноги подняты, на них опирается планшет. Мы смотрим с расстояния примерно 14-20 дюймов от лица.
Телефон: Давайте остановимся на этом и предположим, что пользователь стоит прямо (не сгорбившись шеей вниз). Не удивлюсь, если экран будет находиться где-то на расстоянии 10-16 дюймов от лица.
Я задумываюсь об этом, потому что постоянно меняю свою естественную позу, чтобы читать контент. Если текст на моем компьютере слишком мал, я наклоняюсь вперед, чтобы рассмотреть его поближе. Если текст на моем телефоне слишком велик, мне хочется, чтобы у меня были способности, как у Инспектора Гаджета, чтобы держать экран как можно дальше. У меня нет абсолютно никаких доказательств того, что именно так вы или другие люди себя чувствуете при чтении контента в сети, но это то, на чём я обосновывал свои решения о размере шрифта.
Я использую clamp() для гибкого определения размеров
Когда дело доходит до размеров шрифта, меня и медиа-запросы связывают давние отношения любви и ненависти. Мне нравится, что я могу регулировать размер, когда область просмотра достигает определенного порога, но мне неприятно, что я пишу уйму медиа-запросов, чтобы получить нужный размер.
Потом пришёл calc(). Это позволило мне использовать шаблон, который стал популярным для автоматического масштабирования размеров шрифта. Идея состоит в том, что вы определяете минимальный размер шрифта для элемента html, максимальный размер шрифта в медиа-запросе, который установлен для большего экрана, а затем объявляете размер шрифта в еще одном медиа-запросе, который находится между базовым элементом html и медиа-запросом для большого экрана. Этот «средний» медиа-запрос calc() — в соответствии со своим названием — вычисляет размеры между двумя крайними значениями.
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; }
}
Когда я впервые увидел это, я был поражен. Но потом пришёл clamp(). Он делает аналогичные вещи, но вообще без медиа-запросов. Например:
h1 { font-size: clamp(24px, calc(24px * 1vw), 36px);
}
Видите, что? Теперь шрифт остается в диапазоне от 24 до 26 пикселей. Среднее значение — это «идеальный» размер, и для него установлено число, умноженное на некий коэффициент, что позволяет браузеру вычислять размеры шрифта в заданном диапазоне.
Каждый раз, когда я могу сократить фрагмент кода на ~ 75%, это здорово.
Я делаю переменные из каждого значения
Пользовательские переменные — это Вещь с большой буквы, которой мне не хватало в CSS, что заставляло меня стремиться к Sass. Я все еще использую Sass для таких вещей, как вложение, например, но пишу в этих файлах намного больше чистого CSS, чем когда-либо.
Я использую их в своем стеке размеров шрифтов. Начну с базового размера шрифта:
--text-size-base: 18px;
Все идет нормально. Затем я создаю больше размеров на основе этого:
--text-size-base: 18px; --text-size-tiny: calc(var(--text-size-base) - 6); --text-size-small: calc(var(--text-size-base) - 4); --text-size-medium: var(--text-size-base); /* Takes the base size */ --text-size-big: calc(var(--text-size-base) + 4); --text-size-large: calc(var(--text-size-base) + 6); --text-size-huge: calc(var(--text-size-base) + 12);
Все еще хорошо? Мне нравится использовать их в качестве утилит на случай, если мне понадобится определенный размер шрифта, но я хочу, чтобы он согласовывался со всем остальным.
Я использую переменную для масштабирования
Особенность гибкой типографики clamp() — помимо отсутствия полной поддержки браузерами — заключается в том, что идеальным (или средним) значением должна быть адаптивная единица. Таким образом, вычисленное значение изменяется в зависимости от контейнера, содержащего текст, и мы ограничиваем его, чтобы значение никогда не выходило за границы диапазона.
Мне нравится строить вещи с помощью единиц области просмотра (vw) только потому, что они действительно соответствуют размеру браузера. Вроде как произвольно, какое значение vw использовать, но я думаю так только потому, что плохо разбираюсь в математике. Я беру, скажем 10vw, красивое круглое число и делаю его переменной, которую могу использовать в качестве множителя, который преобразует фиксированное значение в пикселях для идеального размера в нужную единицу.
--text-size-scaler: 10vw;
Мне нравится, 10vw потому что это то же самое, что сказать 10% ширины браузера. Это легче вычислить для таких математических болванов, как я.
Я ограничиваю переменные
Теперь вместо необработанных чисел в элементе, например:
h1 { font-size: clamp(24px, calc(24px * 1vw), 36px);
}
… я могу поместить туда свои переменные:
h1 { font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}
Таким образом, получаю несколько преимуществ:
Я могу повторно использовать эти переменные в любое время, когда они мне понадобятся.
Я могу обновить переменные в одном месте.
Я могу переопределить любую из переменных в элементе, если мне нужно что-то настроить для конкретного случая использования.
Я могу наслаждаться хорошо масштабированным размером шрифта при любом размере экрана.
Это лучшее решение? Возможно нет. Честно говоря, я обычно поднимаю брови, когда вижу сумасшедшие вычисления с субъективно названными переменными. Для меня они имеют смысл, но мне пришлось бы оставить подробные комментарии, если бы я когда-либо планировал передать код кому-то другому. Я скучаю по тем временам, когда значение font-size обычно было однозначным.
В любом случае преимущества улучшенного взаимодействия с разработчиками и пользователей перевешивают ностальгию по «более простым» дням.
Это не стек шрифтов
Нет, нет, нет. Все, что я здесь делаю, это показываю, как меняю размер шрифта. Если бы мы говорили о «стеке шрифтов» в традиционном смысле, мы бы имели в виду серию шрифтов в font-family, например:
font-family: "Alfa Slab One", Helvetica, sans-serif;
Но по мере того, как веб-типографика становится все более и более продвинутой, «стек шрифтов» может также использоваться для обозначения общей стратегии читаемости, включая шрифты, резервные шрифты, размеры шрифтов, высоту строк и другие факторы, влияющие на «стек».
А как делаете вы?
Серьезно, что у вас с вашими размерами шрифта? Все, чем я здесь поделился, просто адаптировано к моим потребностям, и я был бы удивлен, если бы кто-нибудь еще заявил, что для него, это работает идеально. Я хочу посмотреть, что делаете вы!
Автор: Geoff Graham
Источник: geoffgraham.me
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
