В статье описывается понятие типографики. Раскрывается определение шрифта и его составляющих. Подробно рассматриваются правила работы с типографикой в веб-дизайне. Автор уделяет внимание важности соответствия шрифта проекту.
Ключевые слова: типографика, шрифт, адаптивный дизайн, засечка, веб-дизайн.
Типографика одна из важных составляющих дизайна и ключевой инструмент при проектировании сайтов. Люди взаимодействуют с ней на протяжении многих веков. В данной статье большое внимание уделяется рассмотрению типографики в контексте веб-дизайна.
Современная типографика — это искусство, которое призвано сделать сложный материал простым, а неинтересный товар — популярным [3].
Неотъемлемая и главная часть типографики — шрифт.
Шрифтом обычно называют графическую систему изображения знаков, имеющую свойственное только ей начертание [2]. Единицей шрифта считается буква.
Русскоязычные специалисты и обычные пользователи в большинстве случаев используют кириллические и латинские шрифты. Кириллический шрифт моложе латинского. Это связано, в первую очередь, с пересмотром состава кириллицы Петром I. Была проведена реформа, и для светской и уставной печати начали использовать антикву. Последующие века шрифт трансформировался и видоизменялся. Это длительный процесс, который происходит и сейчас.
Шрифт отражает идею проекта, так как способен повлиять на отношение к проекту. Существует несколько категорий шрифтов. Во-первых, шрифты делятся на две большие группы: с засечками и без засечек. Это необходимо знать как типографам и дизайнерам, так и верстальщикам.
Засечка, или сериф, — один из важнейших элементов шрифта. Настолько важный, что, даже если в самом шрифте нет засечек, упоминание о них все равно есть в названии класса таких шрифтов: sanserif — «без засечек» [1].
Существют следующие виды шрифтов:
— — Антиква — шрифты с засечками.
Антиква подразделяется на следующие категории: старого стиля, переходная, нового стиля, латинского стиля, брусковая. Первая наборная антиква поялилась в Италии и Германии в начале XV века.
— Гротески (рубленные) — шрифты без засечек.
Классификация гротесков: старые гротески, новые гротески, геометрические, гуманистические, антиква и прочие.
— Готические — данные шрифты были распространены в XIII-XVI веках. Различают следующие виды готических шрифтов: текстура, швабахер, фрактура, ротунда.
— Акцидентные — предназначенные для акцидентного набора. К ним иногда относят и рукописные шрифты.
Следует подробнее остановиться на акцидентных шрифтах. Акцидентный шрифт отличается от наборного своей декоративностью, выразительностью и архитектурой. Он может быть менее читабелен, но главная информация должна считываться посредством визуальных образов. Основная цель акцидентного шрифта — привлечь внимание потребителя, пользователя или читателя.
Из этого следует, что у каждой из этих шрифтовых групп свои задачи. Гротески XX века хорошо справляются с нейтральными задачами. Шрифт передает потребителю не только прямое содержание сообщения, но и вызывает у человека определенные ассоциации. Этот эмоциональный отклик зачастую субъективен, ведь он основывается на жизненном опыте человека и степени его образованности, однако посредством опроса фокус-групп были выявлены схожие реакции на определенные виды гарнитур [2].
То есть, необходимо смотреть на все шрифты через контекст истории и принадлежности к стилю. Это необходимо для передачи характера бренда. Дизайнеру следует для начала выявить задачу и только потом подбирать шрифт. Многие люди не замечают соответствия шрифтов для айдентики или сайтов, в которых выбранная гарнитура используется. Но если потребитель не осознает этой взаимосвязи, совершенно не значит, что ее нет. Мы можем испытывать когнитивный диссонанс или недоверие к бренду на интуитивном и подсознательных уровнях.
Есть определенные правила работы с типографикой. И если в графическом дизайне и плакатном искусстве дизайнеры часто нарушают правила для достижения определенных декоративных эффектов, то не стоит ими пренебрегать в верстке книг и журналов, а также в веб-дизайне и разработке мобильных приложений.
В контексте веба правильная работа с типографикой играет важную роль. Одной из главных причин этого является важность структурирования контента в веб-пространстве. Это продиктовано феноменом клипового мышления.
Чем больше элементов использовано, например, на сайте, в буклете или листовке, тем разнообразнее они по своему содержанию и оформлению, тем выше потребность в четкой структурированности пространства. В данном случае основной задачей типографики является становление частью графических композиций [5]. Правила типографики обширны, ибо они включают в себя: все параметры шрифта (начертания, кернинг, кегль, интерлиньяж и т. д.), расположение текста, тонкости расстояний между параграфами, красной строки в русской типографике, её уместное использование, а также расстояние между заголовками и основой массой текста и т. д. [4].
Рассмотрим основные правила работы с типографикой в вебе.
— Размер пункта — это размер шрифта. В печати наиболее удобный диапазон для основного текста — 10–12 пунктов. В Интернете — 15–25 пикселей.
— Межстрочный интервал — это расстояние между строками по вертикали. Он должен составлять 120–145 % от кегля. При верстке сайта, пользуясь каскадными таблицами стилей (CSS), можно использовать свойство line-height.
— Длина строки — это ширина текстового блока по горизонтали. Длина строки должна составлять в среднем 45–90 символов в строке
— Для грамотного структурирования контента важно использование различных начертаний. (Regular, Bold, Light).
— Висячих предлогов следует избегать.
— Если расстояние между символами выглядит неровно, можно поправить его с помощью кернинга, руководствуясь правилом: «Пространство между символами должно быть одинаковым».
При соблюдении этих правил проект будет выглядеть композиционно правильным, текст будет хорошо считываться и восприниматься пользователем.
В заключение необходимо подчеркнуть, что типографика в дизайне является первостепенным элементом, наряду с композицией. Она важнее анимации и ярких графических решений. Кроме того, она выполняет функции инклюзивного дизайна, рассчитанного на доступность всем. Поэтому необходимо выбрать правильный и соответствующий идеям проекта шрифт, подобрать оптимальные размеры, кегль и интерлиньяж. В веб-дизайне функциональность всегда важнее графических решений. Дизайнеры делают продукт для человека, и он должен быть удобным, простым и понятным.
Литература:
- Гордон Юрий. Книга про буквы от Аа до Яя. — Москва: Издательство студии Артемия Лебедева, 2006. — 384 с.
- Каменская А. А. М. Е. Карагодина Основные принципы работы со шрифтами в графическом дизайне // Дизайн и архитектура: синтез теории и практики: сб. науч.тр. — Краснодар: Кубанский гос. ун-т, 2018. Вып. 2. — С.131–134.
- Любодарская К. В. Графический дизайн в системе маркетинговых коммуникаций на b-2-b рынке // Маркетинговые коммуникации. 2013. № 2. С.86–95.
- Мамаева Д. М. Взаимосвязь типографики и фирменного стиля. [Электронный ресурс]. — URL: https://www.elibrary.ru/item.asp?id=43131906
- Старикова Е. А. Типографика как новая современная форма коммуникации в дизайне // Лучшая научная статья 2016: сбрник статей II Международного научно-практического конкурса. — Пенза: МЦНС «Наука и просвещение». — 2016. — С.67–72.
