Выбор шрифтов для вашего онлайн-дизайна может быть сложным. И легко потратить много времени на разработку веб-дизайна, заменяя шрифт за шрифтом, так и не достигнув цели. Давайте рассмотрим все, что вам нужно знать о сочетании шрифтов.
Комбинирование шрифтов в вашем веб-дизайне
Как и во многих других частях дизайна, в типографике есть рекомендации, которые упрощают поиск идеальных сочетаний шрифтов. Мы покажем вам, как смешивать шрифты, и предложим несколько отличных комбинаций для вашего бизнеса.
1. Используйте шрифты с разными интонациями
Текст может выражать эмоции. Шрифты, которые мы используем, влияют на наши мысли. Многие шрифты — серьезные и профессиональные, а другие — приятные и неформальные. Характер шрифта раскрывает смысл текста, который он отображает. При выборе шрифтов для веб-сайта сочетание различных интонаций с типографикой создает потрясающие визуальные контрасты.
При выборе комбинации шрифтов учитывайте то, что будет представлено на веб-сайте. Счастливый шрифт подходит для фирмы по производству игрушек, но может выглядеть странно на веб-сайте юридической компании. И наоборот: серьезные шрифты с засечками могут показаться слишком тяжелыми для чего-то беззаботного.
Один из наиболее важных факторов, который следует учитывать, — шрифт, который вы будете использовать для заголовков и основного текста. Уровни заголовков обеспечивают большую свободу действий в стилизованных шрифтах, потому что они имеют более крупный масштаб. Для основного текста с меньшим размером текста требуется шрифт, на который приятно смотреть.
Не бойтесь использовать интонационно противоположные шрифты в макетах вашего сайта: иногда контраст может вызвать интерес.
2. Используйте пары шрифтов, которые отличаются, но не слишком сильно
Избегайте смешивания шрифтов в заголовках, практически идентичных тем, которые используются в основном тексте. Используйте несколько шрифтов, которые визуально различны, но дополняют друг друга.
Что произойдет, если мы объединим шрифт с каллиграфическими элементами, такими как, например, Great Vibes, и шрифт с засечками, такой как Merriweather? В результате в дизайне отсутствует баланс и создается неприятное ощущение слишком резкого контраста.
Завитки и петли Great Vibes — успокаивающие и утонченные. Northwood — это неформальный шрифт с засечками и хвостами, тогда как Merriweather — серьезный формальный шрифт, который транслирует это через форму букв с засечками. Здесь контраст слишком силен, чтобы комбинация удачно сработала.
Давайте попробуем более приятную комбинацию шрифтов. В заголовке используйте Vollkorn, немного забавный шрифт. Используйте Open Sans, более нейтральный и простой шрифт без засечек. Эта комбинация работает хорошо, потому что, несмотря на разницу в шрифтах, тонкость обоих делает их визуально совместимыми.
3. Используйте три или меньше различных шрифтов
В большинстве дизайнов вы будете применять один веб-шрифт для заголовка и другой для основного текста. Надписи от руки и более стилизованные шрифты также могут использоваться в макете для творческих целей. Независимо от того, насколько вас искушают все доступные бесплатные шрифты, вам нужно использовать всего три шрифта для одного сайта.
Многие дизайнеры используют в своих проектах суперсемейство шрифтов. Суперсемейство — это семейство шрифтов, связанное с одним или несколькими другими семействами. Это может включать в себя стилистические различия, такие как курсив, легкие и тяжелые, версии с засечками и без засечек, среди прочего. Самое приятное в супер семействах то, что они избавляют от игры в догадки относительно соответствия шрифтов, потому что они созданы для совместной работы.
Отдельные шрифты могут использоваться по-разному при использовании суперсемейств. Взгляните на эти варианты суперсемейства Roboto. Разница между Thin 100 Italic и Regular 400 не заметна.
Большинство шрифтов классифицируются в суперсемейства, что означает, что у вас есть много альтернативных шрифтов, с которыми можно экспериментировать, используя один и тот же стиль.
4. Сообщите о визуальной иерархии с помощью сочетания шрифтов
Визуализируйте структуру вашей коммуникационной иерархии, используя различные дизайны, размеры и цвета шрифтов. Вы можете использовать типографику для передачи визуальной информации об относительной важности других частей вашего контента. Заголовки должны быть наиболее заметными, за ними следуют подзаголовки и основной текст. Используйте свои комбинации шрифтов, чтобы добавить четкое ощущение структуры вашему тексту.
5. Используйте размер шрифта, чтобы указать порядок
Большой шрифт выделяет главное, а остальные постепенно уменьшающиеся размеры шрифтов на странице создают информационную иерархию. Все буквы в верхнем регистре — отличный способ выделить важные элементы, такие как призывы к действию. Можно использовать все заглавные буквы в умеренных количествах; однако избегайте того, чтобы текст выглядел злым и враждебным.
Большинство начинающих дизайнеров интегрируют разные размеры шрифтов, чтобы установить визуальную иерархию, но есть и другие способы демонстрации визуального масштаба.
6. Экспериментируйте с разным весом шрифтов
Относительная важность показывается большим весом шрифта, в то время как меньший вес предполагает более низкую ступеньку в иерархии важности информации. Даже пример суперсемейства Roboto демонстрирует, что с помощью всего лишь одного шрифта можно добиться многого, изменив его вес.
7. Меняйте цвет шрифта
Хотя вы, конечно же, не хотите использовать калейдоскоп контрастных цветов в своем дизайне, но изменение оттенков вашего текста может помочь выделить определенные термины. Для заголовков используются более интенсивные цвета, такие как красный и фиолетовый. Более светлая версия контрастирует с более темной версией, представляя текст, который следует прочитать в первую очередь. Убедитесь, что цвета шрифта, с которыми вы экспериментируете, не теряются на фоне.
8. Засечки
Шрифты с засечками, которые хорошо читаются при печати, появились в конце 1700-х годов и изначально предназначались для удобочитаемости.
Засечка — это тонкая линия или штрих, добавленный к букве. Шрифты без засечек имеют множество визуальных подсказок, которые помогают читателям следить за ними. Шрифты с засечками повышают эффективность сканирования, особенно в длинных блоках текста, например в книгах.
В начале компьютерной эпохи разрешение экрана было слишком низким для шрифтов на основе засечек, чтобы отображать их, это создавало большие проблемы. Сегодня графические дизайнеры могут использовать множество шрифтов с засечками благодаря современным дисплеям с высоким разрешением.
Всегда комбинируйте шрифт с засечками со шрифтом без засечек. Шрифты с засечками часто слишком похожи, что приводит к неприятному для глаза совпадению шрифтов. Шрифты с засечками очень адаптивны.
Ниже приведены некоторые из наиболее частых и полезных шрифтов, встречающихся в письменном тексте. Они легко читаются в различных размерах, что делает их идеальными как для основного текста, так и для заголовков.
Идея сочетания шрифтов: EB Garamond и Montserrat
Комбинируйте шрифт EB Garamond с засечками и шрифт Montserrat без них для заголовка, уменьшайте его размер для основного текста. Шрифты с засечками в длинных блоках текста работают лучше, когда они меньше.
Идея сочетания шрифтов: Libre Baskerville и Raleway
Более четкие засечки и угловатость Libre Baskerville контрастируют с тонкими линиями Raleway.
9. Без засечек
Отсутствие лишних черточек отличает шрифт без засечек от шрифта с засечками. Шрифты без засечек можно использовать для абзацев или основного текста меньшего размера, или их можно комбинировать со шрифтами с засечками в заголовках.
Есть несколько шрифтов, о которых стоит подумать, когда дело доходит до комбинаций шрифтов. Давайте рассмотрим наиболее распространенные виды шрифтов и некоторые творческие возможности, которые вы можете использовать сегодня.
Идея сочетания шрифтов: Open Sans и Lato
Такие шрифты, как Open Sans и Helvetica, некоторые дизайнеры могут считать старомодными, но они, все равно, широко известны. Open Sans — это базовый шрифт, который хорошо работает с другими шрифтами. Считайте, что это как ванильное мороженое: основа, на которой можно состряпать множество других вкусных штук.
Попробуйте использовать Open Sans в заголовке и Lato в основном тексте. В остальной части документа используется другой шрифт без засечек.
10. Экранные шрифты
Если вам нужно привлечь внимание людей, идеально подойдут экранные шрифты (display fonts). Обычно, они пишутся красивыми и сложными буквами — например, большими и жирными или редкими и тонкими. Используйте шрифты, специально предназначенные для первых экранов, если вы хотите, чтобы ваш дизайн выделялся и производил яркое впечатление.
Идея сочетания шрифтов: Bubblegum Sans и Open Sans
Bubblegum Sans имеет яркие формы букв, которые хорошо сочетаются с нейтральностью Open Sans.
Идея сочетания шрифтов: Poiret One и Lato
Poiret One — отличный современный шрифт, если вы хотите придать своему дизайну ноту утонченности. Его тонкие надписи в стиле ар-деко и тонкие линии делают Poiret One отличным современным шрифтом. Этот шрифт выглядит фантастически рядом с более скромным шрифтом, например, таким как Lato. Вместе они создают очень приятный контраст.
11. Моноширинные шрифты
В моноширинном шрифте все символы имеют одинаковую ширину. Закрепленный параметр пространства по горизонтали отличает их от шрифтов разной ширины, придавая моноширинным шрифтам ощущение связности. Моноширинные шрифты давно популярны из-за их простоты и возможности адаптации даже к ранним дисплеям с низким разрешением.
Идея сочетания шрифтов: IBM Plex Mono и PT Sans
IBM Plex Mono — это современный шрифт с визуальной идентификацией, идеально подходящий для стартапов и других организаций, связанных с технологиями. Он был создан как дань уважения IBM. Шрифты без засечек, такие как этот, приятнее для глаз и дают лучшее ощущение контраста с фоном.
Идея сочетания шрифтов: Roboto Mono и Roboto
Многие дизайнеры предпочитают Roboto за его отличную читабельность. Эта комбинация шрифтов, сочетающая Roboto Mono с его обычной версией, очень комфортная для глаза.
Типографика необходима для веб-дизайна
Создать прочное присутствие в Интернете непросто. Следует учитывать несколько факторов. Подбирайте пары шрифтов для своего проекта с таким же вниманием, как и цветовую палитру картины. Выбранные вами шрифты и то, как вы их стилизуете, их удобочитаемость — все это влияет на взаимодействие пользователей с вашим веб-сайтом и их опыт. Подберите лучшие шрифты, которые отражают индивидуальность вашего проекта и предлагают посетителям самый приятный способ познакомиться с ним.
