10 великолепных комбинаций шрифтов Google, которые вы можете скопировать

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

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

Почему Google Fonts?

Игра со шрифтами в области веб-разработки была в разгаре пару лет назад. У каждого были идеи и решения. По-моему, дебаты окончены: победил @font-face.

Вот почему выигрывает @font-face. Во-первых, это чистое решение CSS, с которым могут согласиться разработчики. @font-face в полном объеме поддерживает выделение текста и такие действия, как копирование и вставка. Это означает, что эксперты по юзабилити полюбят его.

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

Сейчас и в самом мире @font-face есть много конкурентов. Лично мое любимое решение — использовать наборы @font-face FontSquirrel’s.

Я пару раз использовал этот сервис подбора шрифтов, поэтому я хотел сегодня использовать что-то ещё. С тех пор как Google Font Directory стал бесплатным и предоставляет несколько вариантов, похоже, что это очевидный выбор!

10 великолепных комбинаций шрифтов Google, которые вы можете скопировать

Советы по сочетанию шрифтов

Есть пару базовых правил, которые следует учитывать при подборе шрифтов.

Используйте семейства шрифтов

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

Контраст — король всего

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

Не усложняйте

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

Подумайте, какие шрифты подходят

Если контент современный и профессиональный, придерживайтесь шрифтов, которые предполагают данные качества. Если он должен выглядеть, как что-то из начала XVIII века, Helvetica Neue Ultra Light, пожалуй, не самый лучший выбор.

Шрифты!

Перейдите в Google Font Directory и поищите следующие варианты подбора красивых шрифтов.

Если вы раньше не работали с Google Font Directory, не волнуйтесь, это самое легкое решение для подбора шрифтов. Все что необходимо сделать, это вставить ссылку в заголовок страницы и далее ссылаться на шрифт в CSS, как и в любом ином случае. Для каждой пары шрифтов, рассмотренной ниже, я предоставлю весь необходимый код. Вам останется его скопировать и вставить!

Lobster и Cabin

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

10 великолепных комбинаций шрифтов Google, которые вы можете скопировать HTML

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">

CSS

h1 {font-family: 'Lobster', Georgia, Times, serif;font-size: 70px;line-height: 100px;}p {font-family: 'Cabin', Helvetica, Arial, sans-serif;font-size: 15px;line-height: 25px;}

Raleway и Goudy Bookletter 1911

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

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

HTML

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911" rel="stylesheet">

CSS

h1 {font-family: 'Raleway', Helvetica, Arial, sans-serif;font-size: 50px;line-height: 70px;}p {font-family: 'Goudy Bookletter 1911', Georgia, Times, serif;font-size: 15px;line-height: 25px;}

Allerta и Crimson Text

10 великолепных комбинаций шрифтов Google, которые вы можете скопировать Allerta — средне-жирный шрифт без засечек. Если вы не хотели бы чего-то скучного или безумного, это золотая середина. Он смотрится хорошо и в заголовке, и в основном тексте.

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

HTML

<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">

CSS

h1 {font-family: 'Allerta', Helvetica, Arial, sans-serif;font-size: 50px;line-height: 55px;}p {font-family: 'Crimson Text', Georgia, Times, serif;font-size: 16px;line-height: 25px;}

Arvo и PT Sans

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

В сервисе подбора шрифта Google Font Directory есть только пара таких, и Arvo теперь один из самых жирных вариантов. Мне действительно нравится большая часть символов, но согласитесь, что “ S ” выглядит странно.

Я сочетал его с иным отличным шрифтом без засечек: PT Sans. Доступно пару вариантов, но простая версия лучше всего подходит для основного текста.

HTML

<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">

CSS

h1 {font-family: 'Arvo', Georgia, Times, serif;font-size: 59px;line-height: 70px;}p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-size: 16px;line-height: 25px;}

Dancing Script и Josefin Sans

10 великолепных комбинаций шрифтов Google, которые вы можете легко скопировать Рукописные шрифты трудно реализовать должным образом. Особенно когда они не так широко применимы, как Lobster. Dancing Script, показанный в примере выше, один из лучших в Google Font Directory.

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

HTML

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">

CSS

h1 {font-family: 'Dancing Script', Georgia, Times, serif;font-size: 59px;line-height: 60px;}p {font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;font-size: 18px;line-height: 25px;margin-top: 15px;}

Allan и Cardo

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

При подборе красивых шрифтов сочетание с представителем старого стиля( Cardo) кажется конфликтом временных периодов, но мне понравилось, как данные шрифты смотрятся вместе. Можете заменить его легким шрифтом без засечек.

HTML

<link href="https://fonts.googleapis.com/css?family=Allan" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Cardo" rel="stylesheet">

CSS

h1 {font-family: 'Allan', Helvetica, Arial, sans-serif;font-size: 70px;line-height: 75px;}p {font-family: 'Cardo', Georgia, Times, serif;font-size: 18px;line-height: 25px;}

Molengo и Lekton

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

HTML

<link href="https://fonts.googleapis.com/css?family=Molengo" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lekton" rel="stylesheet">

CSS

h1 {font-family: 'Molengo', Georgia, Times, serif;font-size: 56px;line-height: 80px;}p {font-family: 'Lekton', Helvetica, Arial, sans-serif;font-size: 16px;line-height: 25px;}

Droid Serif и Droid Sans

10 великолепных комбинаций шрифтов Google, которые вы можете скопировать Droid Serif и Droid Sans – шрифты из одного семейства. Как видите, обе гарнитуры красивы и дополняют друг друга. При подборе шрифта для веб-сайта их можно запросто поменять местами так, чтобы Droid Serif использовался для основного текста, а Droid Sans — для заголовка.

HTML

<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">

CSS

h1 {font-family: 'Droid Serif', Georgia, Times, serif;font-size: 49px;line-height: 65px;}p {font-family: 'Droid Sans', Helvetica, Arial, sans-serif;font-size: 14px;line-height: 25px;}

Corbin и Nobile

10 великолепных комбинаций шрифтов Google, которые вы можете без труда скопировать Corben — это жирный и мультяшный шрифт с засечками идеален для всего, что должно выглядеть в стиле 1920-х.

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

HTML

<link href="https://fonts.googleapis.com/css?family=Corben" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Nobile" rel="stylesheet">

CSS

h1 {font-family: 'Corben', Georgia, Times, serif;font-size: 40px;line-height: 55px;}p {font-family: 'Nobile', Helvetica, Arial, sans-serif;font-size: 13px;line-height: 25px;}

Ubuntu и Vollkorn

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

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

HTML

<link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>

CSS

h1 {font-family: 'Ubuntu', Helvetica, Arial, sans-serif;font-size: 50px;line-height: 65px;}p {font-family: 'Vollkorn', Georgia, Times, serif;font-size: 16px;line-height: 25px;}

Расскажите, что нравится вам!

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *