Regular в шрифте что значит
Шрифты и работа с ними — Основы вёрстки контента
Помимо насыщенности, CSS позволяет управлять следующими настройками:
Не пугайтесь такому количеству различных свойств, их необязательно использовать все сразу. Некоторые используются достаточно редко.
Семейство шрифтов
Если у пользователя в системе есть шрифт Georgia, то будет применён он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:
А какой шрифт именно выберет браузер? Тут всё зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:
При указании шрифтов также возможно указать и основное семейство шрифтов. Если ни один из указанных шрифтов не был найден, то браузер подберёт системный шрифт из того семейства, которое было указано. Дополним пример семейством шрифтов по умолчанию. В примере указаны шрифты из семейства антиква, поэтому стоит добавить соответствующее значение.
Всегда указывайте семейство шрифтов по умолчанию. Это считается хорошей практикой, так как не все шрифты могут присутствовать в системе пользователя.
Установка новых шрифтов
Необязательно полагаться только на системные шрифты. В проекте могут использоваться совершенно разные шрифты и верстальщик должен уметь их подключать. Сам по себе шрифт представляет собой файл. Форматов таких файлов может быть несколько и важно знать, какими браузерами они поддерживаются.
Пусть наш проект имеет директорию fonts, внутри которой находятся файлы шрифтов.
Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face :
После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.
Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретёт следующий вид:
Способ хоть и рабочий, но немного сложный. Вместо одного названия шрифта и управления его насыщенностью свойством font-weight приходится указывать три разных названия для каждого начертания в отдельности.
Стиль шрифта
Строчные символы
С помощью CSS можно задать такой вид строчных символов как «Капитель».
Капитель — вид строчных букв, размер которых совпадает (или приближен) к размеру заглавных букв. Такой приём используется в дизайне в виде стилистического оформления. Посмотрите на этот параграф:
Текст с использованием капители
По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.
Межстрочный интервал
Межстрочный интервал, или, как его ещё называют интерлиньяж — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создаётся расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.
Обобщённое правило
Теперь, для работы со шрифтами, вы знаете все основные правила. Это:
Использование одного правила или нескольких
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Что такое типографика и какие шрифты использовать на сайте
Как сделать текст более читабельным? Как подбирать шрифтовые пары? Какой шрифт выбрать для бизнеса и не ошибиться? Ответы на эти и другие важные вопросы в руководстве по типографике от Skillbox.
Один из источников информации — это текст. Чтобы привлечь внимание читателя и выделить материал среди других, его стараются красиво оформить и сделать легким для восприятия. Направление, которое содержит в себе правила о расположении текста, выборе шрифтов и размеров, называется типографикой.
Чтобы сделать текст удобным для чтения и правильно подобрать шрифт, необходимо узнать, из чего состоит типографика и какие шрифты можно использовать на сайте.
Что такое типографика
Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.
До появления компьютеров правила типографики использовали для создания макетов книг, газет и плакатов. Теперь их применяют для удобного отображения информации на дисплее — в программах и на сайтах.
Правила типографики учитывают параметры шрифта, размеры текста, его расположение. Чтобы хорошо оформить текст, нужно знать, какие шрифты использовать на сайте, что такое начертание, каковы пропорции между основным текстом и заголовком.
Как подбирать шрифты на сайт
Внешний вид сайта во многом зависит от используемых шрифтов. Правильно подобранный шрифт помогает читать быстрее. Обычно пользователь заходит на страницу, пробегает взглядом по тексту и сразу получает нужную информацию.
Если использовать какой-то необычный шрифт, рукописный или акцидентный, то читать станет сложнее. Скорее всего, посетитель сайта не станет тратить время на то, чтобы разобрать текст, и просто закроет страницу.
Чтобы решить, какой шрифт выбрать для сайта, нужно знать, какие бывают семейства, что такое начертание и классификация.
Классификация шрифтов
Шрифты отличаются характером, внешним видом, стилем. Какие-то — статические, какие-то передают динамику. Но все эти различия видит опытный человек, а простой пользователь, скорее всего, не заметит.
Главное визуальное различие шрифтов — засечки на буквах. Этот параметр называется классификацией шрифта. На сайтах чаще всего встречается две классификации: антиква и гротеск.
Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.
Передает ощущения надежности и традиционности. Шрифт с засечками выглядит строго и классически. Используется в бумажных книгах, журналах и печатных изданиях. Длинный текст, набранный таким шрифтом, удобно читать.
Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.
Гротеск ассоциируется с чем-то современным и легким. Его часто использует в чертежах и технической документации, в интерфейсах программ, на сайтах.
Что такое гарнитура
Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.
Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.
Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)
Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)
Выбор размеров шрифта
Размер шрифта подбирают для каждого сайта индивидуально. Главное, чтобы читать текст на странице было комфортно.
Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.
Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.
Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.
Нормальный текст: 18px
Заголовок 4: 18х1,6 = 27px.
Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:
Заголовок 3: 27х1,6 = 40px.
Вычислить, какой размер шрифта на сайте лучше использовать, можно с помощью калькулятора. На основе параметров обычного шрифта он подбирает оптимальные размеры для заголовков.
Сочетание шрифтов
Использование разных шрифтов на сайте помогает создать контраст и задает настроение во время чтения текста. Поэтому дизайнеры тщательно подбирают шрифты для сайта, анализируют разные сочетания.
Для выбора сочетания шрифтов нет каких-то определенных алгоритмов, потому что каждый проект индивидуален.
Обычно сочетают либо разные начертания одного и того же шрифта, либо выбирают два шрифта разной классификации. Комбинирование антиквы и гротеска помогает показать иерархию текста и добиться хорошей читабельности.
Самый простой способ подобрать пару шрифтов — просмотреть несколько, сравнить и проанализировать, какие пары подойдут.
Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.
Где брать шрифты
В интернете можно найти бесплатные и платные шрифты. И те, и другие шрифты можно использовать на сайте.
Бесплатные
Большая библиотека качественных шрифтов называется Google Fonts. Шрифт легко подобрать по нужным параметрам: выбрать только кириллицу, искать антикву или гротеск. С Google Fonts их можно скачать или напрямую подключить к сайту.
Часто дизайнеры рисуют свои шрифты и выкладывают их в общий доступ. Здесь стоит быть аккуратным, потому что не все они — качественные и подойдут для вашего проекта.
Платные
Ищут в специальных магазинах или на сайтах владельцев — студий и дизайнеров.
Больше о типографике и шрифтах
Шрифт проектируются для определенной цели. У каждого — разные характер и настроение. Поэтому к подбору шрифтов и верстке текста на странице важно подходить осознанно.
Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:
Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Практический взгляд на базовые термины и анатомию шрифтов
Учимся называть “палочки” штрихами и понимать, на что влияют засечки и заплечики
В этой статье я кратко изложу основы анатомии шрифта, которые пригодятся любому уважающему себя дизайнеру, и с особым вниманием остановлюсь на том, зачем ему все это надо.
Шрифт — один из базовых «голосов» графического дизайна наравне с цветом, формой и т.д. Это то, как говорит ваш дизайн. И как он будет это делать в каждый конкретный момент взаимодействия с пользователем, полностью зависит от вас. Кричать навязчивым фальцетом или нашептывать мягким баритоном, помогать воспринимать информацию или мешать, работать с брендом сообща, усиливая эмоциональное восприятие, или безлико информировать.
Вы можете продолжать работать на интуитивном уровне (и большинство дизайнеров так и делает), никто не мешает вам использовать любой попавшийся шрифт в любой конфигурации, не задумываясь о начертаниях, контрастности, динамике или кегле, пользователи прочитают, если очень захотят. Возможно. А возможно и не прочитают. Но если вы действительно хотите перейти из категории любитель в категорию профессионал, вам важно научиться работать со шрифтами осознанно и уметь аргументировать любое свое решение. Ну или почти любое (воодушевляющая музыка на фоне оборвалась). Хотя пусть будет любое. Немного пафоса не повредит.
Если вы хотите перейти из категории любитель в категорию профессионал, вам важно научиться действовать осознанно и уметь аргументировать свое решение.
Итак, разберемся для начала в терминологии, основных каверзных вопросах и научимся, черт возьми, называть “палочки” шрихами.
Терминология
Мы часто используем слово “шрифт” в разных ситуациях. Давайте по порядку, есть шрифт, а есть гарнитура.
Шрифт (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
Главное о шрифтах
Создать дизайн в VistaCreate очень просто: выбираете фото или видео в высоком разрешении, накладываете несколько дизайн-элементов — и добавляете текст. И вот как раз тут важно не промахнуться: если взять шрифты, которые не сочетаются, вы вряд ли будете довольны результатом.
В медиатеке VistaCreate уже добавлено сотни бесплатных шрифтов на 20 языках. Если у вас есть шрифты, созданные или купленные специально для вашего бренда, можете загрузить их в VistaCreate и использовать в дизайне. Добавляйте шрифт в свои бренд-киты — пусть фирменные стили всегда будут у вас под рукой. В этой статье мы ответим на основные вопросы, которые касаются видов шрифтов, их сочетания и использования. Все дизайны, которые мы используем в качестве иллюстраций, доступны в VistaCreate.
Почему шрифты важны в графическом дизайне
Шрифт — это способ выразить посыл, который вы закладываете в свой проект. Конечно, если бы мы везде использовали старый добрый Arial, жизнь была бы проще. Но стала бы она интереснее? Скорее всего, нет. Если хотите, чтобы ваше высказывание выглядело уникально, но при этом дошло до нужной аудитории, важно правильно его оформить. Вот основные ошибки, которые допускают в использовании шрифтов:
Чтобы избежать этих ошибок, обычно достаточно просто чуть внимательнее почитать про шрифты, которые вы хотите использовать, и выяснить, для чего они и где обычно встречаются.
Пять главных видов шрифтов
Шрифтов огромное количество. Некоторые из них классические — они завоевали к себе доверие и доказали свое качество. А некоторые появились совсем недавно — вышли из стильных словолитных студий или были выпущены в большой свет независимыми дизайнерами, которые увлекаются типографикой. Какой шрифт вы бы ни выбрали, очень важно понимать ключевые характеристики семейств шрифтов — чтобы подбирать сочетания правильно.
Когда я создавала свой первый шрифт, у меня было ощущение, что я стою у подножию Эвереста. В купальнике.
Нина Стрёсингер, шрифтовой дизайнер в Frere-Jones Type, критик в Йельской школе искусств.
Шрифты с засечками
Это группа всех шрифтов с маленькими черточками — засечками — на концах букв. На сегодняшний день существует огромная масса таких шрифтов в самых разных стилях, от римских Roman до барочных Didone. Дизайнеры шрифтов и эксперты в области типографики за пару секунд отличат старые шрифты с засечками от новых. Но никакой магии в этом нет: чтобы понять, как они отличаются друг от друга, просто посмотрите на классический Sabon, переходный Perpetua и современный Didot. Разница неочевидная, но она все-таки есть:
Шрифты с засечками отлично смотрятся не только в печатных материалах (например, книг и журналов), но и в большом объеме цифрового текста — они упрощают чтение. В VistaCreate сотни шрифтов с засечками — и для своего дизайна вы можете взять любой из них! Скорее всего, вам приглянется мегапопулярный Antic Didone, который остается одним из главных представителей своей группы. Но кто знает — может, вам захочется поэкспериментировать.
Шрифты без засечек
Шрифты с засечками создают атмосферу чего-то современного и свежего. Эту их характеристику очень часто используют в рекламе, особенно когда нужно добавить экспрессии. Но если вам нужна энергия, найти ее можно и в шрифтах без засечек. Шрифты с прямыми буквами без черточек — это квинтэссенция устойчивости и серьезности.
Отличным примером таких шрифтов служат классические News Gothic, Helvetica, Century Gothic и любимый всеми Calibri. Как и шрифты с засечками, сначала такие шрифты были более простыми — с тяжелыми и толстыми линиями. А потом эти шрифты эволюционировали и приняли более элегантные, тонкие формы.
Чаще всего шрифты без засечек используют в заголовках, но некоторые из них (например, Arial и Proxima Nova) часто можно увидеть и в текстовых блоках. Просмотрите коллекцию шрифтов без засечек в VistaCreate и используйте их в своем тексте или в заголовках. А начать можно с универсального Prompt.
Брусковые шрифты
Если просто, то брусковый шрифт — это шрифт, у которого есть засечки, но они короткие и грубоватые.
Большинство моноширинных шрифтов (где все буквы занимают одинаковое пространство), которые используются на печатных машинках и компьютерах, — это или шрифты без засечек, или брусковые шрифты. Если вы когда-то набирали текст с помощью клавиатуры, с огромной вероятностью он был в Courier и Lucida Console.
Но это не все популярные варианты брускового шрифта — например, шрифты American Typewriter, Rockwell и Clarendon тоже часто используется.
Lora — один из десятков брусковых шрифтов, которые доступен в VistaCreate. Используйте его в своем дизайне, чтобы надписи в нем стали выглядеть увереннее.
Рукописные шрифты
Самый первый шрифт возник не сам по себе — по сути, это имитация написания от руки. Старые рукописные шрифты выглядят очень нежно, обычно буквы в них идут под наклоном, курсивно. Более современные шрифты этого типа выглядят более выразительно, добавляются жирные начертания.
Вот несколько отличных примеров рукописных шрифтов — Snell Roundhand, Brush Script и Kaufmann.
Просмотрите варианты рукописных шрифтов в коллекции VistaCreate и примените любой из них к своим надписям, которые хотели бы выделить как-то по-особенному. К примеру, шрифт Playlist Script наверняка придаст вашему дизайну легкости и нежности.
Декоративные и акцидентные шрифты
Акцидентные шрифты обыгрывают типографику по-новому, но задача у них одна: сделать так, чтобы ваше сообщение было максимально заметным. Для сплошного текста такие шрифты не подходят — они работают исключительно для отдельных слов и коротких заголовков.
Декоративные шрифты могут входить во все те семейства, которые мы уже упоминали: это могут быть шрифты с засечками и без, рукописные и брусковые шрифты. Их главная отличительная характеристика — максимальная экспрессия и артовость.
Хорошие примеры этих шрифтов — Broadway, Bauhaus (который вдохновлен эстетикой Баухауса), Peignot, Stencil и Windsor. В коллекции VistaCreate масса декоративных шрифтов, и для каждого найдется своя пара. Возьмите, к примеру, Sigmar One и попробуйте соединить его с разными базовыми шрифтами — и увидите, как меняется настроение текста.
Как сочетать шрифты
Способов сочетать шрифты не так много, как может показаться на первый взгляд. Их всего два: использовать шрифты одной или разных гарнитур. Но прежде чем выбрать, по какому пути пойти, важно понять разницу между гарнитурой и шрифтом.
Гарнитура — это набор шрифтов с общими характеристиками дизайна, который обычно включает нормальное, жирное и курсивное начертание шрифта. Иногда в гарнитуре только нормальное и жирное начертание, а иногда этот комплект расширяется на тонкие и максимально жирные начертания, более или менее разреженные написания.
Шрифт — это вариация гарнитуры, со своим стилем, весом и размером. На заре книгопечатания подвижные литеры в шрифты отливались из металла или вырезались из дерева. Сегодня шрифты заключены в цифровые файлы, которые можно скачать из магазина шрифтов или купить напрямую у шрифтового дизайнера.
Используйте шрифты одной гарнитуры
Начинаем подбирать шрифты. Самый простой и, наверное, самый удачный способ стилизовать текст в дизайнах — использовать шрифты одной гарнитуры. В этом случае ошибиться просто невозможно, это минимализм в чистом виде. Но обязательно обращайте внимание на стиль гарнитуры. Дисплейные шрифты, скорее всего, могут утяжелить дизайн, если их будет слишком много — поэтому сбалансируйте их шрифтами без засечек или брусковыми шрифтами.
В примере ниже можно посмотреть, как дизайнеры VistaCreate использовали этот подход, чтобы создать шаблон с четырьмя текстовыми блоками, набранными одним шрифтом, но совершенно по-разному. Они использовали шрифт с засечками Radley и набрали им и заголовки (заглавными буквами), и сам текст (строчными). Еще в этом примере есть вариации этого шрифта курсивом и с подчеркиванием.
Используйте шрифты разных гарнитур
Звучит немного необычно, но на практике шрифты из разных гарнитур иногда сочетаются даже лучше, чем из одной. Но нужно подбирать их аккуратно — далеко не все такие шрифты хорошо смотрятся вместе. Лучший способ понять, как все работает, попробовать использовать их в своем дизайне и посмотреть, что из этого выходит. Чем больше проб, тем выше вероятность, что вы найдете лучший вариант шрифтового сочетания.
Пример ниже показывает, как удачно может выглядеть сочетания двух совершенно разных шрифтов в одном дизайне. Дизайнеры VistaCreate скомбинировали Montserrat и Mr Dafoe — и получилось очень ярко. Жирное начертание Montserrat идеально подходит для заголовков и основного текста, а изначально курсивный Mr Dafoe — органично подчеркивает устойчивость и вес основного текста.
Рукописные шрифты — отличный выбор, если хочется добиться эффекта «настоящести» написания. Но к сожалению, довольно часто их сложно читать, особенно в курсивном начертании. Поэтому для баланса лучше сочетать их с обычными. При этом подходе пользуйтесь правилом Парето: 80% текста наберите шрифтом, который легко считывается, а 20% — декоративным, рукописным, трафаретным или любым другим экспрессивным шрифтом.
Подытожим
Текст — это то, на что люди обращают внимание в первую очередь, когда смотрят на дизайн. От выбора шрифтов напрямую зависит то, как люди будут воспринимать ваш визуальный проект. На отношение аудитории можно влиять грамотным подбором шрифтовых пар — попробуйте и поймете, что этот инструмент может очень много.