Типографика: что это такое, как используется в дизайне и копирайтинге

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

Типографика как отдельная дисциплина получила распространение ещё в XI веке.

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

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

Что ж, давай для начала рассмотрим основные термины и понятия, а потом поговорим о том, как применить типографические приёмы в копирайтинге!

Шрифты и базовые понятия типографики

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

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

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

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

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

Стили шрифтов

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

Шрифты включают 2 большие группы.

Курсив

Угловатый каллиграфичный шрифт, который был создан в качестве имитации движения рукописных букв при письме. Они специально разрабатывались под определенные стили произведений и были весьма схожи. Однако некоторые символы, такие как a, f и g имели тенденции к полному изменению формы при написании их курсивом.

Наклонные шрифты

Более строгие и не такие живые, как курсивы. Они использовались при письме в меньшей степени, так как не могли сильно контрастировать с прямыми аналогами.

Вес шрифта

В начале 19–20 веков главным сторонником создания больших семейств шрифта был Моррис Фуллер Бентон. Необходимо было создать различные по смысловой нагрузке типы шрифта, так появились жирные и полужирные шрифты.

Причем одни гарнитуры, например — Neue Haas Unica, включают не только основные, но и дополнительные весовые шрифты. К ним относят: ультратонкие, тонкие, стандартные, легкие, средние, полужирные, жирные, сверхжирные и жирные насыщенные. Такое разнообразие шрифтов позволяет создать на одной странице гармоничную иерархию шрифтов и использовать ее в качестве визуального приема демонстрации информации.

Типы файлов шрифтов

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

Дальше основные типы.

Файлы PostScript (.pfb, .pfm, .lwfn, .ffil)

Они были введены в пользование в 1980-х годах, а для работы понадобится создать 2 файла. Один нужен для отображения на экране, а второй при печати. Причем данный файл не является кроссплатформенным (не подходит одинаково для разных операционных систем), поэтому устройства на Mac и Windows требовали создания разных файлов.

Максимальный объем файла — 220 символов.

ФайлыTrueType Font (.ttf)

Были созданы в начале 1990-х годов Apple и Microsoft. Данный тип файла сглаживает и дополнительно выравнивает все контуры шрифта, чтобы он хорошо смотрелся и был различим даже при низком разрешении. Совершается это при помощи программных инструкций и носит название хинтинга, однако доступно это далеко не для всех шрифтов.

Максимальный объем файла — 65 000 символов, при этом файл для просмотра и печати един.

Файлы OpenType Font (.otf)

Были разработаны в те же времена, что и TrueType Font. Они поддерживают Unicode, благодаря чему один файл может содержать от 65 000 глифов (графических изображений конкретных символов). Ранее для каждого языка был необходим отдельный файл, теперь же они все хранятся в одном файле вместе с росчерками, стилями цифр и пиктограммами. Данный тип также является кроссплатформенным.

Цифры, символы, знаки

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

К примеру, такие стили как Old Style и Lining имеют различное выравнивание относительно одной и той же базовой линии. Также цифры в стилях Proportional и Tabular различной ширины, из-за чего даже в пределах разных строк они могут визуально отличаться друг от друга.

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

• Lining Figures (выровненные цифры) — классические цифры, которые находятся по умолчанию в гарнитуре. Они расположены на базовой линии и отлично смотрятся вблизи заголовков или заглавных букв.
• Proportional Figures (пропорциональные цифры) — имеют вариацию ширины и формы, не выравниваются по вертикали. Применяется при написании основного текста, так как они хорошо вписываются в него.
• Tabular Figures (табличные цифры) — обладают заданной шириной, поэтому отлично подходят при создании наборных таблиц, диаграмм или списков. Главный плюс в том, что они автоматически подвергаются кернингу (избирательному изменению интервала межу буквами в зависимости от их размеров).

Совет! Не используй этот стиль для блоков текста, так как он будет выглядеть грубо и восприниматься как отсутствие или пренебрежение кренингом.

Надстрочные и подстрочные индексы

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

В зависимости от места применения они могут быть выровнены:

• по верхнему краю — указание числителей, математических формул;
• по базовой линии — указание знаменателей;
• ниже базовой линии — указание химических формул.

Капитель

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

Сейчас капитель создается компьютером, поэтому нужно следить за его исполнением.

Совет! Избегай кнопки Small Caps в InDesign, так как шрифт будет выглядеть очень легким и невыразительным.

Лигатуры

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

Приведем примеры:

Стандартные лигатуры упрощают кернинг, когда символы находятся в горизонтальной плоскости и занимают много места. Например: буква f из-за хвостика занимает место сверху, из-за чего используют комбинации букв fl, ffi и ffl. Они различаются в зависимости от языка лигатуры.

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

Дефис и тире

Частая ошибка не только начинающих, но и опытных специалистов. Они выглядят одинаково, но от длины штриха зависит его значение.

Давай разберем подробнее:

• Дефис (-) — короткий символ, который применяется при переносе слов, разделении телефонных номеров, соединение сложных слов.
• Короткое тире (–) — чуть длиннее дефиса и по ширине соответствует латинской N. Применяется при обозначении времени.
• Длинное тире (—) — по длине соответствует латинской букве M. Применяется как замена запятым, круглым скобкам или двоеточиям. Может быть декоративным элементом при показе мысли.

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

Верстка — практическое применение тех навыков, которые мы рассматривали ранее в статье.

Упорядочим наши правила.

1. Создай иерархию

Это значит, что нужно использовать различные заголовки для структуризации текста. Например: главный заголовок (h1) и подзаголовки (h2, h3, h4 и далее).

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

2. Следи за количеством символов

Одна строка должна содержать не более 60 символов для латиницы и 70 для кириллицы. Это правило необязательно, но позволяет установить оптимальную длину предложения, при которой читатель не потеряет интерес.

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

3. Используй выравнивание по левому краю

Текст с центровым или правосторонним выравниваем воспринимается сложнее.

4. Обращай внимание на списки

Список — перечень преимуществ или описание работы, поэтому он должен быть максимально удобным и полезным. Они бывают маркированные и нумерованные, у каждого свои особенности.

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

5. Избегай «вдов» и «сирот»

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

6. Учитывай правила тире и дефиса

Совет! Тире используется в пределах предложения, а дефис — в пределах слов.

Комбинации для компьютера:

• Длинное тире на Windows: удерживай Alt+0151, среднее: Alt+0150.
• Длинное тире на MacOS: Option+Shift+-, среднее: Option+-.

7. Используй кавычки

В русском языке используют французские кавычки «» и только их!

Как поставить?

• На Windows Alt+0171 и Alt+0187.
• На MacOS — Option+Shift+= левая кавычка, а правая — Option+ =.

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

Они нужны, если часть текста переносится на другую строку и читать его становится неудобно.

Комбинации на клавиатуре для постановки неразрывного пробела:

• на Windows Ctrl+Shift+пробел;
• на MacOS Option+Shift+пробел.

Иллюстрирование текста: важные рекомендации

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

Применяй основные правила грамотной иллюстрации.

Используй картинки, арты

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

Найти их можно как на просторах интернета, так и на бесплатных стоковых сервисах.

Учитывай композицию

Объекты должны быть гармонично связаны друг с другом и окружающим текстом. Для правильного расположения советуют использовать правило золотого сечения.

Используй правило третей

При этом общая композиция разделяется на 9 частей и образуются 4 опорные точки. На них мы и накладываем наши изображения, но не на все, а на 2 правые точки.

Используй гифки и видео

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

Не забивай все пустое пространство

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

А также:

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

Ключевые книги по типографике

Среди ключевых книг по основам типографики можно выделить следующие.

«Живая типографика» Александры Корольковой

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

«Типографика и верстка» Артема Горбунова

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

«Новая типографика» Яна Чихольда

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

Заключение

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

Комментарии (0)