Что такое типографика: основные понятия и правила

типографика баннер

Хорошая типографика — один из главных элементов, которые отличают плохой дизайн от хорошего.

Это правила оформления текста в дизайне. Посмотрите на 2 варианта дизайна ниже. Какой из них выглядит более профессиональным? Верно, второй. Потому что он сделан с соблюдением правил типографики. Прочитав эту статью, вы научитесь грамотно оформлять текст, который будет выглядеть не хуже, чем у профессиональных дизайнеров. Ну а после прочтения переходите к практике в графическом редакторе Canva!

template110519

Запомните: разные объемы текста и заголовки оформляются по-разному.

Как оформить большой объем текста

Большой текст прежде всего должен легко читаться. Что именно нужно для этого делать?

Как правильно выровнять текст

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

Чтобы выровнять текст в Canva, выделяем его и нажимаем на иконку «Выравнивание» до тех пор, пока не получим нужный результат.

2-1-110519

Как изменить выравнивание в Canva

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

Как выбрать правильный размер шрифта и изменить его в Canva

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

Как изменить кегль в Canva смотрите ниже.

3-110519

Как выбрать размер шрифта в Canva

Вот такой шаблон в итоге у нас получился.

Как вычислить идеальный интерлиньяж

Интерлиньяж — это межстрочное расстояние, определяющее плотность строк на странице. Чем меньше значение интерлиньяжа, тем визуально тяжелее выглядит текст.

Межстрочное расстояние зависит от размера шрифта и длины строки. Обычно интерлиньяж составляет 120-125% (1,2 — 1,25 в Canva) от используемого размера шрифта. Например, вы выбрали кегль 16.

Рассчитать значение можно по классической формуле: (16 * 120) : 100=19,2. То есть рекомендуемый интерлиньяж — 19-20.

По правилам типографики чем длиннее строка, тем больше должен быть межстрочный интервал. То есть в тексте с длинными строками можно установить значение 130-135%.

Чтобы изменить интерлиньяж в Canva, нужно выделить текст, а затем выбрать нужное значение в разделе «Интервалы» — «Высота строки».

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

Как подобрать и изменить межбуквенный интервал

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

В Canva межбуквенный интервал меняется в разделе «Интервалы» — «Письмо».

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

Как сделать текст читабельным: абзацы

Чтобы текст легко читался, разделите его на абзацы. Сделайте абзац в Canva, дважды нажав Enter после предложения.

Как выбрать подходящий шрифт

Для печати подойдут шрифты с засечками — черточками, завершающими все элементы буквы. Например, Times New Roman, Book Antiqua, Alice, Merriweather, Georgia, PT Serif.

Для экрана лучше выбрать шрифты без засечек: Open Sans, Roboto, Verdana, PT Sans, Panton и т.д.

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

Для изменения шрифта в Canva выделите текст, и в разделе со шрифтами выберите нужный. В этом шаблоне мы использовали декоративный шрифт, чтобы выделить имя и фамилию получателя сертификата.

Как оформить маленький объем текста

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

Как выравнивать небольшое количество текста

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

Как выбрать правильный интерлиньяж, если текста мало

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

Как оформить заголовок

Заголовки должны выделяться на фоне основного текста.

Как выбирать и сочетать шрифты

Важно, чтобы шрифт заголовка отличался от основного. Классический вариант — шрифты с засечками в заголовке и шрифты без засечек в основном тексте. Например, хорошо сочетаются Georgia и Verdana, Merriweather и Open Sans или Roboto. Если дизайну нужно задать определенное настроение, используйте декоративные шрифты:

Bicubik, Evolventa и т.д. Или посмотрите нашу большую подборку красивых рукописных шрифтов. Но не забывайте важное правило типографики — не больше 2-3 шрифтов в одном макете.

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

  • Thin – тонкий;
  • Regular – обычный;
  • Italic – курсив;
  • SemiBold – полужирный;
  • Bold – жирный;
  • Bold Italic – жирный курсив;
  • ExtraBold – экстражирный.

Для заголовков подходит SemiBold, Bold, ExtraBold. Для подзаголовков можно выбрать Italic. А если для основного текста вы использовали Thin, для заголовка может подойти и Regular.

На первом изображении шрифт с начертанием Bold, на втором — Italic, а на третьем Thin. Видите, как они отличаются?

Как подобрать размер шрифта для заголовка

Важное правило типографики: размер заголовка должен быть больше, чем размер основного текста. Есть специальная формула расчета — кегль текста * 1,6 = кегль заголовка. Например, если вы выбрали размер текста 16, умножьте его на 1,6, и вы получите идеальный размер заголовка. В нашем случае это 25,6pt.

Вам интересно, почему именно это число — 1,6? Все просто. Это золотое сечение. Если вы хотите узнать о нем больше, прочитайте статью о применении правила золотого сечения в дизайне и в жизни.

Учтите, что кегль подзаголовков всегда меньше, чем у заголовков. Это нужно для соблюдения иерархической структуры. В примере выше неплохо будут смотреться подзаголовки размером 19pt.

Попробуйте поэкспериментировать с межбуквенным интервалом

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

Как сверстать текст, пользуясь правилом внешнего и внутреннего

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

Внутреннее расстояние всегда должно быть меньше внешнего:

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

На этой иллюстрации расстояние между строками является внутренним по отношению к расстоянию между абзацами. Расстояние между заголовком и текстом тоже является внутренним по отношению к расстоянию между абзацами. А расстояние между строками — это внутреннее по отношению к расстоянию между заголовком и текстом.

Вот и все базовые правила типографики, которые помогут сделать любой дизайн профессиональным. Если вы хотите узнать больше и сделать дизайн еще лучше, почитайте наш экспресс-курс по основам дизайна. Развивайтесь, экспериментируйте с дизайном и шрифтами в Canva и становитесь круче!

Подписывайтесь на обновления в Телеграме, Фейсбуке, ВКонтакте и Яндекс Дзене, чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!

Ваше секретное средство для потрясающих дизайнов