Модульная шкала и осмысленная типографика

Как вы назначаете размеры шрифта, когда работаете с сайтом? Просто случайным образом выбираете цифры, опираясь на свои ощущения? И в итоге заканчиваете с кучей разных размеров без понимания, откуда они взялись? Ваши шрифты начинают выглядеть как хаос спустя какое-то время? Что насчет вашего CSS? Можете ли вы управлять содержанием, не сойдя с ума?

Я помню, как обычно устанавливал размеры шрифтов до того, как я узнал про модульные шкалы. Это было очень похоже на то, что я описал выше. Никаких причин для выбора каждого конкретного размера. Никакого реального смысла. Это были просто цифры. Во многом, случайные цифры. Размер основного текста? 16 пикселей будет достаточно. Заголовок один? Да, давайте сделаем 40 пикселей. Подписи к рисункам? 15 пикселей? Почему бы и нет. Таков был мой подход в прошлом.

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

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

Большинство инструментов графического дизайна идут со стандартным набором типографических размеров. Точно также и в некоторых фреймфорках для front-end разработки.

Изображение 1. Диатоническая шкала.

Это так называемая графическая шкала. Возможно, вы сталкивались с этим ранее, если работали в Photoshop или Sketch. В худшем случае, вы просто следовали размерам из этой шкалы. Это неплохой масштаб, но иногда вы можете поэкспериментировать с другими. Выкиньте всё скучное из окна и принесите что нибудь-новое. Что нибудь свежее.

Тим Браун из Adobe придумал идею Модульной шкалы, разработал инструмент для создания ваших собственных масштабов и презентовал его для сообщества веб-дизайнеров. Идея модульных шкал проста: создавайте ваши собственные масштабы с помощью установки некоторых базовых значений, таких как размер шрифта и ширина линии.

Изображение 2: Модульная шкала Тима Брауна

Использование модульных шкал 

1. Выберите ваш базовый размер

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

2. Выберите шкалу

Есть много вариантов на выбор. Исследуйте и сравнивайте их. Золотое сечение, возможно, наиболее популярно. Оно было популярным в графическом дизайне и архитектуре много лет. Оно основано на числах Фибоначи, создающие образ, который присутствует в живой и неживой природе. Вариант, который лучше всего работает для меня — совершенная пятерка с соотношение 2:3. Я нахожу его более гибким, чем остальные. Ваша цель – найти вариант, который лучше всего работает для вас и подходит вашему уникальному стилю.

3. Настройте размеры так, чтобы они подходили шкале

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

Пример:
Предположим, что мы выбрали размер основного текста 19 пикселей и выбрали шкалу «Совершенная Пятерка». Сейчас мы хотим выбрать базовые размеры шрифта, который мы используем: заголовки с 1 по 4, описание изображения и мелкий шрифт. Вот значения, из которых мы должны выбрать согласно шкале:Т.к. нам нужны только заголовки 1, 2, 3 и 4, выберем четыре размера, крупнее основного. Также нам нужны два размера меньше основного для описания изображений и малого шрифта.  Таким образом, мы можем выбрать следующие размеры: 

Elements Size
Heading 1 3.797em
Heading 2 2.531em
Heading 3 1.668em
Heading 4 1em
Figure caption 0.75em
Small 0.5em

 

Не забудьте про вертикальные ритмы

Размеры нашего шрифта должны вписаться в нашу базовую сетку, которая определяет вертикальный ритм, как мы рассмотрели в прошлом уроке. В этом случае, заголовок 1 размером в 60 пикселей потребует высоту строки в 4*высоты строки основного текста, что составляет 72 пикселя. Вообще, 72 пикселя может оказаться слишком много, поэтому давайте давайте использовать коэффициент 3,5 высоты строки, что составляет 63 пикселя. Это намного ближе к 1.1-1.3 диапазону, которые рекомендованы для высоты строки заголовков. И не волнуйтесь о коэффициенте 3,5. Ваш сайт по-прежнему будет иметь правильный вертикальный ритм. Если вы используете коэффициент с .5, вам нужна двойная сетка, как в моем примере с Гутенбергом.  Как я упомянул ранее, в типографике нет конкретных правил. Это зависит от вашей задумки, или, как сказал Роберт Брингхёрст:

В любом случае нарушайте правила и нарушайте их красиво, преднамеренно и хорошо.

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

Слово о препроцессорах

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

// 1. Base size and ratio
$base: 1.125em; //= 18px
$ratio: 1.5; // Perfect Fifth

// 2. The formula for modular scale is (ratio^value)*base so we need a power function
@function pow($number, $exponent) {
  $value: 1;
  @if $exponent > 0 {
    @for $i from 1 through $exponent {
       $value: $value * $number;
     }
  }
  @return $value;
}

// 3. Let’s make it simpler to use by combining everything under one roof
@function ms($value, $ms-ratio: $ratio, $ms-base: $base){
  $size: pow($ms-ratio, $value)*$ms-base;
  @return $size;
}

h1 {
  font-size: ms(3); // = 60.75px
}

Всё, что нам потребуется, чтобы использовать модульные шкалы на препроцессорах — парочка переменных и функций. Каждая модульная шкала делится на одно число. Для совершенной пятёрки это значение будет равным 1.5. Мы сохраним это как переменную $ratio. Другая переменная – размер базового шрифта. Она должна совпадать с размером вашего основного шрифта. В нашем примере это 18 пикселей, поэтому я установил её значение равное 1.125em.

(ratio^value)*base

Это формула для вычисления любого значения в заданной модульной шкале.

В третьей и заключительной части мы просто напишем эту основную формулу в коде, и она готова к использованию. Мы задаем два из трех параметров в этой формуле, поэтому все, что нужно, это параметр значения. ms(3) означает, что нам нужен третий размер на шкале.

 

Смотрите также

  1. More meaningful typography by Tim Brown
    Статья
  2. Modularscale.com
    Инструмент
  3. Modular scale in Sass
    Инструмент
  4. Modular scale Sketch plugin
    Инструмент/плагин

Уроки

  1. Введение в типографику
  2. Равносторонний треугольник идеального абзаца
  3. Анатомия гарнитуры
  4. Выбор гарнитур
  5. Сочетание гарнитур
  6. Ритм в веб-типографике
  7. Модульная шкала и осмысленная типографика
Поделитесь уроком в социальных сетях
Разместите ссылку у себя на стене, чтобы не потерять урок и поделиться с друзьями полезной информацией.  

По материалам https://betterwebtype.com/