UXPUB

UXPUB - сообщество из 3,050 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Математический подход в создании веб-типографики
Редакция
Редакция

Опубликовано

Математический подход в создании веб-типографики

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

Решение сложности

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

Контекстно-ориентированные подходы

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

Цифровая среда

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

Начните со значений по умолчанию

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

По умолчанию

Пиксели

Нормализовано

Нормализовано в Rem

0.67em

10.72px

12px

.75rem

0.83em

13.28px

14px

.875rem

inherit

16px

16px

1rem

1.17em

18.72px

20px

1.25rem

1.5em

24px

24px

1.5rem

2em

32px

32px

2rem

Степени двух

Взглянув на цифры, используемые в цифровой среде, можно выделить степени двух. Размер шрифта по умолчанию для большинства браузеров составляет 16px, то есть 2 в 4 степени. Экраны являются цифровыми носителями, и все сводится к двоичным битам и байтам. Поскольку они напрямую связаны с графической памятью, почти все размеры экрана основаны на суммах степеней двух, и их часто делят на 16. Например, стандарт отображения XGA составляет 1024×768px, который преобразуется в единицы измерения rem (или делится на 16) и составляет 64×48rem.

1rem в качестве основной единицы

Работа с числами, основанными на степенях двух, может привести к целой системе разумных чисел – часто целых чисел. Приведенная выше нормализованная шкала начинается с 16px (1rem) в качестве основы и умножает каждое значение на конкретные множители для создания целых чисел. Взяв этот нормализованный масштаб и установив высоту линии 1,25 или 1,5, получим следующие значения пикселей.

Размер шрифта

1.25 Высота линии

1.5 Высота линии

12px

15px

18px

14px

17.5px

21px

16px

20px

24px

20px

25px

30px

24px

30px

36px

32px

40px

48px

Все эти множители основаны на дробных числах со степенью двух в знаменателе.

Дробное число

Десятичная дробь

1/2

0.5

1/4

0.25

1/8

0.125

1/16

0.0625

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

1rem в качестве основной единицы

При настройке шрифта, особенно основного текста, 1rem не всегда соответствует контенту и используемому шрифту, и часто желательно использовать шрифты других размеров. Вместо того, чтобы изменять базовый размер шрифта и работать с неидеальными числами и проводить сложные вычисления, я оставляю значение по умолчанию 1rem и отталкиваюсь от него для других типографических размеров. Например, основной текст 1.125rem (18px) и привязка других элементов интерфейса к базовому значению 1rem может значительно упростить регулировку интервала и выравнивания и помочь создать естественный ритм в визуальном дизайне.

Высота строки

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

/* Calculated from the target line-height */

.small-copy {

font-size: 14px;

line-height: 1.4285714; /* 20px, e.g. 20 divided by 14 */

}

.body-copy {

font-size: 18px;

line-height: 1.3888889; /* 25px, e.g. 25 divided by 18 */

}

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

С другой стороны, привязка чисел к одной системе дает интересные результаты. Высота строк ниже рассчитана на кажущиеся несвязанными числами: 21px и 27px.

/* Using 1rem as a base */

.small-copy {

font-size: .875rem;

line-height: 1.5; /* 21px */

}

.body-copy {

font-size: 1.125rem;

line-height: 1.5; /* 27px */

}

Сумма размеров шрифта .875rem и 1.125rem равна 2rem, а сумма высоты их строк равна 48px, что является той же высотой строки для шрифта 32px, если установлено значение 1.5. Использование этого подхода во всей типографической системе может создать множество тонких взаимосвязей между различными частями дизайна.

Пустое пространство

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

Например, Basscss использует следующую шкалу для описания полей и отступов.

Шаг

Значение

1

.5rem

2

1rem

3

2rem

4

4rem

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

Создание лучших систем

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


Перевод статьи Jxnblog

Обсуждение (0)