Адаптивная и плавная типографика с использованием базовых функций CSS.

Miriam Suzanne

Опубликовано: 16 декабря 2025 г.

Адаптивный веб-дизайн — это подход к созданию веб-сайтов, которые хорошо выглядят и корректно функционируют в различных браузерах, при разных размерах области просмотра, на разных устройствах и с учетом предпочтений пользователей. Применительно к типографике, ключевой задачей часто является корректировка font-size в зависимости от ширины браузера, что также может влиять на такие параметры отступов, как line-height и margin .

Дизайнерам логично учитывать доступное пространство в браузере и соответствующим образом корректировать типографику. Также важно помнить, что у разных пользователей будут разные потребности font-size на разных устройствах, в зависимости от личных обстоятельств, находящихся вне вашего контроля или осведомленности. Поэтому опасно делать что-либо, что лишает пользователя контроля над конечным результатом. Существует два основных фактора, которые люди могут использовать для влияния на размер шрифта во время просмотра веб-страниц:

• Предоставление возможности задать font-size по умолчанию для всех веб-сайтов.
• Увеличение или уменьшение масштаба для каждого объекта в отдельности.

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

Установите базовый font-size в соответствии с предпочтениями пользователя.

Первый шаг при определении любой типографики в интернете — это согласование начального размера шрифта на основе font-size пользователя. Этот размер будет использоваться для большей части текста на странице, а также в качестве основы для других размеров шрифта, например, для заголовков. Самый простой вариант — предоставить пользователю полный контроль, используя 1em , без каких-либо корректировок. Если вы не задаёте никаких других значений font-size , 1em будет соответствовать предпочтениям пользователя. С другой стороны, установка font-size в пикселях или других абсолютных единицах (и даже относительно области просмотра) полностью переопределит предпочтения пользователя, чего следует избегать.

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

Вариант первый: рассчитать множитель на основе предположений.

Один из распространенных компромиссов — задать скорректированный font-size в единицах em или % относительно font-size по умолчанию, установленного пользователем. Как правило, этот подход исходит из предположения, что браузеры предоставляют размер по умолчанию 16px , и большинство пользователей оставят это значение. Если вы считаете, что размер шрифта 20px лучше подойдет для вашего сайта, то font-size 1.25em или 125% обычно даст желаемый результат:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

Здесь также можно использовать функцию calc() для отображения математических вычислений, но вам все равно нужно знать формулу — целевой размер, деленный на ожидаемый размер, умноженный на 1em :

html {
  font-size: calc(20 / 16 * 1em);
}

Пользователи с более крупными или меньшими предпочтениями смогут повлиять на результат, поскольку ваши значения по умолчанию теперь относительны к их предпочтениям — в данном случае это 1,25 умноженное на их предпочтения. Однако может показаться странным, если и вы, и пользователь запрашиваете значения по умолчанию 20px , а результат составляет 25px — их скорректированное значение по умолчанию, снова умноженное на 1,25 — размер, который никто не запрашивал.

Второй вариант: пусть clamp() выполнит работу.

Более тонкий подход включает в себя функции сравнения CSS без каких-либо математических вычислений! Вместо того чтобы предполагать, что 1em равно 16px , и выполнять ненадежные преобразования из px в em , можно рассматривать 1em как переменную, которая указывает на предпочтения пользователя. Независимо от того, какое значение в пикселях представляет 1em , параметр font-size со значением max(1em, 20px) всегда вернет большее из двух значений: ваших предпочтений в дизайне ( 20px ) и предпочтений пользователя ( 1em ). Это позволяет пользователю выбирать более крупные, но не более мелкие размеры шрифта.

Используя функцию clamp() , вы можете позволить пользователю масштабировать шрифт в обоих направлениях, если его предпочтительный размер слишком сильно отличается от выбранного вами значения по умолчанию. Например, font-size clamp(1em, 20px, 1.25em) по умолчанию будет равен 20px , если это значение больше, чем значение по умолчанию пользователя, но не более чем на 125% от этого значения.

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

Установив это значение в качестве корневого font-size для html элемента, вы теперь можете ссылаться на 1rem в любом месте сайта в качестве согласованного базового размера.

Добавить адаптивность

Чтобы font-size адаптировался к размеру области просмотра, можно добавить контрольные точки для медиа-запросов (или запросов контейнера). Например, можно изменять значение параметра clamped в зависимости от размера экрана:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

Другой вариант — добавить единицы измерения области просмотра или контейнера к статическому базовому значению:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

Единицы измерения vw (ширина области просмотра) или vi (размер встроенной области просмотра) представляют 1% от общей ширины области просмотра — части браузера, которая отображает ваш сайт. Аналогично, единицы измерения cqw и cqi представляют 1% от размера встроенного контейнера на странице. Для получения более подробной информации ознакомьтесь с демонстрацией запросов контейнеров и единиц измерения .

Этот подход часто называют « гибкой типографикой» , поскольку изменение font-size остается постоянным в диапазоне ширины области просмотра, а не резко меняется от одного значения к другому при переходе между медиатеками или контейнерами. Однако не стоит отвлекаться на плавность перехода — это различие обычно заметно только при тестировании, если вы плавно регулируете размер окна. Пользователи редко (если вообще когда-либо) замечают этот эффект. Хотя пользователи могут регулярно менять размер окна браузера или уровень масштабирования, им пришлось бы делать эти корректировки медленно и плавно, чтобы заметить разницу между точкой останова и единицей области просмотра. Это влияет только на переход, а не на результат после изменения размера.

Главное преимущество адаптивного изменения размера шрифта заключается в том, что оно устраняет необходимость вручную рассчитывать или указывать контрольные точки, обеспечивая интерполированный результат для любого заданного размера. Вам нужно только установить начальную точку ( 16px ) и скорость изменения ( 0.25vw обеспечит увеличение font-size 0.25px на каждые 100px увеличения ширины области просмотра), а также, возможно, минимальное и максимальное значения. Когда ширина области просмотра составляет 1000px , font-size будет равен 16px + 2.5px или 18.5px — но этот расчет полностью выполняется браузером. Именно такой подход используется в демонстрации, где единицы cqi используются для отображения адаптивности на основе контейнера. При использовании на корневом элементе ( html ), где нет определенного контейнера, единицы cqi по-прежнему относятся к размеру области просмотра.

Если вы предпочитаете мыслить категориями заданного font-size при заданном размере области просмотра, рассмотрите более прямой подход с использованием медиа-запросов, который немного понятнее. Ситуация усложняется, когда вы пытаетесь рассчитать единицы измерения области просмотра на основе предполагаемых контрольных точек. Многие делают это, копируя и вставляя значения из сторонних инструментов, но полученный код гораздо сложнее понять или изменить напрямую. В целом, в CSS лучший вариант — тот, который наиболее четко выражает ваши намерения.

Внимание: Изменения в области просмотра не всегда означают одно и то же!

Хотя медиазапросы и единицы измерения vi применяются по-разному, оба подхода основаны на одном и том же измерении ширины области просмотра. Если ширина области просмотра составляет 600px , то 100vw будет равно 600px , и будут применены стили внутри медиазапроса ( width > 500px ).

Но что значит ширина области просмотра 600px ? В действительности, пиксель — это не один фиксированный размер с единым значением во всех ситуациях. Хотя кажется естественным, что область просмотра с меньшим количеством пикселей находится на меньшем экране (например, на телефоне) или в узком окне браузера, это не является надежным предположением. На самом деле, увеличение масштаба и уменьшение размера окна браузера будут одинаково влиять на измеренную ширину области просмотра. Одно действие (увеличение масштаба) изменяет размер пикселя, а другое (изменение размера) изменяет размер самого браузера — но оба изменяют количество пикселей по ширине браузера. В результате измерения ширины области просмотра мы получаем соотношение между текущим размером в пикселях и текущим размером окна браузера.

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

Такое несоответствие делает адаптивную типографику ненадежной. Если размер текста изменяется только в зависимости от области просмотра или контейнера, то масштабирование пользователем не будет иметь никакого эффекта!

Изменение значения единицы измерения относительно области просмотра на 1vw или 100vw изменит точное соотношение между размером шрифта и областью просмотра. Шрифт с 1vw будет увеличиваться 1px на каждые 100px размера области просмотра, в то время как шрифт с 100vw будет иметь точно такой же размер, как и область просмотра. Вы можете изменить это значение, чтобы шрифт увеличивался медленнее или быстрее относительно размера окна браузера. Но любое значение относительно области просмотра останется постоянным при увеличении или уменьшении масштаба пользователем — оно будет полностью не реагировать на действия пользователя.

Аналогично, ни 1vw , ни 100vw не учитывают font-size по умолчанию для пользователя.

Использование единиц измерения относительно области просмотра или контейнера для font-size всегда неудобен для пользователя. Если font-size полностью адаптируется к контейнеру, он не может также адаптироваться к настройкам или изменениям пользователя по умолчанию. Даже при самых благих намерениях и мерах предосторожности следует избегать лишения пользователей возможности окончательного контроля font-size . Это не только ухудшает пользовательский опыт, но и может нарушать рекомендации по доступности, которые часто требуются по закону. В частности, раздел 1.4.4 Руководства по доступности веб-контента требует, чтобы «размер текста можно было изменять без вспомогательных технологий до 200 процентов».

Как обеспечить адаптивность значений font-size к масштабированию

Чтобы font-size области просмотра, реагировал на масштабирование, это значение должно применяться в качестве корректировки к какому-либо другому значению. Это возможно в CSS с помощью функции calc() или любой другой математической функции, принимающей вычисления, например, min() , max() и clamp() . font-size calc(16px + 1vw) основан как на размере области просмотра, так и на текущем (относительном к масштабированию) размере пикселя. Хотя единица vw не будет изменяться при масштабировании, базовое значение будет изменяться.

В результате font-size зависит как от размера области просмотра, так и от настроек масштабирования пользователя. Если пользователь увеличивает масштаб до 200% , базовое значение будет вдвое больше ( 32px ), в то время как адаптивное значение останется неизменным. При размере области просмотра 1000px font-size изначально составит 16px + 10px = 26px , но при масштабировании на 200% размер шрифта увеличится всего до 42px , что составляет чуть более 160% . Это может показаться не такой уж серьезной проблемой, но чем больше font-size зависит от размера области просмотра, тем менее эффективным становится масштабирование.

На небольших экранах font-size будет определяться в основном базовым значением в пикселях и хорошо реагировать на масштабирование. Но на больших экранах размер области просмотра становится большей долей отрисовываемого размера шрифта, что делает масштабирование менее эффективным. Это становится особенно опасным, когда масштабирование в 500% (максимальное значение в большинстве браузеров) больше не может обеспечить увеличение размера шрифта на 200%, требуемое WCAG 1.4.4, — но даже до этого момента может быть неприятно, когда масштабирование становится неэффективным.

На левом краю графика ( 0 ширине области просмотра) 500% масштабирование работает с максимальной эффективностью. Однако эта эффективность быстро снижается с увеличением размера окна браузера, и (немасштабируемые) единицы области просмотра становятся более значимым фактором при определении font-size . При ширине окна браузера 2040px максимальное 500% -ное масштабирование позволяет увеличить размер шрифта только 200% . После этого момента 200% -ное эффективное масштабирование шрифта становится невозможным.

Перенеся это вычисление в функцию clamp() с указанием минимальных и максимальных значений, вы можете установить границы, обеспечивающие масштабируемый текст. По словам Максвелла Барвиана :

Если максимальный размер шрифта меньше или равен 2,5-кратному минимальному размеру шрифта, то текст всегда будет соответствовать стандарту WCAG SC 1.4.4, по крайней мере, во всех современных браузерах.

Поскольку запросы @media и @container основаны на тех же измерениях, что и единицы измерения vw и cqw , та же логика применяется и при использовании точки останова для изменения размера шрифта. При слишком значительном увеличении размера масштабирование становится неэффективным. Вы можете поэкспериментировать с взаимодействием этих значений на следующей визуализации:

Как обеспечить адаптивность значений font-size к пользовательским настройкам по умолчанию?

Однако calc(16px + 1vw) по-прежнему не реагирует на настройки шрифта по умолчанию. Для этого можно задать базовое значение — или минимальное и максимальное значения — используя единицы измерения em или rem вместо px . В итоге получается знакомый результат, соответствующий приведенному ниже демонстрационному примеру:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

Обратите внимание, что:

• Для минимального и максимального значений используются единицы измерения em , которые зависят от предпочтений пользователя (и реагируют на масштабирование).
• Дополнительное значение vw сведено к минимуму, чтобы масштабирование не оказывало слишком сильного влияния.
• Максимальный размер ( 1.125em ) значительно меньше минимального ( 1em ), что гарантирует возможность достижения эффективного font-size в 200% .

Типографические шкалы с помощью pow()

В большинстве дизайнов используется более одного размера шрифта! Типографическая шкала описывает соотношение между несколькими размерами шрифта. Это можно выразить как базовый размер и ряд множителей для расчета других размеров. CSS предоставляет встроенную типографическую шкалу относительно ключевого слова medium , которое относится к предпочтительному размеру шрифта пользователя или значению по умолчанию 16px . Полная шкала ключевого слова выглядит следующим образом:

• xx-small : 3/5 (0,6)
• x-small : 3/4 (0,75)
• small : 8/9 (0,89)
• medium : 1 (базовый размер, на который умножаются остальные)
• large : 6/5 (1.2)
• x-large : 3/2 (1,5)
• xx-large : 2/1 (2)
• xxx-large : 3/1 (3)

Эта шкала относительна к значению по умолчанию, установленному пользователем, а не к корневому font-size , поэтому она работает хуже после изменения корневого font-size на вашем сайте. Большинство авторов в итоге создают аналогичную шкалу размеров шрифтов с пользовательскими свойствами — иногда используя те же названия размеров футболок, а иногда предпочитая последовательность шагов вверх и вниз по математической шкале. Существует множество сторонних инструментов для генерации таких шкал на основе распространенных соотношений, в основном заимствованных из западной музыкальной гаммы:

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

Но вам не понадобятся сторонние инструменты для создания собственной шкалы в CSS — новая функция pow() может сгенерировать вашу шкалу за вас, используя 1rem в качестве базового размера!

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

Для поддержания единообразия шкалы не обязательно использовать целые шаги. На самом деле, в стандартной 12pt типографской шкале используется примерно 5 дробей на шаг. В то время как для больших размеров здесь используются целые шаги, для маленьких размеров масштабирование происходит медленнее, чем для маленьких.

CSS-миксины и функции позволяют еще больше упростить эту логику, а другие встроенные инструменты, такие как progress() упрощают создание шкал, плавно изменяющихся от одного значения к другому. Но эти возможности выходят за рамки данной демонстрации.

Учитывайте размер контейнеров на странице.

Все эти вычисления можно выполнить в запросах контейнера, используя единицу cqi вместо vw или vi , но также полезно оставить заданный пользователем font-size на html элементе, чтобы каждый контейнер типизации мог ссылаться на это пользовательское предпочтение как 1rem . В демонстрации вы увидите, что вся шкала шрифта применяется к body , а не к корневому html элементу для глобального шрифта, а затем сбрасывается в зависимости от размера контейнера для каждого элемента с атрибутом type-set .

В случае с размерами шрифта, зависящими от размера контейнера, всегда приходится идти на компромисс. Вы получаете более гибкий размер шрифта для каждого элемента в контексте, но за счет единообразия на всей странице. Что для вас важнее, будет зависеть от специфики вашего сценария использования. И помните, что сама по себе гибкая типографика — это компромисс, делающий элементы управления пользователя, такие как масштабирование, менее эффективными!

Хотя адаптивная типографика и типографические шкалы — отличные инструменты для дизайнеров, нет необходимости усложнять себе жизнь, если в этом нет необходимости. Стандартные настройки пользователя и встроенная шкала шрифтов также являются прекрасным вариантом! Но если вы всё же выберете адаптивную (или гибкую) типографику, обязательно протестируйте, как результаты будут выглядеть при различных стандартных настройках пользователя и параметрах масштабирования. Удачи!