Какого размера должны быть шрифты? И что насчет вертикального ритма? Я собираюсь детально описать процесс, чтобы ответить на все подобные вопросы, сокращая затраты времени на выработку выдержанной типографики, соответствующей вашей сеточной системе и минимизирующей конфликты в дизайне. Гармоничная типографическая и сеточная система внутренне непротиворечива. Такие системы помогают убедиться, что все макеты и компоненты соответствуют друг другу, по аналогии с конструктором - любой кирпичик Lego совместим с другим кирпичиком Lego.
Почему это важно
При дизайне нового продукта или интерфейса с нуля, есть множество взаимозависимых решений, которые вам предстоит принять. Любое дизайн-решение влияет на предыдущее дизайн-решение, и некоторые такие связи более разрушительны, чем другие. Аналогия: представьте, что вы строите дом, и прервали процесс покраски, чтобы передвинуть некоторые стены. То, что было относительно легко сделать во время начальной проектировки, становится в последствии чрезмерно дорогой затеей. Следуя правильной последовательности, вы сможете избежать подобных проблем.
Предупреждение: Этот пост написан для относительных новичков в визуальном дизайне, которые могут озадачиться реализацией вертикального ритма, выбором сеточной системы. Это - лишь одна из последовательностей, которая работает для меня, и я отточил этот процесс за годы практики в качестве визуального, UX- и продукт-дизайнера. Последние пару лет я преподаю дизайн в Tradecraft, сотрудничая с коллегой Джейком Флеммингом. Это далеко не единственный способ построения внутренне согласованной сеточной системы и типографики, и если у вас есть идеи по улучшению процесса, делитесь ими в комментариях. Скриншоты сделаны в приложении Sketch, но описанные принципы подходят и для любого другого дизайн-приложения.
Последовательность
Это шпаргалка, описывающая 9-шаговую последовательность получения хорошей базы типографики и сеточной структуры. Я подробно опишу в каждый шаг ниже. 
1 Определите свои цели
Кажется очевидным, определение целей и принципов дизайна является критически важным на начальном этапе. Принципы дизайна - это абстрактные положения, которые описывают, как будет выглядеть конечный продукт. О дизайне говорить довольно сложно, но множество прилагательных помогут описать, как мог бы выглядеть бренд. Например, “четкая и современная” типографика будет визуально отличаться от “молодой и свежей” или от “стабильной и вызывающей доверие”. Возьмите себе за правило сужать описание до 3-5 прилагательных или описательных выражений. Описательные выражения помогают определить границы бренда, например, “минималистичный, но винтажный”. Вооружившись списком принципов дизайна, вы можете придумать идеи по типографике, которые примерно проиллюстрируют эти принципы. Уже существующие примеры помогут построить ваше собственное видение, каким должен быть будущий дизайн. Просматривайте сайты вроде pinterest, dribbble и behance для поиска идей. В поиске вдохновения помните, что вы не ищете, какой бы дизайн скопировать. Кроме того, что это не этично, это также плохо для бренда. Вдохновение означает “вдохновиться на что-то уникальное и лучшее, чем то, что вы нашли”. Чтобы продемонстрировать гармоничный типографический процесс, я буду использовать текст из “Алисы в стране чудес”, и визуальное оформление также было навеяно этой темой. 
2 Иерархия контента
Как только вы определили цели, нужно выработать понимание контента, для которого вы создаете дизайн (или который вы пишете, если это тоже ваша работа). Этот шаг, главным образом, служит для понимания приоритетности и иерархии контента, а также для обеспечения его максимальной читабельности. Читабельность выходит за рамки разборчивости. Это больше определяется тем, насколько конкретный фрагмент контента хочется видеть и прочесть в конкретном месте. Вы можете думать о дизайне контента, как архитекторы думают о дизайне зданий для людей. В теории строительство должно создаваться вокруг обитателей - все должно отражать их ежедневные привычки и дела. Нужно понимать обитателей и их потребности для создания хорошего решения.
Избегайте Lorem Ipsum
Таким же образом, нужно на самом деле читать контент, чтобы понимать, как его расположить и приоритизировать. Избегайте использования lorem ipsum или другого замещающего текста - это похоже на создание архитектуры для манекенов. Если вы вынуждены сделать дизайн без реального контента, хотя бы используйте текст в нужном языке, подходящий по тематике к бренду. Пример текста, который я выбрал, “Алиса в стране чудес”, - уместный выбор для детского бренда, но он явно не подойдет, если я создаю дизайн для юридической конторы.
Макетируйте все типы контента
На этом этапе пройдитесь по тексту и убедитесь, что у вас есть как минимум по одной сущности каждого уникального типа контента. Если что-то не представлено в материалах, создайте свой пример. Также добавьте подзаголовки, цитаты и прочие элементы для улучшения читабельности. Не будучи универсальным, этот список все же покроет большинство вариантов:
- Заголовок(H1)
- Подзаголовки (H2 — H6, хотя на практике вам, скорее всего, пригодятся только H2 и H3)
- Основной текст
- Цитаты и врезы
- Списки (нумерованные и ненумерованные)
- Ссылки (состояние по умолчанию, на ховере, активное/нажатое)
- Метки полей ввода формы
- Подписи к изображениям, мелкий текст и приглушенный текст
3 Выбор шрифтов
Искусство подбора шрифтов требует много времени на освоение. Но для начала есть простые инструкции. Если вы уже знаете многое о типографике, это упрощение вас наверняка обидит, так что переходите сразу на шаг 4. При выборе типографики, есть несколько вопросов, на которые нужно ответить:
Каков ваш бюджет?
За типографику, как и за большинство вещей в мире, придется платить. Из этого правила есть несколько исключений, но начните с того, сколько вы готовы потратить. Если у вас есть бюджет, начните искать шрифтовые студии, такие как House Industries и Hoefler & Co., или каталоги профессиональных шрифтов вроде Typekit (отличный вариант, если вы уже платите за Adobe CC) и MyFonts. Если у вас нет бюджета - не беспокойтесь! Вы можете найти массу отличных шрифтов в Google fonts, как для скачивания, так и для использования в вебе. Избегайте использования огромных бесплатных репозиториев шрифтов, если только не найдете в нем конкретный шрифт, созданный профессиональным шрифтовым дизайнером. Аматорские шрифты могут выглядеть интересно, но в них может не быть множества важных деталей и профессиональной отшлифовки.
Где это будет использоваться?
Вы настраиваете типографику для веба, приложения или печати, или для всего сразу? Убедитесь, что любой шрифт (или шрифты), на которые вы смотрите, имеют лицензию для соответствующей среды. Будет обидно впоследствии узнать, что выбранный шрифт лицензирован только для веба, но увы, его нельзя применить для десктопа, или наоборот.
Выберите стиль заголовков
Помните те дизайн-принципы, которые вы определили на этапе 1? Тут они вам очень пригодятся. Выбирайте паттерны, которые соответствуют вашим принципам и идеям. Например, вы заметили, что во многих выбранных идеях используются броские serif-ы. Возможно, это все жирные, сжатые sans-serif? Вырабатывайте видение того, как некоторые бренды используют типографику для демонстрации их ценностей. Если слова “сжатый” и “serif” ничего для вас не значат, ознакомьтесь с анатомией шрифтов. Используйте эти паттерны для направления себя, но не для ограничения. Не всегда будет правильным следовать тому, что делают похожие бренды - иногда лучше сделать в точности наоборот, чтобы выделиться. Важно делать осознанные решения. Пройдитесь по выбранному каталогу шрифтов и выпишите те, которые вам приглянулись. Опирайтесь на определения бренда, и помните, что типографику для заголовков можно больше стилизовать, чем основной текст. Сократите список до 3-5 вариантов, и напишите заголовок в каждом из выбранных шрифтов перед тем, как двинуться на следующий этап. Вы сохраните эти варианты и сопоставите их со шрифтами основного текста, которые выберите в следующем шаге. 
Выберите пару для основного текста
После того, как вы выбрали 3-5 шрифтов для заголовков, настало время выбрать хороший шрифт в пару для основного текста. В то время, как типографика для заголовков должна быть интересной, типографика для основного текста должна быть разборчивой и читабельной (т.е. довольно скучной). Здесь решение должно быть продиктовано контрастом. Если для заголовка вы выбрали броский serif, попробуйте геометрический sans-serif для основного текста. Сайт fontpair.co может помочь вам принять решение насчет выбора нужного контраста. Вы также можете использовать один и тот же шрифт для ваших заголовков и основного текста, достичь контраста, играясь с насыщенностью (например, жирный вариант для заголовков и обычный для основного текста). Мне также нравится гуглить “font pairing” + название выбранного сервиса (например, “font pairing google fonts”). Есть масса сайтов для вдохновения, которые покажут пары шрифтов в действии. Например, couple favorites. Мне нравится сокращать выбор шрифтов основного текста максимум до 2-3 вариантов (в сумме, а не 2-3 на каждый шрифт заголовка). 
Протестируйте выбор на артборде
Когда вы отобрали 3-5 вариантов для заголовка и 2-3 для основного текста, надо протестировать все пары. Создайте матрицу артбордов, которая покажет, как выглядит каждая комбинация в паре. Пока вы не получили достаточно опыта, почти невозможно принять правильное решение по шрифтам без тестирования на самом тексте. Эта матрица артбордов покажет, как символы каждого шрифта сочетаются друг с другом.
Решайте
Помните: выбор типографики сложен. Вы не всегда будете уверенными в своем решении, и это нормально. Примите наилучшее из доступных на данный момент решений, и вернитесь к нему позже. Посмотрите еще раз на свои дизайн-принципы, начните исключать варианты, пока не сузите выбор до одной опции. Спросите себя, насколько далеко или ближе то, что вы видите, к вашим дизайн-принципам, чем другие варианты. Относительные решения (в смысле сравнение разных вариантов) всегда проще принимать, чем оценивать отдельный вариант сам по себе. В итоге вы можете понять, что ни один из вариантов не покажется правильным. Не расстраивайтесь - это тоже прогресс. В обоих случаях, отступите на шаг назад и попробуйте найти лучшие опции для заголовка и основного текста, снова разложите их в матрицу, и посмотрите, насколько вы приблизились к цели. Для примера с Алисой в Стране чудес, я выбрал такой вариант: 
4 Базовый размер шрифта и высота строки (соотношение)
Тут процесс уже идет проще. Базовый размер шрифта и базовая высота строки - это 2 числа, которые вы можете использовать как базу для остальных размеров и интервалов. Это не только упростит работу и уменьшит количество решений, которые нужно принять, но и обеспечит хороший ритм будущему дизайну в целом. Ритм в дизайне, как и в музыке, дает чувство упорядоченности (или расстройства) композиции. Ритм может быть достигнут по горизонтальной или вертикальной оси, и когда оба направления сочетаются друг с другом, вы создадите дизайн, который будет казаться очень хорошо организованным. Это секретный ингредиент разработки гармоничной типографической и сеточной системы.
Выбор базового размера шрифта
Лучше всего начать с базовых параметров для устройства, под которое вы создаете дизайн, и отталкиваться отсюда. Если вы создаете дизайн под веб, размер по умолчанию - 16px. Для iOS - 17pt, для Android - 13sp.
Технические отклонения: хотя есть разные единицы измерения, и они по-хитрому отличаются, на этом этапе разница не очень важна. Sketch измеряет шрифты в точках (pt), и это можно перевести в единицы, используемые для веба и Android. Если вдруг на вас нападет бессонница, можете нагуглить разницу между точками, пикселями и относительными пикселями для веба, и sp/dp на Android.
Когда определен размер по умолчанию, настраивайте остальные размеры под свои нужды. Неплохо использовать решение типа font face ninja, чтобы понять, какие размеры используются на других сайтах. Например, NY Times использует 13 px для основного текста, а Medium - 21px. Эти измерения отлично подходят под определение верхней и нижней границы допустимых размеров. Подумайте о количестве контента, который будет содержаться в интерфейсе, о читателях контента и о контексте, в котором он будет просматриваться. Например, если я создаю блог для читателей за 50 (со временем, зрение ухудшается), и я предполагаю, что читать блог они будут с мобильных устройств в моменты скуки, для основного текста я возьму размер побольше - возможно, ближе к 21px, как на Medium. И наоборот, если бы я создавал интерфейс для профессиональной соцсети, пользователи которых, скорее всего, будут открывать сайт на рабочих экранах покрупнее, я могу взять размер основного текста поменьше. Конечно, это не замена полноценного ресерча пользователей, который помогает понять целевую аудиторию гораздо глубже, но эти три фактора помогут в выборе достойного решения. Если вы сомневаетесь, лучше ошибиться в сторону большего размера, нежели меньшего. Как минимум, сейчас крупный шрифт в тренде.
На данном этапе вам нужно беспокоиться только о базовом размере для основного контента - мы побеспокоимся о размерах остальной типографики в шаге 5.
Перед тем, как вы окончательно выберите размер, создайте несколько вариаций на артбордах размером с ваше мобильное устройство, и протестируйте их “наживо”. Для этого можно воспользоваться Sketch Mirror, или экспортировать эти тестовые артборды в PNG-файлы, а затем просмотреть их на вашем устройстве. 
Выбор базовой высоты строки
Как только вы выбрали основной размер шрифта, нужно выбрать высоту строки. Проще выбирать высоту строки пропорционально базовому размеру шрифта.
Проверенное правило: выбирайте высоту строки где-то между 120% - 150% от размера шрифта основного текста. Если у вас есть веская причина, можете нарушить это правило.
Чем больше высота строки (ближе к пропорции 150%), тем больше расстояния будет между строками. Так, возможно, будет проще для глаз отыскать следующую строку текста. Стилистически большая высота строки смотрится более роскошно, стабильно и уверенно. Более тесный просвет (ближе к пропорции 1.2 или даже меньше) сожмет строки текста ближе друг к другу. Такая плотность может быть на руку, в зависимости от принципов дизайна, которые вы ранее выработали. Тесный просвет позволяет увеличить скорость чтения контента, но нужно выбирать не слишком большую длину строки, иначе скорость чтения замедляется. Мы обсудим длину строки в шаге 6. Если вам нужна помощь, воспользуйтесь инструментами вроде type scale - в нем можно легко визуализировать различные комбинации размера шрифта и высоты строк. Пропорции соответствуют музыкальным аккордам - спорный, но довольно интересный способ интерпретации пропорций. 
Используйте целые числа
Завершающий этап выбора высоты строки. Лучше выбирать целые числа. Вы будете использовать высоту строки для определения интервалов, и чем проще делить, тем чище будет конечный макет. Вы оцените это удобство, как только начнете макетировать контент. Вот несколько сочетаний размеров шрифта / высот строк, которые я часто использую.
- 16 / 24 (пропорция: 1.5, или чистый квинтаккорд)
- 18 / 26 (пропорция: 1.44, или близко к увеличенному квартаккорду)
- 20 / 30 (пропорция: 1.5)
Для нашего примера я решил остановиться на 18px для основного текста - довольно большой размер, но не слишком крупный, и пропорции 1.333 (эквивалент чистого квартаккорда). Получается высота строки в 23.994, и я округлю ее до 24px. На этом моменте можно изменить изначальный артборд в соответствии с выбранными шрифтами, размерами и просветами. Забудьте пока об интервалах. 
5 Типографическая шкала
Типографическая шкала поможет верно определить, насколько большими должны быть заголовки, подзаголовки и названия. 
Совет от профи: Sketch также позволяет производить вычисления прямо в приложении, очень удобно. Скажем, ваш базовый размер и высота строки 16px / 24px (соотношение: 1.5). Чтобы перейти на следующий шаг в шкале, просто можете ввести “16*1.5”. Чтобы перейти на 2 шага вперед, введите “16*1.5*1.5”. И так далее...
Наложите типографическую шкалу на вашу иерархию контента
Когда вы задали “шаги” своей типографической шкалы, нужно наложить эти шаги на иерархию контента, которую вы задали в шаге 2. Ваш простой текст должен быть в размере 1 эм, или базовый размер шрифта. Ваши подзаголовки/H2 должны быть на шаг больше, а заголовки / H1 - на шаг больше H2. С другой стороны, ваши надписи и маленький текст должны быть на шаг меньше вашего базового размера шрифта. 
6 Горизонтальный интервал (типографическое измерение)
Как только вы настроили корректные размеры для всех элементов, следующим шагом будет определить длину строки (или измерить). Оптимальная длина строки улучшает читабельность и сокращает количество ошибок.
Железное правило: Придерживайтесь длины строки в 65-85 символов для основного текста, что составляет примерно 2,5 длины алфавита. Проще всего нагуглить бесплатный инструмент для подсчета символов.
В Sketch сокращайте ширину текстового блока до тех пор, пока не добьетесь нужного количества символов. Насчет супер-точности не беспокойтесь, мы подгоним текст под сетку в шаге 8. На данный момент нужно только правильно определить размеры основного текста. Ваши более крупные заголовки и подзаголовки будут иметь другую длину строки в символах, и это нормально.
7 Вертикальные отступы (вертикальный ритм)
Далее вам нужно убедиться, что высоты строк внутренне согласованы. Для начала убедитесь, что высоты для всех строк в абзацах основного текста соответствуют базовой высоте строк. Для последовательных уровней в вашей иерархии контента, высота строк должна быть целым или половинным множителем базовой высоты строки. Придерживаясь пропорции для всего текста, вы сможете всегда держать все его виды в соответствии. Это придает дизайну ощущение порядка и структуры. Проще пояснить на примере. Если размер текста 20px, и ваша пропорция 1.5 - при базовой высоте строки 30px, тогда допустимые высоты строк для большего и меньшего текста в иерархии составляют:
- 15px (30px * 0.5)3
- 0px (30px * 1.0)
- 45px (30px * 1.5)
- 60px (30px * 2.0)
- 75px (30px * 2.5)
Для примера из “Алисы в Стране чудес” мы будем использовать величины, кратные 12, так как базовая высота строки 24. Я сделал заголовки более одной строки, чтобы точно увидеть, что высоты строк для всех уровней иерархии хорошо подобраны. 
8 Горизонтальная сеточная система
Если вы начнете использовать свою новую типографическую систему без сетки, вы быстро придете к полному хаосу. Главный смысл этой последовательности шагов состоит в создании макетных сеток, использующих те же числа, которые вы используете для настройки типографики. Когда это работает вместе, ваши макеты выглядят чище и более организованно, при гораздо меньших трудозатратах. Сначала нужно задать горизонтальную сетку, которая в Sketch называется макетной сеткой. Сетчатый дизайн - это огромная тема, которую мы коснемся только вскользь, так что если хотите углубиться, придется воспользоваться гуглом. Стандартная макетная сетка Sketch для десктопа обычно очень близка к идеалу. Для тех, кто имеет опыт в разработке под веб, она основана на сеточной системе из bootstrap, которая в свою очередь основана на классической сеточной системе 960. Есть 2 главных момента в обдумывании горизонтальной макетной сетки. Откройте настройки макета через меню View > Canvas.
- Общая ширина макета - общая ширина зависит от ваших целей. Если вы ищете простоты, я бы предложил дизайн с плавающей шириной (или 100% по ширине артборда). Убедитесь, что опция “Gutter on outside” отключена, и задайте общую ширину чуть меньше, чем ширина артборда. Я обычно вычитаю свою базовую высоту или 2-кратную базовую высоту строки, из общей ширины макета, а затем центрирую макет на артборде.
- Ширина межстолбцового промежутка - эта ширина должна быть размером с базовую высоту строки для планшета и десктопа, и с половину базовой высоты строки для мобильных артбордов. Это упростит получение одинаковых отступов между элементами, как по горизонтали, так и по вертикали.
Вот как выглядят мои настройки макета для десктопной версии. Обычно я выбираю сетки фиксированной ширины на экранах больше 1024px в ширину, так проще контролировать горизонтальные замеры.
Сетка для мобильного макета
Для мобильного артборда используется легкая вариация. Так как тут экраны поменьше, ваша сетка должна быть на полную ширину артборда. Но я предпочитаю отнимать высоту строки из общей ширины артборда, что даст равномерные промежутки между колонками и за пределами артборда тоже. В этом случае артборд имеет ширину 375px, откуда я отнял 24px (высота строки), получилось 351px. На каждой стороне сетки остается по 12px, что повторяет ширину промежутка между колонками в 12px. Убедитесь, что отключена опция “Gutter on outside”. 
9 Вертикальная сеточная система
Вы почти справились! Последний шаг - нужно задать сетку строк в помощь для замера вертикального расстояния между элементами. Откройте настройки макета снова, отметьте опцию “Rows” (строки). Высота междустрочного интервала должна составлять половину ширины интервала между колонками, а высота самой строки - 1. Настройки будут идентичными для десктопного и мобильного артбордов. 
Макет
Сеточная система настроена, и осталось только смакетировать все элементы и типографику. Для горизонтального макета располагайте элементы в колонках, а не в промежутках между ними. 
Закон близости
При планировании расположения элементов главным руководством является концепция из гештальтпсихологии под названием закон близости. Этот закон гласит, что объекты, расположенные рядом друг с другом будут восприниматься как единая группа. Вы можете использовать этот трюк восприятия в свою пользу, размещая некоторые элементы ближе или дальше друг от друга, чтобы формировать связи. Например, на иллюстрации ниже я использовал 2 “блока” для разделения большей части элементов. Я удвоил расстояние между элементами, которые должны быть отделены; например, надо моими заголовками H2, а также над и под цитатными блоками. Я также использую единичный разделитель между цитатой и подписью, так как текст мелкий, и я хочу четко дать понять, что цитата и подпись связаны друг с другом. Используйте граничную рамку для выравнивания текста вместо базовой линии. Если вы работаете в Illustrator, а не в Sketch, будет проще выровнять базовую линию текста с сеткой, но в Sketch гораздо проще использовать граничные рамки. Метод не играет роли, пока вы справляетесь с задачей. 
Итоги
Конечная версия показана ниже, все вспомогательные линии и обозначения спрятаны: 
Вы можете лучше?
У вас есть советы, которые улучшат и ускорят описанный процесс? Помните, что это супер упрощенный вариант, который не будет работать во всех возможных ситуациях. Но если у вас есть идеи по упрощению и оптимизации, делитесь ими в комментариях.
Хотите большего?
Если вас интересует эта тема, и вы бы хотели углубиться, я совместно с автором Learn Python the Hard Way, Зедом Шоу разрабатываю полный курс визуального дизайна. Подписывайтесь, чтобы быть в курсе его релиза: Learn Design the Hard Way
Перевод статьи Zac Halbert
Найновіші коментарі (0)