Основы типографики — которые нужно знать дизайнеру

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

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

Если уже прочли предыдущую тему, переходим к сегодняшней! 

Разбираемся в основах типографики

Типографика — это система оформления печатного (или веб) издания в целом, а также его отдельных элементов.

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

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

Выравнивание текста

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

Теперь представим, что этот же принцип мы применяем в верстке сайта — растягиваем текст по ширине и используем переносы. Проблема в том, что на разных экранах ширина разная — текст переносится везде по-разному. Более того, переносы слов по тексту на неснеоответствующих экранах будут выглядеть как-то так: «Я ку- пил телефон в мага- зине электроники Electron». А если вы вдруг решите изменить размер шрифта, вся ваша верстка вообще «поплывет».

Именно поэтому в вебе принято использовать выравнивание по левому краю и не переносить слова. Для лучшего понимания, как это выглядит, посмотрите на скриншот:

Пунктуация

Для начала стоит разобраться с кавычками.

В русском языке принято использовать так называемые «елочки»: «__». А в английском — «лапки»: “__”.

Но если используются кавычки второго уровня (кавычки в кавычках), то для русского языка применяются «лапки»: „__”, а для английского — одиночные кавычки: ‘__’.

Рассмотрим на примерах:

Нередко путаница возникает с дефисом, минусом, коротким и обычным тире.

Запомните, это разные знаки:

• - дефис
• − минус
• – короткое тире
• — тире

Тут есть две главные проблемы:

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

По большому счету работа с пунктуацией — это задача именно копирайтера. Но нередко разного рода «косяки» приходится исправлять дизайнеру.

Типы чтения

Существует два типа чтения — линейное и информационное. И между ними есть довольно большая разница.

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

Как это работает на практике?

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

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

То есть, если мы говорим об информационном чтении, задача дизайнера (а затем и верстальщика) — сделать так, чтобы читатель смог бегло просмотреть текст и найти именно то, что ему нужно. Как раз этому принципу мы следуем при публикации статей в блог:

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

Как определить хороший шрифт

Бывает так, что вы видите в интернете какой-то шрифт, и он кажется вам просто отличным. Решаете использовать его в своем дизайне, но внезапно замечаете кучу нюансов. Например, цифра «1», прописная «I» и строчная «L» выглядят совершенно одинаково. Интуитивно читатель поймет, где и что находится. Но это все равно заставит его «спотыкаться» во время чтения и вызовет дискомфорт.

Вспомните, сколько раз вы вводили капчу и не могли понять, это буква «О» или ноль, буква «i» или единица, «А» или «Д»? Наверняка подобные ситуации случались не раз. Это раздражает и доставляет много лишнего дискомфорта, которого можно было бы избежать, выбери дизайнер более читабельный и легкий для восприятия шрифт.

Просто посмотрите на два примера, как выглядят в разных шрифтах «1», прописная «I» и строчная «L»:

Шрифт Verdana

Шрифт Gill Sans

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

Существует еще одно правило: использовать шрифтовые пары — шрифт с засечками для заголовков и шрифт без засечек — для основного текста.

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

Кстати, хотим поделиться с вами таблицей сочетания шрифтов:

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

В нашем случае:

font-family: IBM Plex Sans, Arial, serif

Это означает, что изначально браузер попытается загрузить на странице именно шрифт IBM Plex Sans. Если ему это не удастся (сломан код, не подключен шрифт или он не поддерживается), браузер применит Arial. А если и Arial не сработает, то применится дефолтный браузерный шрифт без засечек — serif. Если указать sans-serif, будет использовать шрифт с засечками.

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

Если у вас нет времени или нет необходимости подбирать шрифты для сайта, можете использовать классические трендовые варианты — не ошибетесь:

• Bodoni
• Meta
• Headline News
• Futura
• Google Product Sans
• San Francisco
• IBM Plex
• Druk

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

Сайты, сервисы и блоги по типографике

Напоследок хотим поделиться некоторыми платформами и веб-ресурсами, которые помогут вам находить и более грамотно использовать шрифты:

• Google Fonts — огромная база бесплатных шрифтов от Google, более 900.
• WhatFont — браузерное расширение, с помощью которого можно легко узнать, что за шрифт используется на странице.
• Paratype — удобный сайт, где можно найти аналоги выбранного шрифта. Сотни примеров, удобно размещенных в алфавитном порядке.
• Readymag — настоящая энциклопедия для дизайнера, в том числе посвященная работе со шрифтами (английский язык).
• Colour Contrast Checker — веб-сервис для проверки уровня контраста текста и фона по стандарту WCAG. Сервис также доступен в виде расширения для Chrome.
• Fonts In Use — сайт с огромным количеством примеров использования шрифтов на плакатах, вывесках, листовках, веб-страницах и так далее. Отличный источник вдохновения.

Если вы владеете английским, можем порекомендовать некоторые журналы, посвященные дизайну: Eye, Net magazine, Slanted, Communication Arts и Offscreen Magazine. Эти журналы все еще печатаются и доступны к заказу, но множество полезной информации и статей можно найти на их сайтах

И еще кое-что…

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

Курс "Курс Web-дизайна"

Хочешь получить обучение от Юрия Линника?

На курсе вы освоите:

• Знание особенностей веб-проектов (респонсив, адаптив)
• Знание принципов юзабилити сайтов
• Создание дизайна под разные устройства (десктоп, планшеты, смартфоны)
• Работу с дизайн макетами в Figma
• Понимание принципов проектирования и разработки сайтов и интерфейсов

Заказать консультацию

Подробнее о курсе

Если вам действительно интересен веб-дизайн, вы любите создавать что-то новое и стремитесь делать современный интернет лучше, приглашаем на большой онлайн-курс Wezom-Академии «Wеb-дизайн с нуля до крутого портфолио». Вас ждет 16 онлайн-лекций и 10 практических заданий, в ходе которых вы освоите базовые навыки веб-дизайнера и сможете начать работать в одном из самых креативных IT-направлений современности!