CSS-live.ru

Руководство по размеру текста для отзывчивого дизайна

Перевод статьи A Responsive Guide to Type Sizing с сайта blog.cloudfour.com, опубликовано на css-live.ru с разрешения автора — Эрика Джанга.

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

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

Расчет пропорций текста по шкале соотношений

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

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

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

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

Градация Формула Результат
+3  40 × 2 80   
+2  20 × 2 40   
+1  10 × 2 20   
 0  нет 10   
−1  10 ÷ 2  5   
−2   5 ÷ 2  2.5 
−3 2.5 ÷ 2  1.25

Пример с базовым значением 10 и коэффициентом 2

Можно связать каждую градацию в последовательности и с тем, сколько раз мы умножали или делили базовую величину на коэффициент:

Градация Формула Результат
+3 10 × 2 × 2 × 2 80   
+2 10 × 2 × 2     40   
+1 10 × 2         20   
 0 нет 10   
−1 10 ÷ 2          5   
−2 10 ÷ 2 ÷ 2      2.5 
−3 10 ÷ 2 ÷ 2 ÷ 2  1.25

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

Золотое сечение (1,618)

Малая терция (1,2)

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

modularscale-ratios_compared

Сравнение шкал с коэффициентами 1,618 и 1,2 на modularscale.com

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

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

Градация Размер шрифта Результат
 0   1.0em
Abcdefg
+1   1.2em
Abcdefg
+2  1.44em
Abcdefg
+3 1.728em
Abcdefg
+4 2.074em
Abcdefg
+5 2.488em
Abcdefg

Шкала с малой терцией (1.2) при базовом размере 1em

С коэффициентом 1.2 — малая терция — размеры в ряду увеличиваются постепенно, без скачков. Все они нормально выглядят на маленьких экранах и при этом позволяют четко различать элементы разных уровней важности. Даже на 5-й градации размера текст вмещает приемлемое число символов на строку, так что его вполне можно использовать. Всё это указывает на то, что этот коэффициент и нужно выбрать для пропорций 1 текста на маленьких экранах.

Пускаем шкалу в дело

Когда мы выяснили, какая шкала лучше подходит для нашего проекта, пора применить ее на деле. В CSS это можно сделать такими способами:

  1. Скопировать и вручную расставить числа в значения всех нужных свойств.
  2. Задействовать препроцессоры вроде Sass, в которых есть встроенные математические функции.
  3. Воспользоваться стандартной функцией calc() в самом CSS.

Примеры далее используют последний вариант, а за поддержку calc() и var() в браузерах там отвечает PostCSS. Если вам ближе другой инструмент для работы с CSS, можете воспользоваться его синтаксисом 2 для переменных и математических операций, и проделать в нем те же действия.

Если шкала соотношений будет использоваться для чего-то посложнее, стоит обратить внимание на эти плагины для PostCSS или Sass:

Они позволяют получать значения масштаба в более аккуратном синтаксисе, чем у calc(), а также могут работать с несколькими значениями base и ratio одновременно.

Настройка переменных

Прежде всего надо определиться со значениями переменных ratio и base, от которых многое зависит в логике шкалы:

:root {
  --ratio: 1.2;
  --base: 1;
  --base-em: calc(var(--base) * 1em);
  --base-px: calc(var(--base) * 16px);
}

Здесь base задается тремя разными свойствами. Это позволяет выбирать между разными единицами измерения (или безразмерной величиной), когда потребуется.

Затем нужно задать тот набор градаций, которым вы, скорее всего, будете пользоваться:

:root {
  --ms0: 1;
  --ms1: var(--ratio);                    /* 1.2   */
  --ms2: calc(var(--ratio) * var(--ms1)); /* 1.44  */
  --ms3: calc(var(--ratio) * var(--ms2)); /* 1.728 */
  --ms4: calc(var(--ratio) * var(--ms3)); /* 2.074 */
  --ms5: calc(var(--ratio) * var(--ms4)); /* 2.488 */
  --ms6: calc(var(--ratio) * var(--ms5)); /* 2.986 */
  --ms7: calc(var(--ratio) * var(--ms6)); /* 3.583 */
}

Взяв этот ряд коэффициентов, можно умножать их на значение базовой величины, получая фактические значения шкалы:

font-size: calc(var(--base-em) * var(--ms1)); /* 1.2em  */
font-size: calc(var(--base-em) * var(--ms2)); /* 1.44em */

Установка размеров по умолчанию

Браузерный размер по умолчанию для шрифта в сочетании с коэффициентом 1.44 для line-height кажется подходящим вариантом для основного текста:

body {
  font-size: calc(var(--base-em) * var(--ms0));
  line-height: calc(var(--base) * var(--ms2));
}

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

h6 { font-size: calc(var(--base-em) / var(--ms1)); }
h5 { font-size: calc(var(--base-em) * var(--ms0)); }
h4 { font-size: calc(var(--base-em) * var(--ms1)); }
h3 { font-size: calc(var(--base-em) * var(--ms2)); }
h2 { font-size: calc(var(--base-em) * var(--ms3)); }
h1 { font-size: calc(var(--base-em) * var(--ms4)); }

Кроме размера шрифта для заголовков, надо подумать и о значениях line-height для них.

Один из чаще всего упускаемых из виду моментов во фронтенд-разработке — line-height многострочных заголовков. Они часто ну слишком уж огромные.
— Мэтт Стоу (@stowball) 4 декабря 2015

В случае многострочных заголовков значение на одну ступень шкалы ниже может оказаться более удобным для чтения:

h3, 
h2 { line-height: calc(var(--base) * var(--ms1)); }
h1 { line-height: calc(var(--base) * var(--ms0)); }

Такие значения по умолчанию для основного текста и заголовков образуют отчетливую визуальную иерархию, которая хорошо выглядит на маленьких экранах:

modularscale-ratio_in_use1

Шкала с коэффициентом 1.2 при отображении контента на экране 320×480

Добавочные возможности шкалы, когда нужно усилить визуальное различие размеров

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

@media (min-width: 480px) {
  html { font-size: calc(var(--base-px) * var(--ms1)); }
}

Увеличение шрифта для всего сайта, как в этом примере — несложный практический прием такой регулировки. Хотя такой подход общеизвестен, стоит отметить, что даже в таких небольших доработках может здорово пригодиться шкала. Можно не увеличивать размер на сколько-то пикселей или процентов наугад, а определить это новое значение по всё той же шкале.

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

@media (min-width: 768px) {
  h3 { font-size: calc(var(--base-em) * var(--ms3)); }
  h2 { font-size: calc(var(--base-em) * var(--ms4)); }
  h1 { font-size: calc(var(--base-em) * var(--ms5)); }
}
 
@media (min-width: 1024px) {
  h2 { font-size: calc(var(--base-em) * var(--ms5)); }
  h1 { font-size: calc(var(--base-em) * var(--ms6)); }
}
 
@media (min-width: 1360px) {
  h1 { font-size: calc(var(--base-em) * var(--ms7)); }
}

Благодаря этим маленьким хитростям то, как далеко вверх по шкале смогут забраться ваши заголовки, будет определяться шириной окна браузера:

See the Pen Responsive Type Sizing by Ilya Streltsyn (@SelenIT) on CodePen.

(посмотрите полный пример на CodePen, как текст реагирует на изменение ширины окна)

Другие применения шкалы

Крайне нелогично ограничивать роль шкалы лишь определенными элементами. Чтобы строить сложные интерфейсы, нужны гибкие, универсальные стили. Такую гибкость могут дать вспомогательные классы:

.u-textBigger { 
  font-size: calc(var(--base-em) * var(--ms1)); 
}
 
.u-textSmaller { 
  font-size: calc(var(--base-em) / var(--ms1)); 
}

Когда все размеры текста подчинены одной пропорции, эти классы привяжут к градациям шкалы всё, на что они влияют. Даже если совмещать эти классы или вкладывать их друг в друга, пропорции текстовых элементов всё равно будут определяться шкалой:

<div class="u-textBigger">
  <h2>Now I'm as big as an H1</h2>
  <h3>Now I'm as big as an H2</h3>
  <p class="u-textSmaller">I haven't changed at all.</p>
</div>
 
<div class="u-textSmaller">
  <div class="u-textSmaller">
    <div class="u-textBigger">
      <span class="u-textBigger">Same as it ever was.</span>
    </div>
  </div>
</div>

See the Pen Responsive Type Sizing (utils) by Ilya Streltsyn (@SelenIT) on CodePen.

Краткая выжимка

  • Определяйте пропорции текстовых элементов по шкале соотношений
  • Делайте шкалу универсальной, пригодной для разных размеров экрана
  • Если нужно дополнительно подчеркнуть разницу между текстовыми элементами, используйте значения более высоких ступеней шкалы
  • Используйте шкалу не только для отдельных элементов

Дополнительные материалы

Примечания

  1. Использование одной базовой величины и одного соотношения — не единственный способ получить шкалу, подходящую для ограничений маленького экрана. Можно создать составную шкалу, используя несколько базовых значений и соотношений вместо единственного. Вот пример со вторым базовым значением для уменьшения расстояния между градациями. Подробнее см. на modularscale.com.
  2. Для преобразования вывода calc() и var() можно использовать плагин postcss-cssnext

P.S. Это тоже может быть интересно:

2 комментария

  1. Про модуляр-скейл modularscale.com побольше бы деталей. И ссылка битая у вас на гитхаб modularscalemodularscale-sass. Шрифтик статьи / шаблона ужасен и нечитабелен.

  2. Спасибо, делала размеры заголовков интуитивно, от балды, чувствовалось, что выглядит непропорционально. Использовала градации, стало намного лучше.

Добавить комментарий для Наталья Буренина Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.