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