8-точечная сетка: типографика в Интернете

1656599053 8 tochechnaya setka tipografika v internete

Веб-типографика запутана. Знаете ли вы самые лучшие методы?

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

p7a5EwZKGq5FrIg-oXZ58WptVdYXB372hY97
Образцы упрощены для размещения по стандартной шкале

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

Три архетипа систем типографии

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

Маркетинговый сайт

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

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

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

Расширенным примером этого является функция интерполяции, используемая Ли Тейлором и Ником Джонсом на целевой странице Invision.

The <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799));. Типография на странице тщательно рассчитана на работу с любым размером экрана.

«Использование математики для создания динамического искусства» — Ли Тейлор

Блог/информационный сайт

  • Цель: Для передачи множества текстовой информации.
  • Требования: Основная область чтения может использовать систему высоты строки на основе соотношения, как это делает статья Medium.
  • Адаптивный вариант использования: Скорее всего, будет чутким, но сосредоточено на читабельности.
JWKQZX2pnsELv6JkIOGshLQ3imrMOaRYEkTk

Эта статья Medium является примером веб-опыта, предназначенного для долгого чтения.

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

Продукт

  • Цель: Создано для решения проблем пользователей, например, подачи налогов, управления репозиторией git или визуализации показателей производительности.
  • Требования: Текст должен хорошо вписываться в иерархию элементов. Текст обычно используется для этикеток, инструкций и отображаемых данных.
  • Адаптивный вариант использования: Минимально отзывчивый. Высокоразработанные продукты будут использовать адаптивный дизайн, что означает различные возможности для мобильных и настольных компьютеров. Основное внимание уделяется иерархии элементов, поддерживающих пользовательский опыт.
AFvMJ3ln64feUAj9J5VvI-qsRE9hgmpSSff0

Material Design от Google – это популярный язык дизайна, который применим ко многим случаям использования продуктов.

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

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

При использовании базовая система сетки имеет возможность выровнять пространственную систему элементов (сетка 8 пунктов) с системой типографии, чтобы создать убедительный вертикальный ритм в дизайне.

Внедрение веб-типографики – в действительности

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

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

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

AQRwQogPt9TiBR82ig3AbFMJBPZO8wz-KQG2
Смешивание типов содержимого вместе

Подводный камень — Ems, rems и пиксели, о боже!

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

Относительные единицы, такие как rems и ems, иногда неправильно понимают, и по моему опыту это приводит к неустойчивой системе типографики. Например, соотношение между размером шрифта 14 пикселей и высотой строки 20 пикселей не следует фиксировать в относительных единицах, поскольку это соотношение должно изменяться с увеличением размера шрифта.

Определять высоту строки 1,4285714286em смешно, потому что большинство людей не могут сделать такую ​​математику в голове. Если размер шрифта увеличивается до 16 пикселей, браузер отобразит высоту строки 22,857142 пикселей, и такое разделение пикселей является ожидающей головной болью. Это создает неразбериху и является неправильным использованием относительных единиц. Полный список абсолютных и относительных единиц можно посмотреть здесь.

Почему сегодня так многие системы проектирования основаны на относительных размерах? Ответ – «доступность».

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

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

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

Типография сетки 8pt

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

Я настоятельно поощряю проектирование и инженеров сотрудничать с доработкой этих стандартов для компании/продукта.

Вот образцы из нескольких знакомых имен: Google Material, Pivotal, Atlassian, Intuit.

F8E-aK4T2KYa7HSEcgDUrq5ahyP9mvJv-M7e
Образцы упрощены для размещения по стандартной шкале

Предыдущие статьи из 8-точечной сетки:

  1. Введение в 8-точечную сетку
  2. 8-точечная сетка: границы и макеты
  3. 8-точечная сетка: вертикальный ритм

Вопрос:

Это то, что я все еще исследую. У вас хороший пример, которым можно поделиться? Есть ли у вас другой подход к системе типографики 8pt?

Если у вас есть мнения, оставьте комментарий или свяжитесь с Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован.