Посты Пофлудить Екатерина Полковникова 9 октября 2020

Полное руководство по основам типографики

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

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

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

Гарнитура и шрифт

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

  • Гарнитура ­— это группа символов, имеющих общую ДНК. Например, Alegreya Sans отличается от семейства шрифтов Rockwell Std.
     
  • Шрифт — это особый набор глифов в гарнитуре. Например, шрифт Franklin Gothic URW Light размером 12 пунктов отличается от шрифта Franklin Gothic URW Light размером 14 пунктов. Если мы говорим о разном весе, то используем то же определение: 12 пунктов Franklin Gothic URW Light отличается от 18 пунктов Franklin Gothic URW Book.

На протяжении многих веков текст набирался вручную, и каждая буква представляла собой небольшой кусок литого металла. Каждая буква хранилась в деревянном шрифтовом ящике, который был разделен на небольшие отсеки. Каждый конкретный шрифтовой ящик (type) содержал в себе полный алфавит и другие глифы того же размера. Следовательно, термин «шрифт» (type) имел очень специфическое значение, отличное от слова «гарнитура» (typeface).

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

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

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

  • Курсив или истинный курсив — это угловатые шрифты, на которые сильно влияет каллиграфия. Их анатомия наклонена и имитирует органическое движение рукописных букв. Курсивы, специально разработанные для соответствующих им прямых шрифтов, похожи по форме, за исключением нескольких символов. Строчные символы, такие как a, f и g, имеют тенденцию к значительному изменению формы, если они выделены курсивом.
     
  • Наклонные шрифты менее каллиграфичны по стилю по сравнению с курсивом. Ни один из глифов в наклонных шрифтах не проходит курсивное преобразование. Некоторые глифы могут быть слегка наклонными, в то время как другие подвергаются тщательной корректировке, чтобы сохранить тот же стиль, что и их прямые аналоги. При включении в блок текста наклонные шрифты недостаточно контрастируют с их прямыми аналогами.

Вес шрифта

Моррис Фуллер Бентон был сторонником создания больших шрифтовых семейств в конце 19 - начале 20 веков. Идея заключалась в том, что знаки в семействе будут иметь общую ДНК с небольшими различиями.

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

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

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

  • Файлы PostScript (.pfb, .pfm, .lwfn, .ffil) были разработаны Adobe в середине 1980-х годов. Компьютеру понадобятся два отдельных файла: один для отображения на экране, а второй для печати. Файл PostScript не является кроссплатформенным — для компьютеров Mac и Windows требовались разные файлы. Это стало проблемой при работе с файлами в разных операционных системах. Файл может содержать не более 220 символов.
     
  • Файлы TrueType Font (.ttf) были разработаны Apple и Microsoft в начале 1990-х годов. Этот тип файла сглаживает контуры каждого символа при его растеризации при помощи программных инструкций (хинтинг) для достижения высокого уровня разборчивости на устройствах с низким разрешением. Включение хинтовки в шрифт заняло много времени, и не все шрифты используют преимущества этой технологии. Один файл содержит данные и для отображения на экране и для печати, всего не более 65 000 символов.
     
  • Файлы OpenType Font (.otf) были разработаны Adobe и Microsoft в конце 1990-х годов. Эти шрифты поддерживают Unicode, что означает — один файл OpenType может содержать более 65 000 глифов. Раньше гарнитуры с поддержкой нескольких языков имели отдельные файл, а шрифты OpenType могут хранить их все в одном файле, включая росчерки, стили цифр, пиктограммы и многое другое. Этот тип файла является кроссплатформенным: один и тот же файл можно использовать на компьютерах Mac и Windows.

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

Стили цифр: Old Style, Lining, Proportional, Tabular

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

Стили цифр Old Style и Lining выравнены относительно базовой линии по-разному. А цифры в стилях Proportional и Tabular имеют разную ширину, и, если используются в нескольких строках, эти цифры могут не совпадать. Давайте рассмотрим разные стили цифр и то, когда их использовать:

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

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

(В русской типографике не принято, зато широко используется в западной, в основном в шрифтах с засечками) — прим. переводчика.

Tabular Figures (табличные цифры) имеют заданную ширину, как у моноширинных шрифтов. Этот стиль цифр идеально подходит, если вы планируете наборные таблицы, диаграммы или нумерованные списки, поскольку они будут выравниваться по вертикали без необходимости кернинга. Избегайте использования этого стиля для блоков текста, так как равномерная ширина будет восприниматься как цифры с плохим кернингом.

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

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

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

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

Капитель

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

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

(Капитель редко применяется в русской типографике в качестве выделительного начертания. Однако капитель может использоваться при оформлениия заголовков и надписей.) — прим. переводчика

Лигатуры: стандартные и произвольные

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

  • Стандартные лигатуры помогают с кернингом, когда некоторые символы занимают горизонтальное пространство следующего символа. Например, буква f имеет тенденцию занимать пространство из-за свисающего конца. Наложение увеличивается с обеих сторон при использовании курсивного шрифта. Типичные английские лигатуры включают комбинации букв, такие как fi, fl, ffi и ffl. В зависимости от языка лигатуры могут быть разными.
     
  • Произвольные или декоративные лигатуры не обязательно помогают с кернингом, но являются стилистическими особенностями шрифта. Этот стиль лигатуры имеет каллиграфический вид и может добавить индивидуальности символам. Комбинации букв, такие как ct, sp и st, имеют особый стиль соединения между символами.

Дефисы и тире

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

  • Дефис (-) — это короткий знак, используемый для переноса слова или в конце строки для разрыва слова. Дефисы обычно используются для разделения цифр в телефонных номерах или для соединения сложных слов, таких как «пол-лимона».
     
  • Короткое тире (–) (en dash) длиннее дефиса, а ширина обычно соответствует ширине заглавной латинской N. Используется для обозначения продолжительности времени.
     
  • Длинное тире (—) (em dash) — это самое длинное тире, и его длина обычно соответствует длине заглавной латинской буквы M. Оно часто используется вместо запятых, круглых скобок или двоеточий. Длинные тире также используются для обозначения сильного разрыва в структуре предложения или изменения мысли или акцента. На пишущих машинках нет длинного тире (только дефисы), поэтому некоторые писатели использовали два дефиса вместо длинного тире. Обратите внимание, что это неверно с точки зрения типографики.

Амперсанд

Один из самых причудливых символов гарнитуры — амперсанд (&). Этот символ представляет собой стилизованное изображение «et», что на латыни означает «и». Дизайнеры часто используют возможность создать свой амперсанд как способ покрасоваться, поскольку это может быть символ, содержащий много характера и индивидуальности.

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

Коммерческие символы (™ ® ©)

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

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

Если вы используете символ ™ или ® в размере текста, установите его меньше половины высоты строчной литеры. По мере увеличения текста символы должны уменьшаться в размере для более четкого вида. Высоту символа © сопоставьте с высотой строчных или прописных букв.

Типографика в деталях

Разборчивость

Разборчивость относится к анатомии шрифта и общей ДНК символов. Это связано со способностью читателя отличать одну букву от другой. Есть несколько характеристик, которые способствуют разборчивости шрифта, например, высота по оси x, ширина символа, вес, внутрибуквенный просвет, засечки, контрастность штрихов и т.д.

Читабельность

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

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

Размер

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

Длина строки

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

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

Интерлиньяж

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

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

Трекинг

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

Кернинг

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

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

Типографское выравнивание

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

Четыре основных стиля выравнивания:

  • По левому краю: если вы набираете большие объемы текста, выравнивание по левому краю — это отличный вариант для языков, которые читаются слева направо. Попробуйте использовать переносы, чтобы край на правой стороне был приятно неровным (подробнее о рваных краях в следующем разделе).
     
  • По центру: используйте выравнивание по центру для более коротких текстов, таких как заголовки, официальные приглашения и вводный текст. Избегайте использования этого стиля для длинных текстов, так как их будет трудно читать из-за неровных краев.
     
  • По правому краю: смещение вправо распространено в языках, которые читаются справа налево, таких как иврит и персидский. Используйте этот стиль для нескольких строк или при необходимости (цитаты, боковые панели и примечания).
     
  • По ширине: текст по ширине выравнивается по обеим сторонам одновременно. Этот стиль наиболее распространен в книгах и газетах, главным образом для экономии места и размещения как можно большего количества символов в одной строке. Используйте переносы при использовании этого стиля, чтобы избежать больших промежутков между словами.

Рваные края и коридоры

Неровный край на противоположной стороне выровненного левого (неровного справа), ровного правого (неровный слева) или выровненного по центру текста называется «рваный». При настройке шрифта обращайте внимание на рваные формы краев, поскольку они иногда могут отвлекать, если не настроены должным образом. Вы можете исправить рваные края вручную, разорвав строки там, где это необходимо, или расставив переносы в словах. Хороший рваный край — плавный.

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

«Висячие» строки

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

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

Вот и все

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

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

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

Автор: Laura Keung

12 тыс. 8
Печать Жалоба

Комментарии 8

Спасибо!Очень детально

Екатерина Салют!
Такие материалы затребованы!

Спасибо большое, Екатерина! Интересный и познавательный материал, много вообще не знал.

Спасибо! Интересная и очень нужная информация!

Спасибо за те основы типографики, которые Вы изложили в данной статье. Было очень интересно.

Спасибо большое за важную статью.

Добавить комментарий / работу
Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее