Как я поступаю с размером шрифта

Как я поступаю с размером шрифта

От автора: у меня непростые отношения со шрифтами. Важно не только то, какой шрифт использовать, но и то, как подобрать их размер для любого заданного размера экрана. Для меня это важно потому, что часто замечаю, как увеличиваю текст с помощью действий ⌘ + или просто переключаюсь в режим чтения Safari для лучшего чтения. Я часто нахожу, что контент слишком мал для меня, и стараюсь не допускать подобного для людей вроде меня с ухудшающимся зрением.

Я думаю о контексте, а не о ширине области просмотра

Один из способов подумать о размерах шрифтов — это учитывать не только устройство, но и то, как оно используется пользователем. Это не предписание и не исчерпывающее решение, но я имею в виду следующее:

Настольный компьютер / ноутбук: вероятно, контент просматривается сидя (или стоя) за столом на большом экране, находящемся примерно в 24–36 дюймов от лица. Если предположить, что хорошая эргономика — это достоинство, пользователь, скорее всего, откинется назад (если только он не стоит за столом).

Планшет: Возможно сидит, может быть, даже ноги подняты, на них опирается планшет. Мы смотрим с расстояния примерно 14-20 дюймов от лица.

Телефон: Давайте остановимся на этом и предположим, что пользователь стоит прямо (не сгорбившись шеей вниз). Не удивлюсь, если экран будет находиться где-то на расстоянии 10-16 дюймов от лица.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Я задумываюсь об этом, потому что постоянно меняю свою естественную позу, чтобы читать контент. Если текст на моем компьютере слишком мал, я наклоняюсь вперед, чтобы рассмотреть его поближе. Если текст на моем телефоне слишком велик, мне хочется, чтобы у меня были способности, как у Инспектора Гаджета, чтобы держать экран как можно дальше. У меня нет абсолютно никаких доказательств того, что именно так вы или другие люди себя чувствуете при чтении контента в сети, но это то, на чём я обосновывал свои решения о размере шрифта.

Я использую clamp() для гибкого определения размеров

Когда дело доходит до размеров шрифта, меня и медиа-запросы связывают давние отношения любви и ненависти. Мне нравится, что я могу регулировать размер, когда область просмотра достигает определенного порога, но мне неприятно, что я пишу уйму медиа-запросов, чтобы получить нужный размер.

Потом пришёл calc(). Это позволило мне использовать шаблон, который стал популярным для автоматического масштабирования размеров шрифта. Идея состоит в том, что вы определяете минимальный размер шрифта для элемента html, максимальный размер шрифта в медиа-запросе, который установлен для большего экрана, а затем объявляете размер шрифта в еще одном медиа-запросе, который находится между базовым элементом html и медиа-запросом для большого экрана. Этот «средний» медиа-запрос calc() — в соответствии со своим названием — вычисляет размеры между двумя крайними значениями.

Когда я впервые увидел это, я был поражен. Но потом пришёл clamp(). Он делает аналогичные вещи, но вообще без медиа-запросов. Например:

Видите, что? Теперь шрифт остается в диапазоне от 24 до 26 пикселей. Среднее значение — это «идеальный» размер, и для него установлено число, умноженное на некий коэффициент, что позволяет браузеру вычислять размеры шрифта в заданном диапазоне.

Каждый раз, когда я могу сократить фрагмент кода на ~ 75%, это здорово.

Я делаю переменные из каждого значения

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

Я использую их в своем стеке размеров шрифтов. Начну с базового размера шрифта:

Все идет нормально. Затем я создаю больше размеров на основе этого:

Все еще хорошо? Мне нравится использовать их в качестве утилит на случай, если мне понадобится определенный размер шрифта, но я хочу, чтобы он согласовывался со всем остальным.

Я использую переменную для масштабирования

Особенность гибкой типографики clamp() — помимо отсутствия полной поддержки браузерами — заключается в том, что идеальным (или средним) значением должна быть адаптивная единица. Таким образом, вычисленное значение изменяется в зависимости от контейнера, содержащего текст, и мы ограничиваем его, чтобы значение никогда не выходило за границы диапазона.

Мне нравится строить вещи с помощью единиц области просмотра (vw) только потому, что они действительно соответствуют размеру браузера. Вроде как произвольно, какое значение vw использовать, но я думаю так только потому, что плохо разбираюсь в математике. Я беру, скажем 10vw, красивое круглое число и делаю его переменной, которую могу использовать в качестве множителя, который преобразует фиксированное значение в пикселях для идеального размера в нужную единицу.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мне нравится, 10vw потому что это то же самое, что сказать 10% ширины браузера. Это легче вычислить для таких математических болванов, как я.

Я ограничиваю переменные

Теперь вместо необработанных чисел в элементе, например:

… я могу поместить туда свои переменные:

Таким образом, получаю несколько преимуществ:

Я могу повторно использовать эти переменные в любое время, когда они мне понадобятся.

Я могу обновить переменные в одном месте.

Я могу переопределить любую из переменных в элементе, если мне нужно что-то настроить для конкретного случая использования.

Я могу наслаждаться хорошо масштабированным размером шрифта при любом размере экрана.

Это лучшее решение? Возможно нет. Честно говоря, я обычно поднимаю брови, когда вижу сумасшедшие вычисления с субъективно названными переменными. Для меня они имеют смысл, но мне пришлось бы оставить подробные комментарии, если бы я когда-либо планировал передать код кому-то другому. Я скучаю по тем временам, когда значение font-size обычно было однозначным.

В любом случае преимущества улучшенного взаимодействия с разработчиками и пользователей перевешивают ностальгию по «более простым» дням.

Это не стек шрифтов

Нет, нет, нет. Все, что я здесь делаю, это показываю, как меняю размер шрифта. Если бы мы говорили о «стеке шрифтов» в традиционном смысле, мы бы имели в виду серию шрифтов в font-family, например:

Но по мере того, как веб-типографика становится все более и более продвинутой, «стек шрифтов» может также использоваться для обозначения общей стратегии читаемости, включая шрифты, резервные шрифты, размеры шрифтов, высоту строк и другие факторы, влияющие на «стек».

А как делаете вы?

Серьезно, что у вас с вашими размерами шрифта? Все, чем я здесь поделился, просто адаптировано к моим потребностям, и я был бы удивлен, если бы кто-нибудь еще заявил, что для него, это работает идеально. Я хочу посмотреть, что делаете вы!

Автор: Geoff Graham

Источник: geoffgraham.me

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

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.