Типографика. Как работать с текстом

Время прочтения: 10 минут

Типографика – это наука оформления текста. Давай рассмотрим 4 принципа типографики, которые упростят тебе жизнь:

1. Правило внутреннего и внешнего и принцип близости

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

Принцип близости: Объекты, расположенные близко друг к другу, воспринимаются связано.
Правило внутреннего и внешнего: внутреннее ≤ внешнего.


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

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

Еще больше божественных примеров в этой статье.

2. Принцип выравнивания

Принцип выравнивания гласит: ничто не должно располагаться на странице произвольно. Каждый элемент должен иметь визуальную связь с чем-то другим на странице.

Как ты помнишь, есть несколько видов выравнивания текста:

  • по левому краю;
  • по правому краю;
  • по центру.

Многие, когда работают с текстом, могут запутаться в выравниваниях: поставить часть текста по центру, другую — по левому краю, третью - по правому, полагая, что так более креативно. Но так делать не стоит. Это вносит хаос в восприятие текста и в композицию.

Принцип выравнивания помогает связать по смыслу объекты на расстоянии.
3. Принцип повтора. Рифма

Вообще этот принцип из темы по композиции, но он отлично работает и с текстом, поскольку текст — тоже элемент композиции.

Мы можем дополнить и усилить смысл поста с помощью дополнительного текста. Давай рассмотрим на примере Маяковского и сравним два визуала: какой более целостный по композиции и по смыслу?

Обрати внимание, что второстепенный текст имеет один стиль (Regular, 18 pt): он небольшой, нейтральный и не отвлекает нас от главного текста.

Стили текста и другие визуальные элементы дизайна (цвета, фигуры, тексты, линии) должны повторяться. Это и есть рифма. С помощью повтора формируется стиль.
4. Контраст. Как добиться контраста

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

Давай сравним предыдущий визуал, если бы не было контраста:
Давай рассмотрим несколько типов контраста на примере заголовок + подзаголовок.

Контраст размеров. Заголовок делаем бОльшим кеглем, чем описание. Тем самым по масштабу выделяется заголовок.

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

Контраст всего вместе. Здесь и начертание тяжелое, и размер, и цвет — используем все способы привлечь внимание.
Еще несколько основных правил

1. Правильно создавай иерархию в тексте

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

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

К примеру, у тебя есть сплошной текст:

  1. Декомпонируй его на смысловые группы (определи, где заголовок, где текст, где цитата, что может быть декором и т.д)
  2. Разбей и обозначь иерархию:
  3. заголовок (H1 — так обозначают главный заголовок),
  4. подзаголовок (H2),
  5. текст (text),
  6. текст-декор (H3),
  7. цитата (qoute) и т.д. 
  8. Теперь дай им соответствующий стиль (кегль, начертание, цвет и т.д), где масштаб соответствует его смысловой группе. 
Давай рассмотрим пример. У нас был текст, мы сделали иерархию: заголовок первого уровня (H1), текст и заголовок второго уровня (H2)
И теперь нашей иерархии даем стили. К примеру заголовок (H1) — он самый важный, поэтому самый большой. Текст (text) тоже важен, но делаем его поменьше, поскольку он довольно объемный и нужно сделать его нейтральным, чтобы не устать читать. И есть дата, которая второстепенная, и её уместно сделать самой маленькой и даже можно сделать ее не такой яркой по цвету.
Вот еще хорошие примеры иерархии текста, попробуй самостоятельно декомпонировать его и проследить иерархию.
2. Не делай текст сильно мелким
Иначе его просто не будут читать. К тому же, не забывай, что ты находишься в контексте Instagram, где шрифт меньше 20pt — уже плохо воспринимается. Поэтому тестируй свой пост с телефона (ищи самый маленький телефон) и смотри, читается ли твой текст по масштабу.

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

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

3. Используй простые и понятные шрифты
Если это большой массив текста, не используй акцидентные/декоративные/рукописные шрифты. Какими бы красивыми они не были, их сложно прочитать. 

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

4. Следи за интерлиньяжем (межстрочным интервалом)

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

Только в заголовках. Если много строк, то текст может сложно читаться, как бы визуально хорошо он не смотрелся.
6. Не делай строки слишком длинными или слишком короткими

Самый оптимальный вариант – это примерно 60-70 символов, условно 3-4 слова, меньше — уже не очень хорошо.

7. Не оставляй вдовы и висяки в конце строки

Вдовы — это одинокое слово, которое осталось в последней строке. Редактируй текст, меняй размер так, чтобы такого не случалось.

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

Также нельзя переносить знаки пунктуации на следующую строку: тире, двоеточие, точку запятую и т.д. Мы оставляем их в конце строки.

8. Используй правильные кавычки

В кириллице мы используем «кавычки-ёлочки», а в латинице “кавычки-лапки”.

9. Используй длинное тире

Смотри, вот этот знак «-» обычно все ставят и как дефис, и как тире. Но это неправильно, навсегда забывай его и используй правильно.

1. Длинное тире —
Используем между словами в предложениях:
Он — Маяковский. Тире — это знак пунктуации.

2. Короткое тире –
Оно используется между цифрами:
5–7 мая. 100–200 пунктов

3. Дефис -
Используется в словах:
что-то, где-то, когда-либо
Где искать шрифты
Лицензия на шрифт. Во-первых, мы не используем пиратские шрифты (то есть платный шрифт, который ты скачал бесплатно). 

Используем либо бесплатные шрифты в открытом доступе, такие как Google Fonts (здесь хорошие качественные шрифты с открытой лицензией), либо покупаем их. 

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

а) не этично;
б) грозит судебным иском.

Где искать шрифты:
https://fonts.google.com/
https://www.awwwards.com/awwwards/collections/free-fonts/
https://www.myfonts.com/hotnewfonts/
https://pangrampangram.com/
https://t.me/shrift_free
https://www.behance.net/ (с запросом Free Font)

Дополнительные медиа о шрифте:
http://rus.paratype.ru/
https://minttype.com/
https://yurigordon.com/en/shop/fonts
https://type.today/ru

Telegram-каналы для насмотренности:
https://t.me/awdee
https://t.me/typeschool
https://t.me/newfonts
https://t.me/paradigm_graphics

Тема по типографики получилась довольно большая, надеемся, что тебя это не отпугнуло :)

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

Поэтому практика, практика и только практика (а еще насмотренность) поможет тебе овладеть этой темой! А ещё попробуй пройти этот тест по типографике: http://test.nimax.ru/typography
Чек-лист:

  • помни о правиле внутреннего и внешнего;
  • соблюдай принцип близости;
  • соблюдай иерархию;
  • соблюдай принцип выравнивания;
  • исапользуй принцип повтора;
  • помни о контрасте размеров, толщины и цвета;
  • не делай текст слишком мелким;
  • используй простые и понятные шрифты;
  • следи за межстрочным интервалом;
  • не используй капс в больших массивах текста;
  • не делай строки слишком длинными или слишком короткими;
  • не оставляй вдовы и висяки в конце строки;
  • используй правильные кавычки;
  • используй длинное тире.
Начать тест
Выбери правильную расшифровку иерархии:
Дальше
Проверить
Готово
Все ли ок в посте?
Дальше
Проверить
Готово
Все ли ок в посте?
Дальше
Проверить
Готово
Все ли ок в посте?
Нет, здесь проблема в иерархии. Одинаковый текстовый стиль в заголовке у перевода слова и у подзаголовка.
Верно. Здесь почему-то одинаковый текстовый стиль в заголовке у перевода слова и у подзаголовка.
Нет, здесь проблема в иерархии. Одинаковый текстовый стиль в заголовке у перевода слова и у подзаголовка.
Нет, здесь проблема в иерархии. Одинаковый текстовый стиль в заголовке у перевода слова и у подзаголовка.
Дальше
Проверить
Готово
ВЫБРАТЬ ТАРИФ
ВЫБРАТЬ ТАРИФ