Сколько шрифтов можно использовать в макете

Что такое типографика и почему она важна для дизайна

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

Иллюстрация: Sasi / Rawpixel / Annie для Skillbox Media

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

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

Херб Любалин,
дизайнер шрифта, главный редактор журнала о типографике U&lc

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

Что такое типографика

Слово «типографика» произошло от греческого τύπος — «отпечаток» и γράφω — «пишу» и означает художественное оформление текста с помощью шрифтов, символов и знаков. Причём к типографике относится как работа с большими объёмами текста — например, вёрстка журналов и книг, так и создание шрифтов — дизайн всех его знаков.

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

Типографика — это искусство придания человеческому языку крепкой визуальной формы.

Роберт Брингхёрст,
типограф, автор книги «Основы стиля в типографике»

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

Работая с типографикой в макете, дизайнер:

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

Кто такой дизайнер шрифта

Кроме работы с оформлением текстовой информации в макетах, в типографике существует ещё одно направление — дизайн шрифта.

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

Майкл Берут,
автор книг о дизайне, партнёр агентства Pentagram

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

История типографики

Искусство типографики выделилось в самостоятельную область примерно в XI веке с появлением готического письма и шрифта Blackletter на основе каллиграфии. Книги в то время переписывались от руки, их было довольно мало, и они считались предметом роскоши. Буквицы делали богато декорированными, а формы букв основного текста в готическом шрифте были продиктованы тем, как перо вели по бумаге.

Всё изменилось в середине XV века, когда немецкий типограф Иоганн Гутенберг изобрёл механический способ книгопечатания и создал первый печатный станок. Текст стали набирать из свинцовых букв ― литер, которые укладывали в наборные формы. Поскольку тогда книги были в основном религиозными, первой напечатанной книгой стала Библия.

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

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

Классификация шрифтов

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

Наборные шрифты

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

Антиквенные шрифты

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

В конце XVIII века французские и итальянские типографы ― Бодони и Дидо ― создали обновлённую версию антиквы, которая легла в основу многих современных гарнитур. В процессе развития книгопечатания антиква стала главным шрифтом для наборного текста.

Один из самых популярных антиквенных шрифтов — Times New Roman. Он был разработан в 1931 году английским типографом Стэнли Морисоном из Monotype и Виктором Ландертом — дизайнером журнала Times. Изначально шрифт был создан только для журнала, но впоследствии его выпустили в продажу. В девяностых корпорация Microsoft создала собственную версию этой гарнитуры, встроив её в операционные системы Windows, а затем в Microsoft Word, что сделало Times New Roman особенно популярным.

Гротескные шрифты

Гротескные шрифты, или гротески, — группа шрифтов, не имеющих засечек. Первый гротеск был разработан в 1816 году дизайнером шрифта Уильямом Кезлоном IV. Однако название они получили по имени другого шрифта — Seven Lines Grotesque. Его выпустил дизайнер Вильям Торогуд в 1832 году.

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

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

Один из самых известных и популярных гротескных шрифтов ― Helvetica. Он был разработан шрифтовым дизайнером Максом Мидингером в 1957 году по заказу владельца шрифтовой компании Haas Эдуарда Хоффмана на основе ранних гротесков. Шрифт оказался настолько универсальным, что стал использоваться везде: в наборных текстах, логотипах, элементах городской навигации.

Читайте о причинах популярности Helvetica и о том, что думают о ней дизайнеры, в нашем материале.

Ещё один важный типограф и представитель швейцарской школы, который внёс огромный вклад в развитие типографики, — Адриан Фрутигер. Он разработал шрифты Frutiger и Univers, также ставшие классикой гротесков.

Рассказываем об Адриане Фрутигере и шрифтовой системе Univers в этой статье.

Акцидентные шрифты

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

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

Смотрите наш топ худших акцидентных шрифтов в этой статье.

Леттеринг

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

Некоторые акцидентные шрифты имитируют леттеринг, но выдаёт их то, что буквы в них одинаковы — воспроизвести их так точно вручную было бы невозможно.

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

Сочетание шрифтов

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

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

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

Как использовать шрифт без нарушения авторских прав

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

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

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

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

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

Основные виды лицензий:

• Desktop ― подходит для многих программ, документов, логотипов, а также для социальных сетей.
• Webfont — позволяет встраивать шрифты на сайт, её стоимость зависит от посещаемости ресурса.
• App — предназначена для использования шрифтов в мобильных приложениях, на стоимость лицензии влияет количество скачиваний.
• Digital Ads — для использования шрифтов на рекламных баннерах в интернете; чем больше показов — тем дороже лицензия.
• Server — даёт право разместить файл приобретённого шрифта на сервере компании и использовать его на множестве компьютеров.

Разобраться с тонкостями лицензий на шрифты и сделать покупку правильно вам поможет наш подробный гайд.

Где посмотреть шрифт

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

Paratype

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

Директор Paratype Анна Якупова в своём интервью рассказывает о будущем кириллических шрифтов и пиратстве в типографике.

Letterhead Studio

Студия Letterhead основана шрифтовыми дизайнерами Юрием Гордоном и Валерием Голыженковым. Занимается разработкой традиционных и экспериментальных шрифтов, которые продаёт в собственном магазине. В портфолио студии шрифты, сделанные на заказ для Vogue, Cosmopolitan, Bork, Harper’s Bazaar, «Аэрофлота», клуба «Пропаганда».

Читайте интервью с Юрием Гордоном о работе шрифтового дизайнера и корпоративных шрифтах.

Студия Brownfox

Независимая шрифтовая студия Brownfox основана дизайнерами шрифта Гаянэ Багдасарян и Вячеславом Кириленко. На сайте можно не только посмотреть и купить шрифты, разработанные студией, но и прочитать ый рассказ о каждом. Среди клиентов Brownfox — «Парк Горького», образовательный проект Arzamas, Музей истории ГУЛАГа, журнал Weird.

Читайте об изменениях на рынке кириллических шрифтов и о необходимости в эксклюзивных шрифтовых разработках в комментарии Гаянэ Багдасарян.

Type.today и type.tomorrow

Магазин type.today основан дизайнерами шрифта Ильёй Рудерманом и Юрием Остроменцким в 2016 году. Здесь представлены качественные современные универсальные шрифты, которые прошли тщательный отбор. Вторая витрина магазина — type.tomorrow, на ней собраны дерзкие экспериментальные шрифты, также отвечающие высоким требованиям.

Adobe Fonts

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

Читайте истории знаменитых женщин — дизайнеров шрифта и рассказы о том, как менялась типографика на протяжении ХХ века.

Pangram Pangram

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

OH no Type

Калифорнийская студия OH no Type состоит только из одного дизайнера — её основателя Джеймса Эдмондсона. По его словам, он открыл компанию, чтобы делать то, что ему нравится в шрифтах, но чего нет на MyFonts.com. В магазине Джеймса много экспериментальных и вариативных шрифтов, которые представлены в виде впечатляющей анимации. Для некоторых шрифтов есть фотографии с примерами их работы «в жизни», у других — подробное описание процесса создания. Шрифты можно использовать бесплатно в личных целях и некоторых некоммерческих проектах.

Важные термины

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

Гарнитура

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

Шрифт

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

Графема

Минимальная единица письменности, «скелет» буквы или знака, их неизменная часть. Буквы в разных шрифтах могут выглядеть по-разному, но узнаваемы они именно потому, что у них одна и та же графема.

Интерлиньяж

Расстояние между строками текста по вертикали. Он измеряется от базовой линии одной строки текста до базовой линии следующей. Базовая линия — это условная линия, с которой соприкасается нижний край большинства букв.

Кегль

Размер шрифта по вертикали. Обычно он измеряется в типографских пунктах — pt. Но в цифровой среде может измеряться в пикселях — px, в относительных единицах em или условных единицах dp.

Трекинг и кернинг

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

Первый краткий обложечный экскурс — шрифты в макете ⁠ ⁠

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

По просьбе подписчиков решила продублировать пару-тройку статей и полиграфических историй сюда.

Итак, давайте сделаем небольшой обложечный экскурс – и для начала поговорим о шрифтах. Предупреждаю сразу: примеры давать не буду, потому что слишком хорошо знаю главный принцип. Человек видит пример, и тут же начинает делать что? Правильно. Копировать. А это ну вот совсем не нужно, если уж делать, то что-то своё (да и обложек вокруг роятся просто тучи), но своё это делать надо, соблюдая ряд правил и принципов.

1. Максимальное количество шрифтов в макете – два. Есть множество отрицательных примеров: фамилия автора одним шрифтом, часть названия другим, еще одна часть третьим, а вооон в тот угол поставим название серии уже четвертым. Так делать нельзя. Да, название серии может быть выполнено отдельным шрифтом, но название – часть макета, а не часть той информации, которую хочет прочесть человек, который смотрит на обложку. На вашей обложке имя автора пишется одним шрифтом, название – вторым. Всё. На этом всё. Просто запомните это правило. Можно ли использовать один шрифт? Запросто. А вот больше двух нельзя, есть такая вещь, как психология восприятия, и максимальное количество объектов, которые человек способен удержать в поле зрения и запомнить. Примите это как данность. Так что правило номер один – не больше двух шрифтов в макете обложки.

2. Использование в макетах «исторических» дизайнерских шрифтов. О, великие боги Ебипита! Как. Это. Задолбало. Нет, понятно – вы написали нечто попаданчески-историческое, и хотите это подчеркнуть на обложке. Ок, хорошо. Только, выбирая шрифт, выбирайте среди гор тех же готических или рунических шрифтов хотя бы читаемые! Есть варианты шрифтов, которые созданы вовсе не для обложек, их делали специалисты для совсем других целей. Да, эти заглавные буквы обладают яркой, зачастую ну очень привлекательной графемой, но делать из них название, особенно длинное и сложное – абсурд. Хочется выделиться из толпы, ясно. Но получается в результате не читаемая ерунда. Дорогие мои, знали бы, какие битвы мне приходилось выдерживать с клиентами, которые на афишах/обложках дисков/буклетах/билетах требовали ставить то, что им нравится! Эти битвы длились годами, и жизнь давным-давно расставила все по своим местам. Не повторяйте чужих ошибок. Всегда делайте скидку на то, что у вашего читателя могут быть проблемы со зрением, с восприятием, что не все любят подобные шрифты, а вам нужно что? Чтобы человек мог, как минимум, спокойно и без напряжения прочесть название вашей книги. Поэтому вот вам правило два — выбирайте шрифты с умом.

3. Использование эффектов. Это тема для отдельного большого исследования, которое можно было бы назвать «Я добрался до фотошопа». Да, в современных программах прошито множество самых разных возможностей для приукрашивания и расфуфыривания буковок практически под все, что душа пожелает, но… вот тут и начинаются «но». Но обложку-то мы вообще-то обязаны собирать не в фотошопе, а в программе векторной графики – корел, люстра… впрочем, про это подробнее будет позже, пока же ограничимся великим сакральным знанием: НЕ НАДО ТАК. Все эти тенюшки, свечения, размытия, и прочие лабудени вам для обложек просто не нужны. Ваша задача – создать читаемую надписать. Чи-та-е-му-ю. И вот тут фокус – читаемую при любом практически масштабировании. Вы, гипотетически, наваяли супер-обложку с красивой готической надписью, зафигачили на надпись эффект «под камушки», подложили тенюшку… и все это вы делали с разрешением 300 dpi, цветовая модель RGB. А потом вы эту вашу обложку решили выложить на сайт. И ее пришлось ужать. И вся ваша красота благополучно начинает плыть, скукоживаться, обрастать артефактами, и так далее, и это не смотря на то, что вы таки прочли статью «как правильно сжать картинку для сайта», и даже вроде бы слегка разобрались с оптимизацией. Тут вы можете мне возразить – мол, видели мы обложки со всякими разными свечениями в буквах и прочими вкусностями, и все нормально сжималось, и все было отлично, но так почему же… да потому что делали эти обложки спецы высокого уровня, и если я вам сейчас буду рассказывать, как заводить в верстку файл с несведенными слоями, с масками, с кучей эффектов, почему этот файл обязан идти линком, и для чего это вообще нужно – вы взвоете, правда-правда. Потому что это будет не разговор про красивую картинку и читаемые надписи, а про алгоритмизацию процессов. Про которую мы сегодня, кажется, говорить не собирались. Поэтому запомните правило три – минимум эффектов, а лучше вообще без них.

4. И последнее на сегодня. Про расположение надписей на обложке, совсем коротко и чуть-чуть. Читателя у нас воспитывало время, он привык к определенным схемам, и мозг у него будет работать определенным образом, хочет он сам того, или нет. Поэтому в общем сухом остатке у нас так или иначе будет следующее. Делим обложку на три части. Верхняя часть – ФИО автора, средняя часть – название, нижняя часть – название серии, если это серия. Если серии нет, то верх оставляем автору, середину отдаем изображению, в нижней трети – опять же название. Это самый стандартный стандарт. Беспроигрышный вариант, так сказать. Особенно в свете того, что большая часть изданий у нас сейчас – для сети, а не для бумаги. И – не мельчите! Картинка ужмется, мелкие буквы станут не читаемыми. А у вас какая цель? Правильно. Чтобы человек, который со смартфона будет листать библиотеку, сумел прочесть название вашей книги, причем на ее обложке. Правило номер четыре – крупная, легко читаемая надпись.

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

В общем, на сегодня это всё. Если вы про это знали и без меня – вы молодцы ❤. Если не знали, то, надеюсь, хоть какую-то полезную информацию вы получили.

Потом мы поговорим с вами про многие вещи – про шрифты дизайнерские, засечные, рубленые, про число Ф, про вылеты, про отбивки… в общем, тем масса, впереди много всего интересного, и оно грядет =)

Типографика – что это такое

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

Что такое типографика

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

Ее инструментами являются шрифты, символы, знаки.

Какие задачи выполняет:

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

Основные правила типографики в веб-дизайне:

• Текст должен быть читабельным для пользователя.
• Нельзя использовать одновременно множество различных шрифтов, эмоджи, анимаций. Это будет говорить об отсутствии стиля.
• Важное должно отличаться от второстепенного.
• Деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3.
• Текстовая информация чаще важнее, чем картинки, а значит, графика должна быть на службе у контента, а не наоборот.
• На сайте все должно быть естественно и гармонично.

Как подбирать шрифты

Чтобы правильно выбрать шрифт, придерживайтесь следующих правил:

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

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

В этом случае шрифт просто делает акцент на значимой информации, несущей ключевой смысл.

Размеры шрифтов – как подобрать кегль

Кегль – это размер шрифта по вертикали. Единицы измерения: типографские пункты – pt; пиксели – px; относительные единицы – em; условные единицы – dp.

Есть определенные правила подбора шрифта для текстовых и интерактивных страниц на ПК и на мобильном устройстве:

• В текстовых страницах используется более крупный размер шрифта, чтобы человек смог спокойно читать, не напрягая зрение. Минимально он должен быть 16–18px, но в отдельных случаях могут подойти и 20px+.
• В интерактивных страницах размер шрифта может быть меньше, нормой считается 14-16px. Для менее значимой информации могут использоваться мелкие кегли, а для более значимой — кегли побольше. Например, шрифт названий событий устанавливается в 12px, указатели времени в 10px, даты в 48px.
• При создании приложений на мобильных устройствах используется шрифт не менее 16px для основного текста. Для второстепенного, подписей для полей и картинок лучше использовать размер на пару значений меньше: например, 13px или 14px. Обязательно проверяйте дизайн на своих девайсах, т. к. макет, сделанный на компьютере, может выглядеть иначе на мобильном устройстве.

Интерлиньяж

Интерлиньяжем называют расстояние между строками текста по вертикали. Он измеряется по базовой линии (условная линия, с которой соприкасается нижний край большинства букв). От базовой линии одной строки текста до базовой линии следующей.

Сочетания шрифтов

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

Как создать идеальную шрифтовую пару:

• По принципу сходства. Например, применять курсив.
• По принципу контраста. Здесь нужно выбирать шрифты, которые не конфликтуют, а гармонируют друг с другом.

В сети можно найти массу сервисов, предлагающих идеи создания шрифтовых пар, которыми может воспользоваться начинающий дизайнер: Fontjoy, Typotheque, Mixfont и т.д.

Правило близости

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

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

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

Увеличим первый кружок, и он подчинит второй и третий:

При верстке таблиц также можно применять этот принцип, убрав разделители:

Классификация и виды шрифтов

Чтобы правильно подобрать шрифты, нужно разбираться в их классификации:

Наборные – для больших текстовых массивов. Применяются в книгах, журналистике, статьях. Их главные качества: нейтральность, разборчивость, удобность чтения.

Пример шрифта Times New Roman.

Неформальные варианты шрифтов часто бывают похожи на детский почерк, надписи кисточками и фломастерами или граффити.

Что такое гарнитура

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

Примером гарнитуры являются шрифты Courier или Georgia.

Основных групп гарнитур две:

С засечками. Используются для придания тексту весомого и официального тона. Чаще используется в объявлениях, новостных изданиях. Пример шрифта Antiqua:

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

Например, декоративные шрифты Outlaw и Morris:

Цвет текста

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

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

Где брать шрифты

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

Платно

Обратитесь на сайты с библиотеками шрифтов, например:

. Крупнейший российский магазин шрифтов. На сайте удобная фильтрация, есть тайп-тестер, где можно проверить, как будет выглядеть ваш текст при наборе различными шрифтами. Есть бесплатные и платные шрифты, цена от 1000 рублей. Здесь собраны шрифты с качественной кириллицей, которые соответствуют современным тенденциям в области типографики. Стоимость 2–10 тысяч рублей.

Бесплатно

. Здесь размещено более тысячи семейств шрифтов. Удобная система фильтрации поможет вам быстро найти все необходимое. Fonts. Официальные подписчики Creative Cloud могут бесплатно скачивать неограниченное количество представленных шрифтов.
• Агентства и творческие объединения, специализирующиеся на разработке шрифтов. Они занимаются разработкой шрифтов под заказ или для продажи, создают экспериментальные шрифты. Например, «Студия Артемия Лебедева», Klim Type Foundry, TypeType.
• Найти бесплатные шрифты можно через соцсети, в которых отдельные дизайнеры их публикуют.
• Свои шрифты молодые дизайнеры публикуют на Behance, например, разработанные на курсах, во время творческих мастер-классов.
• У коллег-дизайнеров, у которых есть своя коллекция бесплатных шрифтов.

Как создать шрифт

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

Вот несколько правил создания собственного шрифта:

Важно выбрать подходящее программное обеспечение. Что можно использовать:

• FontForge. Бесплатный редактор с открытым исходным кодом и удобное приложение для разработки шрифтов.
• FontStruct. Бесплатная программа, которая позволяет быстро и легко создавать шрифты из геометрических фигур, располагая их внутри сетки, как плитку или кирпичи.
• FontLab 7. Встроенный редактор, который помогает создавать шрифты. Есть 30-дневная бесплатная пробная версия.

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

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

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

Верстка текста – основные правила

Существуют определенные требования к качеству работы верстальщика, дизайнера, или макетировщика при верстке текста. Без их выполнения работа будет выполнена не качественно.

• Единообразие. Это главный критерий качественной верстки. Автор должен составить определенные нормы верстки для данного проекта и следовать им на протяжении всей работы. Проект должен соответствовать следующим критериям: одинаковая высота полос текста; основной текст должен быть набран одним и тем же шрифтом; оформление таблиц, иллюстраций, цитат, заголовков и всех прочих элементов должно быть одинаковым на протяжении всего издания.
• Недопустимость висячих строк. Так называют первую или последнюю строку абзаца в том случае, когда остальной текст абзаца оказался на другой странице.
• Приводная верстка. При ней должны совпадать строки на обеих сторонах бумаги так, чтобы при печати на тонком листе между строками не был виден текст оборотной страницы, а также строки должны совпадать по высоте в соседних колонках или на соседних страницах.
• Заголовок не должен отрываться от текста раздела или размещаться на двух страницах.
• Отсутствие коридоров. Это совпадающие по горизонтали пробелы в соседних строках, которые отвлекают внимание человека и ухудшают читабельность текста.
• Правильность переноса слов.

Иллюстрирование текста

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

Какие есть виды иллюстраций:

• Фото. Применяется при описании продукта, рассказе о событиях, описании каких-то объектов. Лучше, чтобы фотографии были уникальными, но можно воспользоваться и бесплатными фотостоками: Freerangestock, Firestock, Pinterest.
• Скриншоты. Используются при написании пояснений, инструкций и других последовательных действий. Для создания скринов можно использовать стандартные средства операционной системы или воспользоваться специальными сервисами.
• Рисунки. Рисунки подходят для метафор, когда основную мысль трудно выразить предельно конкретно. В этом случае, хорошим дизайном иллюстраций можно добиться нужного эмоционального воздействия на читателя. Их вы можете нарисовать самостоятельно или заказать у специалиста.

Узнать о типографике больше

Чтобы узнать о типографике больше, обратитесь к книгам, написанным профессионалами:

• «Руководство для современного дизайнера» Я. Чихольда: фундаментальный труд, который создавался как пособие для оформления печатных текстов, но актуален и для веб-дизайна.
• «Великие шрифты» В. Ефимова. Полезный справочник по кириллическим шрифтам.
• «Типографика: шрифт, верстка, дизайн» Д. Феличи. Руководство по типографике в современном графическом и веб-дизайне, в т. ч. по шрифтам и размерам в тексте.
• «О шрифте».Э. Шпикермана. Руководство для тех, кто хочет изучить особенности разных шрифтов, их применение и сочетания.

Сайты и блоги специалистов, разбирающихся в шрифтовом дизайне:

и сайт Сергея Рассказова. Ярослава Трегубова. дизайнера и эксперта по типографике Александра Васина. Игоря Штанга о типографике, тексте и дизайне. «Шрифт».

Какие есть способы выражения главных мыслей?

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

Какое оптимальное количество символов должно быть в одной строке?

Профессионалы говорят, что оптимально, когда в строке в районе 60 символов при чтении с компьютера, если читать с мобильного устройства, то не более 30–40 символов.

Можно ли писать текст заглавными буквами для привлечения внимания?

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

Сколько шрифтов можно использовать в макете

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

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

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