лучших сочетаний шрифтов Google на 2023 год
Примечание редактора: Этот пост был первоначально написан в 2021 году, и, хотя лучшие практики остаются актуальными как никогда, статья была обновлена новым списком лучших шрифтов Google. сочетания, которые лучше отражают последние тенденции дизайна. Копай!
При разработке веб-сайта или целевой страницы необходимо учитывать многое: изображения, цвета и логотип — это лишь некоторые из элементов, которые играют большую роль во внешнем виде вашей страницы. Но один аспект, который часто упускают из виду, — это шрифты. Мы здесь, чтобы помочь вам избежать этой ошибки.
Шрифты имеют значение. Они важны для вашего бренда. Они важны для удобочитаемости страницы. И они помогают вашим словам иметь больший вес и более четко доносить информацию.
Хорошее сочетание шрифтов может иметь значение между легкой конверсией или посетителем, который уходит, потому что он не может прочитать копию или страница загружается слишком медленно. Это также оказывает большое влияние на то, как лиды и клиенты воспринимают ваш бренд, продукты, услуги и бизнес.
Если вы не дизайнер, вы, вероятно, задаетесь вопросом, с чего начать выбор пары шрифтов. В конце концов, доступны буквально тысячи шрифтов. И дело не обязательно в том, какие из них лучше, а скорее в том, какие из них подходят для их предполагаемой цели, и это может стать довольно субъективным для любого, кто не является экспертом.
Не волнуйтесь, мы вас поддержим. Наши дизайнеры предоставили одни из лучших сочетаний шрифтов Google в этом году для использования в вашем следующем дизайне, а также шаблоны, к которым вы можете применить сочетания шрифтов. Таким образом, вы можете быстро сузить свой выбор и выбрать пару, которая идеально подходит для вашего бизнеса и бренда.
Но прежде чем мы перейдем к ним, есть несколько вещей, которые вы должны знать.
Что такое пары шрифтов?
Пары шрифтов — это два шрифта, объединенные вместе на одной странице, веб-сайте или маркетинговом ресурсе. Как правило, для заголовков используется один шрифт, а для основного текста — другой. Третий шрифт также можно использовать в качестве акцентного шрифта для важных слов, на которые дизайнер хочет обратить внимание.
Конечно, вы можете использовать везде один и тот же шрифт. Но вы упустите возможность привнести в свой текст немного творческого чутья. Использование вторичного шрифта позволяет вам гибко изменять контекст, настраивать индивидуальность вашего бренда, добавлять разнообразие с помощью веса, ширины и стилей или даже просто делать то, что наш основной шрифт не может делать.
Хорошая пара шрифтов включает в себя шрифты, которые гармонично сочетаются друг с другом, но имеют достаточную вариативность — они добавляют контраста, а также привлекают внимание читателя к важным областям страницы. Шрифты могут даже стать частью вашего бренда, поэтому многие компании постоянно используют одну и ту же пару шрифтов во всех своих маркетинговых материалах.
Что такое шрифты Google?
Google Fonts — это библиотека из более чем тысячи шрифтов, которые абсолютно бесплатны для любого использования в любых целях. Если раньше за многие шрифты приходилось платить, то эта революционная услуга упростила вам развитие вашего бренда без каких-либо затрат на лицензирование шрифтов.
Все шрифты, найденные в библиотеке, также оптимизированы для Интернета, что сокращает время загрузки вашей страницы (и уменьшает количество людей, которые уходят с вашей страницы).
Гарнитуры и шрифты: одно и то же?
Вроде. Гарнитуры — это группа шрифтов разного веса. Например: Garamond — это шрифт, а Garamond Bold — это шрифт.
Но реальность такова, что термин «шрифт» используется настолько неправильно, что, если вы не дизайнер шрифтов (или, кхм, дизайнер шрифтов), различие не так важно. Использование термина «шрифт» для обозначения как шрифтов, так и гарнитур стало стандартом. Поэтому, чтобы все было ясно в этом посте, мы тоже собираемся сделать это.
Как вы выбираете пары шрифтов?
При сопряжении шрифтов Google нужно выбрать один, который хорошо подходит для текста заголовка и подзаголовка, а другой — для текста меньшего размера и более длинного текста. Хотя быстрых и жестких правил нет, полезно следовать нескольким рекомендациям, особенно если вы новичок в мире шрифтов и в том, как их сочетать.
Вот несколько советов:
- Выбирайте разные шрифты, но не слишком. Цель состоит в том, чтобы обеспечить контраст, но при этом создать ощущение гармонии.
- В случае сомнений комбинируйте шрифт с засечками и без засечек. Это гарантирует, что у вас будет достаточно контраста в вашей паре.
- Обратите внимание на удобочитаемость. Дисплейные шрифты менее разборчивы при меньших размерах, поэтому они часто используются для заголовков, тогда как шрифты с засечками и без засечек более разборчивы, поэтому они обычно являются хорошим выбором для мелкого текста.
- Пара разного веса и ширины. У вас более жирный шрифт? Подумайте о сочетании его с более светлым и тонким шрифтом, чтобы сбалансировать ситуацию.
- Подумайте о своем бренде. Разные шрифты вызывают разные эмоции и реакции. Убедитесь, что выбранные вами шрифты соответствуют идентичности вашего бренда и аудитории, на которую вы ориентируетесь.
Самое главное, доверяйте своей интуиции. Если вы обнаружите сочетание, которое, как вы знаете, работает для вашего бизнеса или определенного дизайна, используйте его!
Красивые веб-сайты с полной конверсионной мощностью Leadpages
Испытайте единственный онлайн-конструктор веб-сайтов, который позволяет легко создавать высококонверсионные веб-сайты с настройками без кода.
Откройте для себя сайты Leadpages →
Лучшие пары шрифтов Google от Leadpages
Просто ищете хорошие рекомендации, с которыми вы не ошибетесь? Наши талантливые дизайнеры поделились своими любимыми сочетаниями шрифтов Google. Список основан на тысячах часов опыта, проб и ошибок, а также на внимательном отношении к тому, что работает (и хорошо выглядит).
Они также предоставили ссылки на шаблоны Leadpages, которые хорошо работают с этими парами. Таким образом, у вас сразу будут все элементы дизайна, необходимые для создания целевой страницы или веб-сайта.
Bodoni + RalewayАкцентный шрифт: Bodoni Italic
Заголочный шрифт: Bodoni Moda
. Bodoni — элегантный классический журнальный шрифт. Современные толстые и тонкие модели Bodoni в сочетании с контрастным тонким монотонным весом Raleway выглядят утонченно и современно.
Шаблон: Бесплатный контрольный список Syne Bold + NormalЗаголочный шрифт: Syne Bold
Фонар. Размер забавного вариативного шрифта увеличивается по мере увеличения его веса, что делает его идеальным сочетанием для самого себя! Выберите эту пару Syne, чтобы получить выделяющиеся заголовки и причудливые, но легко читаемые абзацы.
Albert Sans + BarlowОгнитный шрифт: Albert Sans
Фонт шрифт: Barlow
Классификация: , Geometric
Почему он работает: Albert San S. Etric SeraMif Modermif Seremif Seremif Moderif Seremif Seremif. , с несколькими уникальными особенностями, придающими ему характер. Одной из этих причуд является хвост со строчной буквой «g» — черта, которую разделяет и Барлоу. Более узкий след Барлоу дает идеальный контраст в паре с Альбертом Сансом.
Шаблон: Generation Generation Вебинар Sacramento + Aboreto + GotuАкцентный шрифт: Sacramento
Фонд. Элегантный, дружелюбный
Почему это работает: Хотя Aboreto на первый взгляд кажется шрифтом без засечек, его случайное указание на засечки в виде небольшого утолщения на концах штрихов классифицирует его как акцидентный шрифт и придает ему достаточно необычности. хвастаться проблеском личности, сохраняя при этом разборчивость. Парящие каллиграфические штрихи абзацного шрифта Gotu составляют идеальную пару. Добавьте элегантный сценарий Сакраменто, и вы получите идеальное сочетание. Вместе трио может придать неповторимый стиль эффектному веб-сайту шикарного бренда.
Quattrocento + QuestrialЗаголовок шрифт: Quattrocento
Шрифт абзаца: Questrial
Классификация: Classic, Modern, Creatisticed, Elegant
Why Worktrytrytrytrytrytrytrytrytrytrytry. шрифт с отличительными характеристиками, которые делают его идеальным для классического, элегантного и сильного бренда. Он хорошо сочетается с современным стилем Questrial и легко читаемыми формами. Его круговые изгибы на многих его символах делают Questrial отличным шрифтом, который легко сочетается с другими шрифтами, сохраняя при этом свою уникальность.
Шаблон: Perfect Squeeze Page PT SANS + TEKO + IBM PLEX SANS CONDENSEDАкцентный шрифт: PT SANS
Огни. Классификация: Промышленный, прочный
Почему это работает: квадратные пропорции и визуально простая структура Teko делают его отличным выбором для использования в рекламе, особенно для брендов, стремящихся продемонстрировать силу, стабильность, остроту и изысканность. IBM Plex Sans Condensed имеет нейтральную, но дружелюбную эстетику и может похвастаться смягченным квадратным характером, который хорошо читается и дополняет индустриальный вид Teko.
Montagu Slab + FigtreeЗаголочный шрифт: Montagu Slab
Шрифт в абзаце: Figtre
. с его высокой высотой x и парящими терминалами, что делает его отличным шрифтом для заголовков. Четкие, чистые, геометрические формы Figtree отлично подходят для абзацев текста или использования в веб-приложениях и мобильных приложениях. Он разделяет некоторые из тех же беззаботных и дружелюбных качеств, что и Montagu Slab, что делает эту пару хорошим дуэтом для представительных брендов, у которых есть доля остроумия в их фирменном голосе.
Шаблон: 404 Opt-In Page Yellowtail + Fjalla One + Source Sans ProАкцентный шрифт: Yellowtail
Headline Font: FJALLA ONE
.
Классификация: Дружественный, полужирный
Почему это работает: Сжатая и жирная форма Fjalla One делает его отличным выбором для заголовков, особенно в верхнем регистре. Это удобная пара с хорошо читаемым шрифтом Source Sans Pro для текста абзаца. Yellowtail — это олдскульный винтажный шрифт плоской кисти с характеристиками, напоминающими нарисованные знаки — идеальный акцент для придания характера вашим выноскам.
Fraunces + PoppinsАкцентный шрифт: Poppins
Огнитный шрифт: Fraunces (Medium 500)
. это работает: Fraunces — это новое поколение классического шрифта в старом стиле — это вариативный шрифт, который позволяет регулировать толщину, шаткость, мягкость и размер, что дает вам возможность настроить его для вашего бренда. Нам нравится сочетать его с чистым геометрическим шрифтом без засечек, который обладает такой же игривостью, как у Poppins.
Шаблон: Ewebinar Masterclass Corben + MontserratОгнитный шрифт: Corben
Фариаф шрифт: Montserrat
. Глаз с оттенком классической надписи на дисплее, Corben носит редакционный, но неформальный характер. Монтсеррат ощущается близким родственником, дополняя формы и след Корбена слегка вытянутой шириной.
Шаблон: Напишите Way Copy Bebas neue + Heebo LightЗаголовок шрифт: Bebas neue
Фаграф шрифт: Heebo
. является фаворитом дизайнеров. Его сжатая и жирная форма делает его отличным выбором для заголовков. Круглые и узкие шрифты красиво контрастируют друг с другом. Контраст между Bebas и Heebo создает чистую и современную пару.
Lexend + Zilla SlabОгниенный шрифт: Lexend
Фонд. визуального стресса и улучшения чтения, Lexend служит дружественным геометрическим шрифтом для заголовков, в то время как Zilla Slab обеспечивает достаточный контраст с дополнительными круглыми и геометрическими характеристиками.
Шаблон: этот подкаст MET MET ME ОПЛАТИ + SLAB ZILLAЗаголочный шрифт: Outfit
ФАРАГРАФ представляет собой универсальное современное семейство геометрических гротесков, в то время как Zilla Slab обладает такими же геометрическими качествами, но с добавлением плоских засечек, что обеспечивает идеальный контраст в паре с Outfit.
PRATA + MANROPEОгнитный шрифт: PRATA
Фонар шрифт: Manrope Light
. отличный выбор для передачи элегантности в ваших заголовках. В сочетании с легким весом Manrope эта деликатность также проявляется в тексте абзаца.
Шаблон: Рождение доулы Calistoga + IBM Plex SansЗаголочный шрифт: Calistoga
Фонд. Дружелюбный, но утонченный вид, который идеально сочетается с соответствующей площадью основания IBM Plex Sans. IBM Plex Sans служит хорошо читаемым, но доступным шрифтом для текста абзаца.
Marcellus + DM SANSОгнитный шрифт: Marcellus
Фонар шрифт: DM SANS
Классификация: Шикат, изысканный, элегантный
, почему это работает: Marcellus, Flusy, Flurey, Flurey, Flurey, Fluredy, Fluredy, Fluredy. шрифт с засечками, вдохновленный классическими римскими надписями, но с широким спектром использования. Это отличный шрифт для заголовков с утонченной индивидуальностью, и он хорошо сочетается с DM Sans в качестве разборчивого шрифта для абзацев.
Эпилог + БарлоуОгнитный шрифт: Эпилог (полужирный жирный цвет)
Фонарский шрифт: Barlow
Классификация: Friendly, Quirky
Почему это работает . придайте ему дружелюбную индивидуальность и создайте приятный контраст с узким следом Барлоу.
Шаблон: Whole Gains Playfair Display Italic Bold + Railway LightШрифт заголовка: Playfair Display (курсив, полужирный)
Шрифт абзаца: Raleway (светлый)
Классификация: элегантный, утонченный, классический
элегантный выбор для заголовков. Он хорошо сочетается с Raleway Light, тонкие мазки которого соответствуют тончайшим мазкам в Playfair.
Modak + Fira SansШрифт заголовка: Modak
Шрифт абзаца: Fira Sans
Классификация: Причудливый
Почему это работает: если вы ищете уникальный шрифт для представления своего причудливого бренда, обратите внимание на Modak. Тяжелые буквы, нарисованные от руки, делают этот крупный дисплейный шрифт отличным выбором для смелых брендов. Тонкий вес Fira Sans обеспечивает достаточное отличие от Modak, в то время как некоторые причуды и мягкость его изогнутых терминалов хорошо дополняют шрифт заголовка.
Шаблон: Готов4Наши любимые шрифты
Хотите создать свои собственные пары шрифтов? Мы выбрали наши любимые шрифты на 2023 год, чтобы вы могли смешивать и сочетать, чтобы увидеть, что лучше всего подходит для вашего бизнеса.
Как установить шрифты Google на свой веб-сайт или целевые страницы
Leadpages позволяет добавить в учетную запись до 10 дополнительных семейств шрифтов. Вот как это сделать:
- Загрузите нужный шрифт на свой компьютер (всю библиотеку Google Fonts можно найти здесь)
- Разархивируйте файл
- Загрузите шрифт в свою учетную запись Leadpages
Последнее слово о шрифтах
Может показаться, что это небольшой элемент дизайна, который на самом деле не требует особого внимания или размышлений, но выбор шрифта для вашего бизнеса так же важен, как и цвета вашего бренда. Их форма, вес, характер и стиль усердно работают, чтобы передать больше, чем просто слова, которые они занимают.
Мы надеемся, что приведенные выше рекомендации наших дизайнеров по сочетанию помогут вам найти идеальное решение для вашего бизнеса. Но если вы предпочитаете выбирать шрифты для своего бизнеса самостоятельно, обязательно тщательно обдумайте это. Это может быть просто небольшое решение, но оно оказывает реальное влияние на ваш бренд, на то, как ваши клиенты взаимодействуют с ним, и, в конечном счете, на то, насколько хорошо ваш сайт и страницы конвертируются.
Хотите попробовать некоторые из пар шрифтов, упомянутых здесь, на своем веб-сайте или целевой странице? Попробуйте Leadpages бесплатно в течение 14 дней и начните расширять свое присутствие в Интернете уже сегодня.
Попробуйте Leadpages бесплатно в течение 14 дней
Легко создавайте свой веб-сайт и целевые страницы с помощью единственной платформы, разработанной специалистами по маркетингу.
Начать бесплатную пробную версию →
Шрифт по умолчанию везде заменяет все шрифты | Форум поддержки Firefox
Эта тема была заархивирована. Пожалуйста, задайте новый вопрос, если вам нужна помощь.
Элан
Шрифт по умолчанию браузера Firefox для настольных ПК заменяет все шрифты на некоторых веб-сайтах, только шрифты заголовков на некоторых других, а остальные оставляет без изменений. Это кажется случайным, и я не могу остановить случайный выбор шрифта по умолчанию на большинстве веб-сайтов, независимо от того, что я делаю. Этого не происходило до сегодняшнего дня, и ни один браузер или общие настройки MacBook Air не менялись между сегодняшним и вчерашним днем, когда я в последний раз использовал браузер на рабочем столе.
В разделе «Настройки Firefox» » Шрифты » «Дополнительно» я установил флажок «Разрешить страницам выбирать свои собственные шрифты вместо выбранных вами выше», и я снял его и снова проверил. , и по умолчанию на большинстве веб-сайтов по-прежнему переопределяются шрифты.
Я закрывал и перезапускал Firefox 3 раза.
Помогите!
Шрифт по умолчанию браузера Firefox для настольных ПК заменяет все шрифты на некоторых веб-сайтах, только шрифты заголовков на некоторых других, а затем оставляет другие без изменений. Это кажется случайным, и я не могу остановить случайный выбор шрифта по умолчанию на большинстве веб-сайтов, независимо от того, что я делаю. Этого не происходило до сегодняшнего дня, и ни один браузер или общие настройки MacBook Air не менялись между сегодняшним и вчерашним днем, когда я в последний раз использовал браузер на рабочем столе. В разделе «Настройки Firefox» «Шрифты» «Дополнительно» я установил флажок «Разрешить страницам выбирать свои собственные шрифты вместо выбранных вами выше», и я снял его, и я снова проверил его, и по умолчанию по-прежнему переопределяются шрифты на большинстве веб-сайтов. Я вышел и перезапустил Firefox 3 раза.
Выбранное решение
Все ответы (1)
jscher2000 — Волонтер службы поддержки- 10 ведущих участников
Выбранное решение
Сайты используют различные подходы к указанию предпочтительных и резервных шрифтов. Например:
- пусть все решает браузер (не указывайте семейство шрифтов, Firefox использует шрифт с засечками по умолчанию)
- использовать шрифт браузера по умолчанию без засечек [ font-family: sans-serif; ]
- указать нужный системный шрифт [ семейство шрифтов: Arial; ]
- указать загружаемый шрифт [ семейство шрифтов: Roboto; ]
- предпочтителен с запасными вариантами [ семейство шрифтов: Roboto, Arial, sans-serif; ]
Если вы видите необычный шрифт по умолчанию в большем количестве мест, чем обычно, возможной причиной является блокировка веб-шрифтов.