что такое гарнитура в типографике
Что такое гарнитура в типографике
Гарнитура vs. шрифт: в чем разница и почему важно ее понимать?
Аудио перевод статьи
Гарнитура и шрифт — это одно и то же? Не совсем.
Хотя указанные термины зачастую используются как синонимы, между гарнитурой и шрифтом есть различия. Поскольку они не слишком значительны, может иногда возникать путаница.
Гарнитуры и шрифты всегда были и остаются важной частью брендинга. Чтобы четко сформулировать, каким должен быть дизайн, вам необходимо понять как историческое значение этих терминов, так и их современную интерпретацию. В статье мы рассмотрим эти понятия, а также различия между ними, чтобы вы могли эффективно и профессионально их использовать.
Гарнитура vs. шрифт — в чем различия?
Если гарнитура (typeface) — это набор конструктивных особенностей букв или других символов, то шрифт (font) — это совокупность символов внутри гарнитуры, отличающихся начертанием и размером. При этом семейством (font family) называют группу связанных между собой шрифтов.
Эти определения могут показаться запутанными, поэтому рассмотрим, что означает каждый термин подробнее.
Что такое гарнитура?
Гарнитура — это совокупность конструктивных особенностей букв и других символов, например, наличие или отсутствие засечек, начертание и баланс букв, интервалы и соотношение высоты прописных и строчных букв.
В зависимости от стиля можно выделить несколько категорий гарнитур. Самые распространенные из них:
С засечками
Такие гарнитуры, как следует из названия, включают шрифты с засечками. Эти шрифты обычно воспринимаются как изысканные и классические.
К примеру, Garamond — популярная гарнитура шрифта с засечками.
Bodoni и Didot — еще две популярные гарнитуры указанного типа.
Многие шрифты с засечками появились сотни лет назад и имеют богатую историю. Один из старейших шрифтов западного мира, Roman, был создан Николасом Йенсеном в 1470 году для того, чтобы сделать печатный текст более читабельным, поскольку до этого момента в европейских книгах использовался шрифт Blackletter, напоминающий рукописный текст.
Шрифт Blackletter, созданный на основе каллиграфии, которая применялась для копирования книг вручную в средние века. Изображение Toptal.com.
Без засечек
В отличие от шрифтов с засечками, у входящих в такие гарнитуры шрифтов они отсутствуют. Их можно охарактеризовать как непринужденные и неформальные.
Helvetica — известный шрифт без засечек, как Verdana и Futura.
Декоративные
Декоративные гарнитуры включают забавные, привлекающие внимание шрифты, которые в отличие от стандартных шрифтов с засечками и без имеют ограниченную сферу применения.
Например, известные декоративные шрифты: Outlaw и Morris.
Эти шрифты не используются для основного текста не только потому, что они могут отвлекать пользователя, но и по той причине, что такой текст трудно читать, особенно, если шрифт маленького размера. Хотя декоративный шрифт может отлично привлекать внимание к заголовку или наружной вывеске, он способен отпугнуть клиентов, если используется в меню или брошюре.
Рукописные
Такие гарнитуры включают шрифты, которые выглядят как написанный от руки текст. Если вы хотите показать, что предлагаете сделанные вручную, персонализированные продукты, рукописный шрифт может стать отличным выбором для вашего бренда.
Рукописные шрифты могут быть как простыми, так и витиеватыми. Среди популярных можно назвать: Kuenstler Script, Kauffmann and Brush Script.
Как и декоративные шрифты, рукописные затрудняют чтение, особенно если имеют маленькие размеры. Используйте их лишь в логотипах, заголовках или на вывесках, а шрифты с засечками и без засечек подойдут для больших фрагментов текста.
Обратите внимание, как название бренда выделено с помощью рукописного шрифта, в то время, как в оставшейся части логотипа использован простой шрифт без засечек. Логотип разработан : : scott : :.
Что такое шрифт?
Шрифт — это набор символов определенного начертания или размера, входящий в состав гарнитуры. Таким образом, обычные, жирные, курсивные либо узкие элементы гарнитуры определенного размера составляют то, что называется шрифтом.
Вот простой способ понять, чем различаются гарнитуры и шрифты. Откройте Google Docs и нажмите на раскрывающееся меню шрифтов. Справа от некоторых опций есть маленькая стрелка. Наведите курсор мыши на нее и вы увидите разные варианты, например “тонкий”, “полужирный”, “жирный”.
В этом случае главные опции — это гарнитуры, а варианты под стрелочкой — шрифты.
Встречайте семейство шрифтов
Семейство — это группа связанных между собой шрифтов. Garamond — это гарнитура, характеризующаяся набором конструктивных особенностей букв и других символов. В эту гарнитуру входит множество шрифтов. Например, курсив или полужирный шрифт или шрифт размером 14 или 16pt. Совокупность всех этих шрифтов и есть семейство.
Гарнитуры и шрифты: очень краткая история
Итак, почему мы вообще разграничиваем шрифты и гарнитуры?
Следует обратиться к тем временам, когда для печати текста использовались блочные буквы. Создавались специальные наборы таких букв, отличающиеся уникальным внешним видом, которые получили название “гарнитуры”. Символы определенного типа внутри гарнитуры, например, узкие или полужирные, размещалась в своем отсеке. Именно они и стали основой современных шрифтов.
Гарнитуры и шрифты — это еще не все
Как только вы начнете обсуждать текст и дизайн, используя свои новые знания о гарнитурах и шрифтах, вы, вероятно, также столкнетесь с термином “типографика”.
Что такое типографика?
Типографика — это то, каким образом текст организован и оформлен в дизайне. При этом он должен быть не только эстетически привлекательным, но и читабельным. Типографика предполагает не создание букв, а использование уже существующих гарнитур и шрифтов.
Чтобы эффективно использовать типографику в дизайне, необходимо выбрать правильный шрифт, размер которого будет соответствовать фрагменту текста, а затем настроить другие аспекты, например, расстояние между буквами, соотношение высоты прописных и строчных букв и т.д.
Почему это важно? Используйте термины правильно
Многие люди говорят “шрифт”, когда на самом деле имеют в виду гарнитуру, и наоборот.
Если вы можете понять из контекста, о чем именно говорит человек, действительно ли имеет значение, какой термин он использует? Важно ли, какое слово вы используете, или было бы излишне педантично каждый раз придерживаться определений из словаря?
Нам совсем не кажется, что это педантично. На самом деле мы думаем, что это необходимо, даже в современном мире, где большая часть, если не все тексты, пишутся на компьютере.
Если вы можете точно сказать дизайнеру, какой тип гарнитуры вам нравится, у него сложится общее представление о желаемом результате, но также останется пространство для творчества и поиска идеального шрифта для вашего проекта. Напротив, если вы скажете, что хотите видеть в своем дизайне конкретный шрифт, это будет очень четким указанием — что может вам пригодиться, если вы имеете точное представление о том, каким должен быть законченный проект.
Гарнитура (типографика)
Гарниту́ра в типографике — набор из одного или нескольких шрифтов в одном или нескольких размерах и начертаниях, имеющих стилистическое единство рисунка и состоящих из определённого набора типографских знаков. Гарнитура обычно содержит алфавитно-цифровые и пунктуационные знаки и специальные символы. Также существуют гарнитуры, целиком состоящие из неалфавитных символов — например, содержащие математические или картографические знаки. Термин «гарнитура» часто смешивают с термином «шрифт», значения этих слов были более различимы до появления настольных издательских систем. Различие между терминами состоит в том, что шрифт определяет свойства конкретного члена семейства шрифтов, например, полужирное или курсивное начертание, в то время как гарнитура определяет согласованный стиль семейства шрифтов.
Содержание
Анатомия шрифтовых гарнитур
Различают основные группы шрифтов: текстовые и акцидентные шрифты. Эти две группы разветвляются на множество подгрупп. Каждая гарнитура имеет своё наименование. Разработка гарнитур — сложная и трудоёмкая работа.
Типографы разработали сложный словарь, описывающий многочисленные особенности шрифтов и типографики. Некоторые из его понятий применимы не ко всем письменностям. Так, например, «засечки», которые являются чисто декоративными элементами в шрифтах европейских письменностей, могут быть похожи на детали арабских или восточно-азиатских знаков (такие как толщина штрихов), однако последние могут нести смысловую нагрузку, и их неверно называть засечками.
Засечки
 | Шрифт без засечек |
 | Шрифт с засечками |
 | Шрифт с засечками (выделены красным) |
Гарнитуры можно разделить на две основные категории: с засечками (антиква и брусковые шрифты) и без засечек (гротески). Засечки представляют собой небольшие элементы на концах штрихов букв. В полиграфии шрифты без засечек также называют гротесками (нем. Grotesk от итал. grottesco ).
Существует большое разнообразие шрифтов как с засечками, так и без них. Обе группы содержат как гарнитуры, разработанные для набора больших объёмов текста, так и предназначенные в основном для декоративных целей. Наличие или отсутствие засечек является лишь одним из многих факторов, которые учитываются при выборе шрифта.
Часто полагают, что в длинных текстах легче читать шрифты с засечками, чем без них. Исследования этого вопроса дают неоднозначные результаты, давая основание полагать, что основная причина этого эффекта в большей привычности к шрифтам с засечками. Как правило, в печатных работах, таких как газеты и книги, применяются шрифты с засечками, по крайней мере в основном тексте. Веб-сайты могут не определять шрифт и использовать пользовательские настройки браузера. Но те из них, которые задают шрифт, обычно применяют шрифты без засечек, потому что, в отличие от печатных материалов, на компьютерных экранах с низким разрешением форма засечки плохо воспроизводится.
Пропорции
Пропорциональный шрифт отображает символы разной ширины, тогда как непропорциональный, или моноширинный, шрифт отображает символы, размещенные на кегельных площадках постоянной фиксированной ширины. Любые две строки текста с одинаковым числом символов при использовании моноширинного шрифта должны отображаться имеющими одинаковую ширину, тогда как при использовании пропорционального шрифта те же две строки могут иметь совершенно разную ширину. Это происходит из-за того, что в последнем случае широкие символы (такие как буквы А, К, Ш, М, О) требуют больше места, чем узкие (такие как р, у, л, ь, и 1).
Большинство людей находит пропорциональные шрифты более привлекательными и удобочитаемыми, и поэтому эти шрифты чаще всего применяются в профессионально изданных печатных материалах. По той же причине, программы с графическим интерфейсом (такие как текстовые процессоры и браузеры) обычно используют пропорциональные шрифты. Однако многие пропорциональные шрифты содержат цифры фиксированной ширины, так что, например, колонки чисел остаются выровненными.
Классификация шрифтов
Классификация шрифтов по ГОСТ
Классификация на основе системы Максимилиана Вокса
Классификация компании Паратайп
Разработка и история шрифтов
Шрифты создаются художниками в соответствии:
Рисунок первых типографских шрифтов создавался на основе рукописных шрифтов, например, рукописного полуустава — русский, готического шрифта (готического письма) — латинский шрифт. Также существует особый шрифт — шрифт Брайля для слепых.
Шрифтовое дело в Российской Федерации
Единственным производителем шрифтов в СССР был Отдел наборных шрифтов НИИ полиграфического машиностроения (1938–1993 гг.). За годы существования отдела было разработано около 80 гарнитур. После упразднения отдела многие работавшие в нём дизайнеры (6 человек) перешли в совместное российско-американское предприятие ParaGraph. Трое из них вскоре уволились из-за низкого размера заработной платы.
Проектированием кириллических шрифтов в России занимаются несколько компаний, наиболее известными из которых являются ParaType (бывшее подразделение компании ParaGraph, образовавшееся в 1998 году после покупки в 1997 году ParaGraph американской компанией Silicon Graphics и сокращения сотрудников шрифтового отдела) и студия Letterhead (основана в 1998 году). Также созданием и продажей собственных шрифтов занимается Студия Лебедева. Помимо них, созданием шрифтов также занимаются многие дизайнеры-одиночки, не входящие в штат шрифтовых компаний, например Илья Рудерман (Гротеск Большого Города, Permian), Александра Королькова (Leksa и Leksa Sans), Джованни Лемонад (Проект бесплатных шрифтов, шрифт Bender, Fontin Sans) и многие другие, чьи работы можно найти и приобрести на MyFonts или в других магазинах и на сайте авторов.
Попавшая к пиратам в конце 1990-х годов шрифтовая библиотека ParaType является основным содержимым большинства пиратских сборников.
Практический взгляд на базовые термины и анатомию шрифтов
Учимся называть “палочки” штрихами и понимать, на что влияют засечки и заплечики
В этой статье я кратко изложу основы анатомии шрифта, которые пригодятся любому уважающему себя дизайнеру, и с особым вниманием остановлюсь на том, зачем ему все это надо.
Шрифт — один из базовых «голосов» графического дизайна наравне с цветом, формой и т.д. Это то, как говорит ваш дизайн. И как он будет это делать в каждый конкретный момент взаимодействия с пользователем, полностью зависит от вас. Кричать навязчивым фальцетом или нашептывать мягким баритоном, помогать воспринимать информацию или мешать, работать с брендом сообща, усиливая эмоциональное восприятие, или безлико информировать.
Вы можете продолжать работать на интуитивном уровне (и большинство дизайнеров так и делает), никто не мешает вам использовать любой попавшийся шрифт в любой конфигурации, не задумываясь о начертаниях, контрастности, динамике или кегле, пользователи прочитают, если очень захотят. Возможно. А возможно и не прочитают. Но если вы действительно хотите перейти из категории любитель в категорию профессионал, вам важно научиться работать со шрифтами осознанно и уметь аргументировать любое свое решение. Ну или почти любое (воодушевляющая музыка на фоне оборвалась). Хотя пусть будет любое. Немного пафоса не повредит.
Если вы хотите перейти из категории любитель в категорию профессионал, вам важно научиться действовать осознанно и уметь аргументировать свое решение.
Итак, разберемся для начала в терминологии, основных каверзных вопросах и научимся, черт возьми, называть “палочки” шрихами.
Терминология
Мы часто используем слово “шрифт” в разных ситуациях. Давайте по порядку, есть шрифт, а есть гарнитура.
Шрифт (Font) — это определенное начертание в рамках гарнитуры, а также соответствующий файл. Arial Regular, Gotham Bold, Merriweather Bold — это шрифты разных гарнитур.
Семейство шрифтов (Font Family) — это набор начертаний в рамках одной гарнитуры. В рамках гарнитуры Arial есть целое семейство шрифтов — Arial Regular, Arial Bold, Arial Italic и т.д.
Итак, гарнитурой называют общий характер, шрифтом — одно из начертаний и собственно шрифтовой файл, а когда говорят о семействе шрифтов, подразумевают совокупность начертаний, т.е. гарнитуру, у которой не одно начертание, можно называть семейством.
На практике, когда вы говорите о шрифтах в широком смысле слова, акцентировать внимание на том, что вы имеете в виду “гарнитуры”, нет особой необходимости, контекста достаточно. Но когда вы обсуждаете макет, слово “шрифт” лучше не использовать, чтобы не вводить коллег в заблуждение. Рекомендую либо оперировать понятием “гарнитура”, когда имеете в в виду Arial/Helvetica, либо понятием “начертание”, когда подразумеваете Regular/Bold.
Перейдем к составляющей шрифта, букве. Ее тоже можно назвать по-разному: буква, графема, глиф — есть ли здесь критическая разница?
Буква — это графический знак как часть алфавита, который сам по себе или в сочетании с другими знаками используется для обозначения на письме звуков, фонем и их типичных комбинаций.
Графема — более общее понятие. Графема представлена буквой если письменность строится на алфавите, или иероглифом в неалфавитных системах письма. Говоря о графеме, мы абстрагируемся от стиля и характера отдельных гарнитур, а имеем в виду сугубо то, чем фундаментально графема “А” отличается от графемы “Б”, как знак. Т.е. вы никогда не спутаете графему буквы “А” с графемой буквы “Б”.
Собственно шрифт состоит из глифов — векторных форм каждой буквы или символа. Например, Open Sans, один из самых популярных веб-шрифтов, содержит 897 глифов, включая латинские, греческие и кириллические символы.
Одна и та же графема может иметь несколько глифов как ее графических воплощений, которые могут отличаться как функционально (строчные, капительные, прописные, курсивные), так и даже просто по форме (альтернативные).
Итак, теперь вы знаете разницу между шрифтом, гарнитурой и семейством, а также графемой, буквой и глифом, а значит в разговоре с профессионалами не ударите в грязь лицом.
Уже горжусь вами. Двигаемся дальше.
Обратимся к букве, из каких элементов она состоит и как их грамотно называть.
Анатомия буквы, на что влияют детали
Разобравшись, из чего состоит буква, вы научитесь распознавать, что именно влияет на итоговый вид шрифта и то, как он воспринимается, а значит сознательнее подойдете к выбору шрифта в вашей следующей работе.
Итак, на картинке ниже вы найдете весь набор ингредиентов:
Из них значимыми для вас как для дизайнера-не-шрифтовика являются не все, рекомендую запомнить засечки, основные и соединительные штрихи, а также выносные и свисающие элементы. Итак, как именно эти элементы работают на практике и зачем вам обращать на них внимание.
Считается, что засечки заметно улучшают восприятие буквенного знака, даже если они слабо видимы. Именно поэтому в печатных изданиях дизайнеры предпочитают использовать шрифты с засечками. Помните об этом, когда подбираете шрифт для длительного чтения, в том числе в цифровом дизайне.
Соотношение между основным и соединительным штрихами определяет контрастность шрифта. Гарнитуры шрифтов с выраженным контрастом штрихов наиболее удобочитаемы. Исключением являются случаи, когда контраст выражен слишком ярко и соединительный штрих становится чересчур тонким. Неконтрастный шрифт (например, в гротесках) лучше воспринимается при чтении отдельных слов и выделений.
Обратите внимание на свисания. Любопытно, что несмотря на то, что оптически высота строчных букв одинаковая, технически это не так. Некоторые округлые буквы — например, “о”, “с” и другие — слегка заходят за baseline и x-height, чтобы визуально при печати иметь ту же высоту, что и другие буквы. Эти выступающие части и называют свисаниями.
Есть еще так называемый внутрибуквенный просвет, или контрформа. Это закрытые пространства внутри букв, таких как например “о”, “ь”, “р” и других. Эти пространства помогают глазу распознать характерные особенности шрифта. Чем больше внутрибуквенный просвет, тем лучше (при прочих равных условиях) читается буквенный знак.
Дизайнер-модернист Массимо Виньелли, культовая фигура XX века, очень здорово описал значимость формы и контрформы в типографике в фильме про Гельветику (кстати, очень рекомендую посмотреть, полтора часа времени не потраченного впустую):
“Мы думаем, что шрифт черно-белый. На самом деле он белый, вовсе не черный. Именно белое расстояние между черным и составляет шрифт. Это своего рода музыка. Не ноты, а расстояние между нотами создает музыку.”
Про Массимо много написано, он оставил миру очень вдохновляющие идеи и мысли, почитайте как-нибудь для вдохновения.
Линии (метрики) шрифта
Помните тонкую серую рамку вокруг текстового слоя в Sketch или любом другом графическом редакторе?
Почему она именно такого размера, что включает это белое пространство вокруг букв?
Внутри каждого шрифта есть встроенные шрифтовые метрики. Буквы со всеми своими выносными элементами и акцентами упорядочены на пяти базовых линиях шрифта, они же называются метриками (если хотите произвести впечатление). Здесь вам нужно помнить о самой главной базовой линии (baseline), по которой выстраиваются собственно буквы. Также есть линия прописной буквы (x-height), линии верхнего и нижнего выносных элементов (ascender и descender), а также линия заглавной буквы (cap height). И да, ascender может совпадать с cap height, а может быть ниже или даже выше.
Все вместе эти метрики в сумме с заплечиками образуют кегельные площадки для каждой буквы, высота которых и является тем самым кеглем (размером) шрифта в пунктах. Спокойно, заплечики — это всего лишь дополнительное пространство над и под выносными элементыми, которое не позволяет им в разных строках соприкасаться друг с другом (когда вы увеличиваете или уменьшаете высоту строки, вы регулируете высоту заплечиков).
Высоту строки дизайнеры называют интерлиньяжем — это расстояние от базы до базы, т.е. от базовой линии одной строки до базовой линии следующей. Число, которое вы регулируете в редакторе, — это он и есть, интерлиньяж.
“Так что там с рамкой-то в Sketch?” — спросите вы. Чтобы определить размер рамки, которая отображается вокруг текстового слоя на холсте, Sketch учитывает все выше перечисленные метрики вместе с заплечиками, т.е. высоток строки. Именно поэтому высота рамки не совпадает с высотой букв.
Второй интересный момент. Часто в дизайнеров возникает необходимость разместить в одной строке два текстовых блока разных по кеглю и/или по гарнитуре. Графические редакторы автоматически выравняют их по границам их текстовых рамок. Но baseline этих блоков в таком случае могут не совпасть (левая колонка “don’t” на примере ниже). Как быть?
Этот тот случай, когда при принятии решения дизайнеру нужно опираться на оптический результат, нежели на технический. Нужно вручную сдвинуть текстовый слой второго блока так, чтобы baseline совпали (правая колонка “do” на примере ниже).
Когда вам необходимо поместить рядом два текстовых слоя отличных по кеглю и/или гарнитуре, позаботьтесь о том, чтобы они были выронены по baseline, а не по границам рамок.
Бонус: немного о цифрах
Вы уже думали все? Но нет, еще немного ценного материала.
В типографике используются арабские и римские цифры. Если в наборе гарнитуры есть капитель, лучше римские цифры набирать ей.
Арабские цифры бывают двух видов: маюскульные и минускульные.
Маюскульные цифры все одного роста c прописными и моноширинные, поэтому их удобно использовать вне текста, в таблицах.
На самом деле, пользователи не увидят особой разницы в том, какой шрифт вы использовали, с засечками или без, учитывали ли контрастность, им без разницы воспользовались ли вы Arial или Open Sans, выровняли ли шрифты по baseline вручную или воспользовались автоматическим выравниванием. Но есть то, что будет незаметно для них самих влиять на их восприятие,— удобочитаемость, простота считывания, эмоциональный опыт. Хороший визуальный дизайн — это сила, многократно усиливающая хороший UX.
Вникайте в детали, вчитывайтесь в длинные тексты, разбирайтесь и растите. В общем, делайте дизайн качественно — и коллективный дизайнерский разум скажет вам спасибо. Молодцы, что дочитали. Всем добра!
Любите то, чем занимаетесь, и занимайтесь тем, что любите.
Ваша Alexandra Kulikovskaya