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

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

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

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

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

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

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

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

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

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

По умолчаниюПикселиНормализованоНормализовано в Rem
0.67em10.72px12px.75rem
0.83em13.28px14px.875rem
inherit16px16px1rem
1.17em18.72px20px1.25rem
1.5em24px24px1.5rem
2em32px32px2rem

Степени двух

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

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

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

Размер шрифта1.25 Высота линии1.5 Высота линии
12px15px18px
14px17.5px21px
16px20px24px
20px25px30px
24px30px36px
32px40px48px

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

Дробное числоДесятичная дробь
1/20.5
1/40.25
1/80.125
1/160.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
21rem
32rem
44rem

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

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

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

Оригинал: Jxnblog

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Каллиграфия и леттеринг для начинающих

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

Zeplin.io – способ подружить дизайнера и верстальщика

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

Руководство дизайнера по DPI и PPI

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