Мы взаимодействуем со шрифтами и гарнитурами практически непрерывно — прямо сейчас вы взаимодействуете с ними обоими. Понимание терминологии, связанной с типографикой, является важной частью общения о UX-дизайне.
Полезно иметь глубокое понимание того, как типографические концепции работают в контексте UX-дизайна. Правильный выбор гарнитур и шрифтов и их грамотное использование может существенно повлиять на удобочитаемость и эмоциональное восприятие. Неправильные типографические решения могут негативно сказаться на пользовательском опыте.
Гарнитура (Typeface)
Люди часто используют термины «гарнитура» (typeface) и «шрифт» (font) как синонимы, однако они обозначают разные понятия. Гарнитура — это набор символов одного дизайна, включая буквы, цифры, знаки препинания и символы. Шрифт представляет собой конкретное начертание гарнитуры. Иными словами, шрифты, имеющие схожий дизайн, группируются в гарнитуры. Например, говоря о Helvetica или Times New Roman, мы говорим именно о гарнитурах. Helvetica Bold 12 пунктов — это шрифт.
Понимание разнообразия гарнитур, настроения, которые они создают, и того, для каких целей они лучше всего подходят, является ключом к эффективному использованию типографики для создания исключительного пользовательского опыта.
Гарнитура с засечками (Serif typeface)
Гарнитуры с засечками (антиквенные гарнитуры) имеют небольшие декоративные штрихи на концах букв, называемые засечками (serifs). Это один из старейших видов шрифтов, история которых восходит к 1470-м годам и римскому шрифту Николя Жансона (Nicolas Jenson’s Roman Type).
Гарнитуры с засечками являются очень традиционными и были популяризированы первыми печатными журналами. Благодаря богатой истории и длительному использованию, они могут вызывать у пользователей ощущение классики, романтики и изысканности. Они идеально подходят для продуктов или брендов, которые стремятся создать надёжный, респектабельный и даже формальный образ.
Гротескные гарнитуры (Sans-serif typeface)
Гротескные гарнитуры, или рубленые шрифты (sans-serif), не имеют засечек. Это означает, что у них отсутствуют декоративные штрихи на концах букв. Хотя такие шрифты выглядят достаточно современно, первая гарнитура без засечек — Caslon Egyptian — была разработана ещё в 1816 году Уильямом Кэзлоном IV. Гротескные гарнитуры стали популярны в печатной рекламе и часто считаются более удобными для чтения на экране, хотя этот вопрос до сих пор вызывает споры.
Самыми популярными рублеными шрифтами являются Arial, Helvetica и Tahoma, которые совместимы практически с любыми устройствами, хотя некоторые считают, что им не хватает индивидуальности.
Каллиграфическая гарнитура (Script typeface)
Каллиграфические гарнитуры происходят от почерка и каллиграфии и чаще всего используются в таких элементах дизайна, как логотипы. Яркий пример — логотип Coca-Cola.
Многие такие шрифты могут быть сложны для чтения. По этой причине калиграфическиегарнитуры не подходят для больших текстовых блоков или мелкого текста.
Совет! Используйте эти гарнитуры для заголовков, названий и логотипов. Они могут создавать как непринуждённое, так и очень формальное настроение.
Брусковые гарнитуры (Slab Serif typeface)
Брусковые гарнитуры (Slab serif) произвели настоящий переворот в типографике, когда появились в XIX веке, благодаря своему мощному и прочному виду. У них массивные, толстые штрихи и ярко выраженные засечки, которые могут быть как закруглёнными, так и угловатыми. Брусковые шрифты широко применялись в ранних газетных рекламных объявлениях, так как их блочные формы выделялись сильнее, чем традиционные шрифты с засечками или гротески.
Один из недостатков брусковых гарнитур заключается в том, что их бывает сложно сочетать с другими гарнитурами из-за тяжёлых, массивных форм, которые могут подавлять окружающий текст. Обычно их лучше использовать для коротких текстов, таких как заголовки и названия.
Акцидентные гарнитуры (Display typeface)
Акцидентные гарнитуры (Display typefaces) отличаются разнообразием. Они подходят для широкого спектра ситуаций, поскольку черпают вдохновение из самых разных типов шрифтов и стилей. Они впервые появились во время промышленной революции и чаще всего использовались для афиш, плакатов и коммерческой полиграфии.
Акцидентные гарнитуры характеризуются уникальным и выразительным дизайном, предназначенным привлекать внимание и передавать определённое настроение или сообщение. В современном UX-дизайне акцидентные шрифты чаще всего используются в заголовках и названиях. Они обычно не подходят для основного текста, поскольку их трудно читать при мелком размере.
Моноширинные гарнитуры (Monospaced typeface)
В моноширинных гарнитурах (Monospaced typefaces) каждая буква занимает одинаковое горизонтальное пространство — вспомните шрифты печатных машинок или шрифты из MS-DOS. Это контрастирует с другими видами шрифтов, где каждая буква имеет пропорциональную ширину, соответствующую её форме.
Моноширинные гарнитуры проще воспринимать при быстром просмотре (сканировании), чем пропорциональные. Они часто используются при написании кода, поскольку с их помощью легче обнаружить ошибки. Однако в целом у них ниже удобочитаемость по сравнению с пропорциональными шрифтами.
Распространённые моноширинные гарнитуры включают Courier, Courier New, Apercu Mono и Space Mono.
Рукописные гарнитуры (Handwriting typefaces)
Рукописные гарнитуры, подобные почерку, обычно выглядят очень непринуждённо и используются преимущественно для придания дизайну творческого акцента. Они идеально подходят для имитации подписи человека, например, для имитации подписи в конце электронного письма или рассылки.
Популярность рукописных гарнитур значительно возросла в середине XX века, особенно после появления техники фотонабора (phototypesetting). Эти гарнитуры хорошо подходят для имитации личной подписи, например, в конце электронного письма или новостной рассылки.
Шрифт (Font)
Шрифт — это конкретное начертание гарнитуры. Иными словами, шрифт представляет собой отдельную вариацию конкретной гарнитуры, отличающуюся по стилю, насыщенности (жирности) и размеру.
Например, Helvetica Bold 12 пунктов — это шрифт (определённое начертание, размер и насыщенность (жирность) гарнитуры Helvetica).
Первые шрифты представляли собой отдельные наборы металлических литер, вручную выставлявшихся для печати страниц. Поскольку эти литеры отливались из металла, каждая вариация по размеру и начертанию требовала отдельного набора символов, называемого «кассой» (sorts).
Насыщенность шрифта (Font weight)
Насыщенность (или жирность) шрифта (font weight) обозначает толщину линий (штрихов) символов конкретной гарнитуры.
Шрифты могут варьироваться от очень тонких до очень жирных начертаний (например, от Thin или Light до Bold и Black).
Совет! Выбирайте гарнитуры с большим количеством вариаций по насыщенности. Это позволит создавать более сложную визуальную иерархию и эффективно расставлять акценты в вашем дизайне.
Распространенные начертания шрифтов (Common font styles)
Существуют различные типы шрифтовых начертаний, которые придают тексту особый акцент и характер. Среди наиболее распространённых:
- Обычное начертание (Regular): Наиболее эмоционально нейтральный вариант начертания, обычно используемый по умолчанию.
- Жирное начертание (Bold): Придаёт тексту визуальную тяжесть и используется для выделения или акцентирования важной информации.
- Курсивное начертание (Italic): Шрифты с небольшим наклоном вправо, которые придают тексту стильность, выделяют отдельные слова или подчёркивают иностранные слова и названия.
Системные и веб-шрифты
Системные шрифты (System fonts или Desktop fonts) предназначены для установки на компьютеры и используются приложениями, установленными на вашем устройстве.
Основные преимущества системных шрифтов:
- не требуют внешней загрузки и всегда доступны на устройстве;
- быстрее загружаются, так как уже установлены;
- гарантируют одинаковое отображение на разных устройствах.
Веб-шрифты (Web fonts) предназначены специально для использования на веб-страницах с помощью декларации CSS <@font-face>. Форматы веб-шрифтов включают TrueType, WOFF, EOT и SVG. Использование веб-шрифтов позволяет дизайнерам создавать более индивидуальный внешний вид сайта, однако они могут влиять на скорость загрузки страницы.
Источники
- Nicolas Jenson | French printer | Энциклопедия Британника
- «Caslon Egyptian»: The First Commercially Produced Sans-Serif Typeface : History of Information
- Display type – Fonts Knowledge — Google Fonts | Сервис Google Fonts
- Phototypesetting — Wikipedia
- System font, or web-safe font – Fonts Knowledge — Google Fonts | Сервис Google Fonts
- Using web fonts – Fonts Knowledge — Google Fonts | Сервис Google Fonts