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

IT-блоги Как я поступаю с размером шрифта

WebForMySelf 21 апреля 2021 г. Андрей


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

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

Источник: WebForMySelf

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

CSS 3 css

Читайте также


CSS-свойство position: разбираемся с позиционированием элементов

Разработка techrocks.ru 11 мая 2021 г. 15:58
Если вы хотите действительно хорошо овладеть CSS, очень важно разобраться в свойстве position. Запись CSS-свойство position: разбираемся с позиционированием элементов впервые появилась Techrocks.... читать далее
Обучение primary верстка

Games Every Programmer Should Play

Разработка dev.to 11 мая 2021 г. 15:29
Programming games are often overlooked as a way to learn a new programming language or improve your knowledge of an existing one. Here are few programming games that are worth a try. CodinGame Visit CodinGame here - https://www.codingame.com/ Codi...... читать далее
beginners watercooler codenewbie tutorial

Разработка dev.to 11 мая 2021 г. 14:04

1. Quiz Application Choose a topic that interests you and create a dynamic quiz using JavaScript. Keep track of the users score and notify them which answers are correct. As an added challenge add a timer to each question. 2. Form Validat...... читать далее

codenewbie javascript programming webdev

Разработка dev.to 11 мая 2021 г. 12:18

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on Twitter for more information about web development and how to improve as a developer. This article was first published on my Blog Everything st...... читать далее

motivation beginners webdev

Разработка dev.to 11 мая 2021 г. 11:43

by author Mads Brodt Hey, and welcome to this tutorial! If you're here, you've probably heard of Svelte before and wanna know what all the fuzz is about. Luckily I'm here to walk you through the basic concepts of Svelte, by building a real-world pro...... читать далее

javascript svelte tutorial

Разработка techrocks.ru 11 мая 2021 г. 10:52

React очень лоялен к тому, что и как мы пишем свой код. В этой статье вы найдете несколько практических советов для улучшения качества кода. Запись 21 хорошая практика для очень хороших React-проектов впервые появилась Techrocks.... читать далее

Обучение javascript primary

Популярные темы

новости (401) javascript (383) ux (380) design (347) headline (300) python (286) devops (251) ubuntu (233) ux-design (225) tutorial (215) security (210) programming (206) новость (204) web dev (196) webdev (159) working in tech (152) seo (152) дайджесты вакансий от new.hr (150) статьи (143) ui (135) testing roundup (122) software testing (121) user-experience (116) css (113) java (113) react (109) дизайн (102) google (100) product-design (94) игровые проекты (90) beginners (88) ui-design (88) design-thinking (85) technology (83) php (82) productivity (81) прочее (80) primary (80) движки и конструкторы игр (78) api5 (76) технологии (76) cloud (76) job hunting (75) бизнес (73) windows 10 (73) docker (71) laravel (70) debian (68) bash programming (68) uncategorized (68) tutorials (67) hardware (67) android (66) news (60) мероприятия (60) linux mint (59) обучение (58) kubernetes (56) работа (56) linux (55) games (54) art (54) networking (53) ios (53) machine learning (53) angular (52) инструкции (52) español (51) web design and applications (50) ux-research (50) case-study (50) aws (50) covid-19 (50) разработчики (50) api (49) обзоры (49) cybersecurity (49) data (49) apple (49) chrome (48) engineering (48) html (48) inspiration (47) турбо-страницы (47) git (46) linux commands (46) job skills (46) web (46) home page stories (45) publication (45) typescript (45) dotnet (44) node (44) mobile (44) powershell (44) c++ (43) навыки алисы (43) tools (43) testing (41) mysql mariadb (41)