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


Оглавление (нажмите, чтобы открыть):

10 лучших Google шрифтов для заголовков

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

В данной статье найдете подборку из 10-ти бесплатных шрифтов Google Fonts, которые идеально подойдут для оформления заголовков сайта. Они установлены во многих веб-проектах по всему миру. Материал является переводом этой заметки от Jake Rocheleau.

Если вы не ориентируетесь как именно подключать данную функциональность, можете глянуть пост о CSS стилях заголовков — там есть парочка примеров.

1. Montserrat

Начнем с Montserrat. Он неплохо работает в разных местах, но в заголовках — особенно хорош. Его часто используют для навигации: в заглавных или прописных буквах, с нестандартными разрядами и различными стилями плотности. Данный шрифт Google Fonts весит только 500 байтов, поэтому он невероятно легкий, что сейчас немаловажно.

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

2. Merriweather

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

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

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

3. Josefin Sans

Josefin Sans — современный и классический, одинаково хорошо воспринимается и как шрифт джазовых эстрад 1950-х годов, и как шрифт первой страницы The New Yorker.

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

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

4. Arvo

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

Это один из самых сильных web шрифтов Google в данном списке, а его дизайн с засечками привлекает максимум внимания. Альтернативой может стать менее плотный Crete Round, но он не так эффективен, как Arvo.

5. Raleway

Raleway встречается на сайтах довольно часто. Выделяется своим оригинальным стилем и большим разнообразием вариаций.

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

6. Catamaran

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

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

7. PT Sans

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

Кстати, у него имеется парный шрифт PT Serif, который тоже выглядит неплохо. Хотя из этих двух решений большинство выбирает именно PT Sans. У него более гладкие кромки, чем у варианта с засечками, и для многих он кажется лучшим, особенно в блогах.

8. Open Sans

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

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

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

9. Roboto Slab

В качестве четкого шрифта для заголовков с засечками попробуйте Roboto Slab. Его буквы не слишком плотные, а засечки не отвлекают читателя.

Многие предпочитают именно Roboto Slab вместо рубленого (называемого Roboto), поскольку этот вариант кажется более весомым и может оказать больше впечатления на читателя.

Хотя, в принципе, оба Roboto шрифта Google хороши, и вы не ошибетесь, выбрав любой из них. Они поддерживают стандартные символы кодировки Unicode.

10. Ubuntu

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


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

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

Небольшая инструкция напоследок. Чтобы подключить нужный Font, нужно: 1) выбрать его, кликнув по кнопке «Select This Font»; 2) открыть вкладку «Family Selected», которая появится в нижней правой части экрана; 3) во всплывающем окне будет код вставки в ваш шаблон + некоторые настройки.

Если используете Вордпресс CMS в своем веб-проекте, то советуем почитать заметку про подключение шрифтов в WordPress, где также рассмотрен и метод с Google Fonts.

Лучшие кириллические шрифты Google 2020 года для сайтов

Читаемость вашего блога имеет значение!

Человеческая психология причудливых шрифтов.

Montserrat

Монсеррат — шрифт без засечек и имеет отличную читаемость. Его лучше всего использовать для заголовков на странице. Он хорош в паре с Open Sans и Raleway.

Oswald

Oswald — еще один простой шрифт для блогеров, который выглядит красивым, но читаемым.

Это доработка классического стиля, и лучше всего подходит для содержания контента и заголовков статей, хорошо сочетается со шрифтами Roboto и Lato.

Open Sans

Open Sans хорошо использовать на блоге или сайте. Он выглядит аккуратно и оптимизирован для печати, веб-и мобильных интерфейсов, лучше всего подходит для заголовков, однако может использоваться для содержимого контента. Прекрасно сочетается с Oswald и Monserrat.

Bitter

Bitter — еще один популярный шрифт, предназначенный для комфортного чтения на любом компьютере или устройстве. Его выгоднеее всего использовать для заголовков веб-сайтов и сайдбара. В паре лучше всего с Open Sans и Source Sans Pro.

Zilla Slab

Zilla Slab является популярным шрифтом, подходит для контента, лучшая пара с Roboto и Open Sans.

Raleway

Raleway — элегантный шрифт, который выглядит легким и профессиональным в то же время. Он доступен в 18 различных стилях и предназначен для использования в больших размерах, таких, как заголовки и название страницы. Будет неплохо смотреться в паре с Open Sans и Josefin.

Josefin Sans

Josefin Sans входит в группу причудливых шрифтов и, таким образом, широко используется для графического проектирования. Однако, благодаря своей элегантности, он может быть использован на веб-сайте без особых проблем, выглядит аккуратно для заголовков и боковых панелей. Кроме того, в паре лучше с Open Sans и Lato.

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

Nunito Sans

Nunito Sans — это хорошо сбалансированный шрифт с плавными кривыми. Он хорошо смотрится как в статье, так и на заголовках страниц, подойдёт и для сайдбара. Nunito Sans хорошо сочетается со шрифтами Roboto и Montserrat.

Ubuntu

Как вы уже догадались, Ubuntu — это шрифт, используемый популярной операционной системой с открытым исходным кодом, которая имеет то же имя. Он имеет края, которые выглядят круто для ориентированных на технологии веб-сайтов и блогов, наиболее подходит для контента и графического проектирования. Дружит с Open Sans и Oswald, придавая сайту профессиональный и элегантный внешний вид.

Arvo

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

Он также подходит для статей, в парах лучше всего с Oswald и Lato.

Roboto

Roboto идеально подходит для заголовков и доступен в 12 различных вариантах, которые могут расширить его использование для шрифта сайдбара и заголовка страницы, это один из самых популярных шрифтов Google, используемый более, чем на 13,000,000 сайтах. В паре лучше с Open Sans и Lato.

Lato

Lato — это классический шрифт, который хорошо сочетается практически со всеми шрифтами для блогов на этой странице. Это идеальный шрифт для статьи благодаря своей простоте и удобству чтения. Сочетается с Open Sans и Raleway.

Vollkorn

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

Lobster


Lobster — отличный выбор для заголовков (учитывая, что они не слишком длинные). Он сочетаем с Raleway и Josefin Slab.

Playfair Display

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

Он хорошо смотрится на блогах о моде и принят женщинами-блогерами для содержания контента, а также заголовков, прекрасно сочетается с Raleway и Open Sans.

PT Sans

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

Source Sans Pro

Source Sans Pro — это шрифт, который прекрасно сочетается с остальными лучшими шрифтами Google, его можно использовать везде на веб-сайте, и при этом он выглядит приятно. Кроме того, это один из самых популярных веб-шрифтов Google, представленных на более, чем 4200 000 веб-сайтах.

Lora

Идеальный шрифт для написания эссе, Lora — еще один популярный лучший шрифт Google, доступный бесплатно. Он имеет матовый кривые, что делает его привлекательным и сложным одновременно. Lora лучше всего сочетается с открытыми шрифтами Sans и Lato. Для веб-проекта Lora выглядит прилично как основа статьи.

Merriweather

Merriweather имеет причудливый вид и легко читаем. Это отличный шрифт для заголовков. Он популярен в паре с Oswald, и был по достоинству признан на более, чем 2700000 веб-сайтах.

Oxygen

Шрифт Oxygen выглядит красиво и используется для статьи и боковой панели. Буквы длиннее обычного и тоньше, что придаёт ему профессиональный вид. Он обычно сочетается с открытыми шрифтами Sans и Oswald.

Maven Pro

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

Мастер Йода рекомендует:  12 лучших Wordpress-плагинов для создания эффектов на изображениях

Как добавить шрифт на сайт

Идем на сайт www.google.com/fonts/, выбираем язык шрифта (русский шрифт отображается в меню слева, как Cyrillik). Для того чтобы скачать, нажмите на кнопку donwload.

Скопируйте содержащиеся в архиве шрифты в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Стандартное подключение скачанных шрифтов выглядит так

Пример подключения:

Как подключить google шрифт к сайту.

Чтобы подключить шрифт к сайту, перейдите на вкладку EMBED, там вы увидите 2 способа подключения:

  1. STANDARD — через html-тег link, его нужно разместить в head.
  1. @IMPORT

Важно. В не зависимости от способа подключения, для определения этих семейств используйте следующие CSS правила: font-family: ‘Roboto’, sans-serif; об этом будет еще ниже.

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

Если остались вопросы, вы можете заглянуть в руководство от гугла: developers.google.com/fonts/docs/getting_started

Как добавить шрифты Google в WordPress

Теперь, вы можете выбрать шрифт из списка, давайте посмотрим, как можно добавить его на свой сайт WordPress.

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

  1. Войдите в Панель управления WordPress
  1. Перейдите в раздел Плагины > Добавить новый


  1. Найдите плагин “Easy Google Fonts” и нажмите кнопку «Установить сейчас». Активировать его.
  1. Перейдите в Настройки > Google шрифты и создайте “новый элемент управления шрифтами.”
  1. Затем перейдите в раздел темы > Настройка > типографика, чтобы указать, какие шрифты используются для какого объекта.

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

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

Какой шрифт вы используете в своем блоге, и выглядит ли он идеально? Оставьте свой комментарий ниже. Кроме того, не забудьте поделиться статьёй со своими друзьями!

http://web-revenue.ru/instrumenti/servisy/google-web-fonts

http://www.webdesguru.com/5-besplatnyh-shriftov-dlya-idealnyh-zagolovkov/

Друзья! Приглашаем вас к обсуждению. Если у вас есть своё мнение, напишите нам в комментарии.

Лучшие Гугл шрифты для сайта

Google Fonts – лучший бесплатный каталог шрифтов в котором собрано около 1000 семейств на более чем 135 языках. Мы сделали подборку из 10 самых интересных вариантов, подходящих для установки на сайт и ПК.

Шрифты делятся на семейства, но основополагающим отличием принято считать наличие или отсутствие засечек – штрихов на концах букв. Это отражено в названии шрифтов: «serif» означает засечку, если рядом есть частица «sans» (от фр. sans – «без»), то шрифт будет без засечек. Они могут быть различной формы и размера: прямые, закруглённые, перпендикулярные, толстые, тонкие и ещё какие-нибудь. Считается, что засечки служат для улучшения читабельности текста, поскольку визуально образуют горизонтальную линию направления букв.

Однако, для использования в Интернете, да и вообще при чтении с экрана монитора, легче воспринимаются шрифты без засечек. Они проще поддаются оцифровке и выглядят более чёткими. Благодаря сервису Google Fonts выделился рейтинг самых популярных веб-шрифтов использующихся в мире. Мы отобрали десять вариантов самых удобочитабельных кириллических (русских) шрифтов, кратко охарактеризуем их, дадим ссылки на скачивание и расскажем, как их установить на сайт или компьютер.

Лучшие шрифты от Google Fonts – ТОП 10:

  1. Roboto – самый популярный шрифт в Интернете!
  2. Open Sans – номер 2 по популярности, отлично воспринимается.
  3. Montserrat – хорошо читаемый шрифт без засечек.
  4. Roboto Condensed – отличный вариант для текстовых абзацев.
  5. Source Sans Pro – хорош для оформления интерфейсов веб-приложений.
  6. Oswald – солидный шрифт для заголовков.
  7. Merriweather – изящный шрифт с засечками.
  8. Noto Sans – гладкий и простой шрифт для цифровых экранов.
  9. Yanone Kaffeesatz – стильный шрифт для кричащих заголовков.
  10. Caveat – красивый прописной шрифт для особых случаев.

1. Roboto – самый популярный шрифт в Интернете!

  • Дата создания: 2011 год
  • Всего стилей: 12 шт.
  • Используют: 26 млн. сайтов

Roboto – семейство бесплатных шрифтов с большим количеством вариантов веса: Thin, Light, Regular, Medium, Bold, Black. Шрифт придуман дизайнером Кристианом Робертсоном и впервые был представлен вместе с ОС Android 4.0 «Ice Cream Sandwich» в качестве системного шрифта. Сегодня это самый популярный шрифт в Интернете.

2. Open Sans – второй по популярности, отлично воспринимается на сайтах

  • Дата создания: 2010 год
  • Всего стилей: 10 шт.
  • Используют: 23 млн. сайтов


Open Sans – выглядит приятно, легко читается на экранах. Засечек не имеет, разработан Стивом Матессоном – одним из ведущих современных специалистов в типографике. Находится на 2-м месте по популярности в Сети, Google его использует для своей рекламы и некоторых сайтов.

3. Montserrat – хорошо читаемый шрифт без засечек

  • Дата создания: 1989 год
  • Всего стилей: 18 шт.
  • Используют: 7,5 млн. сайтов

Montserrat – шрифт без засечек, выглядит просто, интересно, отлично читается. Был изобретён в 1989 году Джульеттой Улановски, дизайнером из Буэнос Айреса, и назван в честь её родного района города. Стили различной степени жирности добавляются периодически по сей день.

4. Roboto Condensed – отличный вариант для текстовых абзацев

  • Дата создания: 2011 год
  • Всего стилей: 6 шт.
  • Используют: 2,9 млн. сайтов

Roboto Condensed – ещё одно творение Кристиана Робертсона, которое он вывел в отдельное семейство. Это узкий, вытянутый шрифт, довольно внятный и приятный на вид. Хорошо подходит для длительного чтения с экрана.

5. Source Sans Pro – хорош для оформления интерфейсов веб-приложений

  • Дата создания: 2012 год
  • Всего стилей: 6 шт.
  • Используют: 5,4 млн. сайтов

Source Sans Pro – содержит полный набор стилей, первый шрифт Adobe с открытым доступом. Разработан Полом Хантом, хорошо подходит для пользовательских интерфейсов. Поддерживает кириллицу во всех стилях, кроме курсива.

6. Oswald – солидный шрифт для заголовков

  • Дата создания: 2011 год
  • Всего стилей: 6 шт.
  • Используют: 5,4 млн. сайтов

Oswald – относительно новый шрифт, бы создан художником Верноном Адамсом в 2011 году, позже были добавлены стили, которых всего шесть. Шрифт вытянутый, стильный, внушительно смотрится в заголовках. Широко используется на сайтах и в приложениях для ПК и мобильных платформ.

7. Merriweather – изящный шрифт с засечками

  • Дата создания: 2010 год
  • Всего стилей: 8 шт.
  • Используют: 4,1 млн. сайтов

Merriweather – шрифт с чётко выраженными засечками, вытянутый и слегка сжатый, с открытой, плавной формой букв. Был разработан специально для отображения на электронных экранах. Изящно выглядит и хорошо читается. Существует также в версии без засечек с приставкой «sans».

8. Noto Sans – гладкий и простой шрифт для цифровых экранов

  • Дата создания: 2012 год
  • Всего стилей: 4 шт.
  • Используют: 3,1 млн. сайтов

Noto Sans – шрифт с упрощённым дизайном букв: простые линии, никаких засечек, буквы чуть шире среднего и их толщина тоже. Был специально разработан для компьютеров с учётом особенностей оцифровки. Выглядит просто, гладко, хорошо читаем. Подходит для текста абзацев.

9. Yanone Kaffeesatz – стильный шрифт для кричащих заголовков

  • Дата создания: 2004 год
  • Всего стилей: 4 шт.
  • Используют: 460 тыс. сайтов

Yanone Kaffeesatz – шрифт стилизован под типографию кофеен 20-х годов. Тонкий, вытянутый, выглядит немного старомодно и дорого, отлично подходит для заголовков, особенно рекламных. Используется в полиграфии множества стран и крупных компаний.

10. Caveat – красивый прописной шрифт для особых случаев

  • Дата создания: 2014 год
  • Всего стилей: 2 шт.
  • Используют: 110 тыс. сайтов

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

Как скачать шрифт с Google Fonts?

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

Как установить шрифт на свой компьютер?

После загрузки zip-архива на ПК и открытия папки со шрифтом его нужно установить в операционную систему Windows 10 или MacOS дважды кликнув мышкой по нему. Откроется окно с предпросмотром шрифта в котором нужно вверху нажать «Установить». После чего можно использовать его в текстовых, графических редакторах, типа Photoshop и не только.


Как изменить шрифт в браузере?

Любые установленные шрифты можно использовать в своем браузере (Гугл Хром, Яндекс Браузер, Mozilla Firefox, Опера и др). Покажем способ, как можно изменить шрифты в Google Chrome, который считается самым популярным браузером среди пользователей Интернета.

Открываем: «Настройки и управление Google Chrome ( … )» → «Настройки» → «Внешний вид» → «Настроить шрифты»:

На открывшейся вкладке нужно выбрать необходимые шрифты:

Как самому подключить шрифт к сайту на CMS?

CMS – это система управления содержимым сайта, так называемый «движок» (специальный скрипт, дистрибутив), который устанавливается на хостинг. Движки позволяют собирать полноценные сайты, блоги, интернет-магазины: добавлять/удалять страницы, менять дизайн шаблона, подключать плагины и т.д.

Для ручной установки шрифта на сайт, работающего на одной из CMS (таких как: WordPress, Joomla, Drupal и др.), нужно скопировать и добавить код встраивания шрифта в исходный код шаблона в область . . При этом, в файле CSS указать правило для определения подключенных семейств. Образцы кода для обоих случаев сервис предоставляет на вкладке «Families Selected» – достаточно скопировать и вставить.

Google выпустила бесплатный шрифт, который поддерживает более 800 языков и 110 000 символов

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

Как сообщается в блоге компании, изначально шрифт был предназначен для решения проблемы «тофу» в Android и ChromeOS — так называемых прямоугольников ▯, которые показываются в большинстве шрифтов для символов, которые не поддерживаются. Отсюда берётся и название шрифта — Noto (No more tofu).

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

Проект стал одним из самых масштабных в истории создания шрифтов.

Напомним, скачать шрифты можно на сайте проекта. Общий вес на момент написания статьи (шрифт будет дополняться по мере добавления символов в Unicode) составляет 472 МБ.

ТОП-10 кириллических шрифтов Google fonts

1. Open Sans — безусловный лидер рейтинга. Содержит полный набор 897 символов. Имеет отличные характеристики, разборчив. Оптимизирован под различные устройства. Его дизайн практически идентичен Droid Sans, за исключением более широких символов и наличием курсива. В то время как Droid Sans в основном используется в пользовательских интерфейсов некоторых Android устройствах.

2. Roboto — этот чистый шрифт мир впервые увидел с появлением операционной системы Android Ice Cream Sandwich. Семейство данного шрифта включает регулярные и курсивные стили, тонкий, легкий, регулярный и суженный ширины (condensed). По своей структуре явно напоминает не менее известный шрифт Helvetica. Начиная с 15 мая 2013 г. данный шрифт компания Google начал интенсивно использовать в своих популярных продуктах таких как: Google+, Google Play, Google Maps.

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

4. Ubuntu — этот шрифт мир впервые увидел в составе операционной системы Ubuntu ее версии 10.10. Доступен в четырех версиях: обычный, курсив, полужирный, полужирный курсив на английском языке и на кириллице. Начиная с 26 апреля 2011 г. он включен для использования в сервисе Google Docs.

5. Arimo — данный шрифт вошел в состав Chrome OS. Еще одна допустимая альтернатива Helvetica.

6. Noto Sans

7. Play

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

17 лучших Google шрифтов и как их использовать в WordPress

Вы готовы обновить свой сайт WordPress, но не можете решить, какой шрифт выбрать? Тогда лучшее решение – начать с самых популярных вариантов. В этом посте перечислены часто используемые шрифты Google и указаны их особенности. А также несколько советов о том, как лучше всего включить их в свой веб-сайт WordPress.

17 самых популярных шрифтов Google в 2020 году

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

1. Roboto

  • Без засечек
  • 12 стилей
  • Пример шрифта .

Rockin Roboto – самый популярный шрифт с рекордным количеством использований: почти 60 миллиардов. Он наиболее популярен в США, но может похвастаться высоким уровнем использования в Японии и Бразилии. Roboto отличается сильными, чистыми линиями, но при этом мягкими и дружелюбными изгибами. Google предлагает Open Sans, Lato, Montserrat, Raleway и Oswald в качестве популярных пар для Roboto.

2. Open Sans

  • Без засечек
  • 10 стилей
  • Пример шрифта .

Open Sans используют для удобства чтения. Это нейтральный шрифт, общедоступный как для мобильных платформ, так и для печати. Open Sans любят в США, Франции и России. Его популярные пары: Roboto, Lato, Oswald, Raleway, and Montserrat.

3. Lato

  • Без засечек
  • 10 стилей
  • Пример шрифта .


Lato – шрифт для бизнеса. Его углы точные, чистые и острые, что полюбилось почти 10 миллиардам пользователей от США до Бразилию. Его пары Google шрифтов – Roboto, Open Sans, Oswald, Raleway и Source Sans Pro.

Мастер Йода рекомендует:  Красивый код на PHP

4. Monserrat

  • Без засечек
  • 18 стилей
  • Пример шрифта .

Monserrat заинтересован в том, чтобы остаться уникальным, как и его одноименный район в Буэнос-Айресе в Аргентине. Этот шрифт используют более чем 5 миллиардов пользователей в США, во Франции ​​и Бразилии. Популярные комбинации с этим шрифтом – Raleway, Open Sans, Roboto, Oswald и Lato.

5. Roboto Condensed

Возвращаясь к Roboto, на этот раз в его «Condensed» виде. Семейство шрифтов Roboto многочисленное, и это более тонкий аналог нашего предыдущего примера. Он разработан для тех, кому необходимо сохранить пространство на веб-сайте. Более 4 миллиардов человек используют эту версию, и она наиболее популярна в США и России. Лучшие компаньоны пары: Open Sans, Lato, Oswald, Montserrat и обычные Roboto.

6. Source Sans Pro

  • Без засечек
  • 12 стилей
  • Пример шрифта .

Превосходный Source Sans Pro – серьезно относится к своей работе. Adobe разработала его таким образом, чтобы он идеально подходил для пользовательских интерфейсов. Почти 4 миллиарда человек используют его в США и Франции. Хорошо сочетается с Open Sans, Roboto, Lato, Oswald и Raleway.

7. Oswald

Изысканный Oswald хорош вписывается в пиксельную сетку стандартных цифровых экранов. Он свободно используется на интернет-платформах почти 4-мя миллиардами человек, особенно в США и Франции. И чаще всего в паре с нашими регулярно появляющимися шрифтами: Open Sans, Roboto, Lato, Montserrat и Raleway.

8. Raleway

  • Без засечек
  • 18 стилей
  • Пример шрифта .

Изысканный Raleway живет в состоянии ар-деко. Raleway привносит элегантный, но смелый вид на любой веб-сайт. Изначально он планировался как заголовок с одним стилем, и теперь он может похвастаться 18 стилями и почти 3 миллиардами людей, которые его используют. Он регулярно появляется вместе с Montserrat, Open Sans, Roboto, Lato и Oswald.

9. Slabo 27px / 13px

Специализированный Slabo 27px / 13px наиболее удобен в технической тематике, например, для отчета научной лаборатории. Несмотря на наличие засечек, он выглядит тонким и эффективным. Его используют более 2 миллиардов человек в США, Индонезии, Индии и Бразилии. Популярные пары – Open Sans, Roboto, Lato, Montserrat и Oswald.

Как добавить свои кастомные шрифты на WordPress тут.

10. PT Sans

PT Sans – интроверт, ставший экстравертом. Он был впервые разработан для проекта «Общественные типы Российской Федерации», чтобы посетители могли читать и писать на своем родном языке. В настоящее время его используют по всему миру, хотя он по-прежнему остается самым популярным в России. Open Sans, Roboto, Lato, Raleway и PT Serif – отличные компаньоны для этого шрифта.

11. Merriweather

Merriweather – это открытая книга с простым для чтения стилем для любого экрана. Это шрифт с интересными небольшими диагоналями, открытыми округлыми формами и длинными засечками. До 2 миллиардов человек используют его в основном в США, а также в Италии и Бразилии. Его популярными парами являются Open Sans, Montserrat, Oswald, Lato и Roboto.

12. Roboto Slab

Roboto Slab – крутой кузен обычного Roboto, привносящий ощущение талантливости. Он отделяет себя от обычного Roboto с его уникальным стилем и не заботится о том, чтобы экономить место так же сильно, как это делает Roboto Condensed, потому что он слишком сосредоточен на самовыражении. Не более 2 миллиардов человек используют Roboto Slab в США, России, Италии и Бразилии, и он хорошо сочетается с обычными Roboto, Open Sans, Monserrat, Lato и Raleway.

13. Noto Sans/Serif

  • С засечками или без засечек
  • 4 стиля
  • Пример шрифта .

Noto Sans – это международный вид шрифта – его разрабатывали как шрифт для нескольких языков. Noto Sans используют более 1,5 миллиарда человек, и в основном из США и Бразилии. Noto Sans хорошо работает с Noto Serif, Open Sans, Inconsolata, Roboto и Source Sans Pro.

14. Open Sans Condensed

Open Sans Condensed появился сразу после дебюта Roboto Condensed. Open Sans Condensed – это еще один способ сэкономить место и донести ваше сообщение чуть более эффективно, чем обычные Open Sans. До 1,5 миллиарда человек используют его в разных странах, таких как США, Россия, Великобритания, Италия и Франция. Популярные пары включают в себя обычные Open Sans, Roboto, Oswald, Josefin Slab и Amatic SC.

15. Ubuntu

Ubuntu – это шрифт с равными возможностями. Он придерживается философии, аналогичной Noto Sans, полагая, что все языки могут использовать его. Ubuntu может похвастаться более чем 1 миллиардом пользователей во многих странах, таких как США, Россия, Италия, Франция, Испания и Бразилия. Шрифт часто появляется с Open Sans, Roboto, Lato, Oswald и Raleway.

16. Poppins

  • Без засечек
  • 18 стилей
  • Пример шрифта .


Peppy Poppins привносит жизнь в геометрические узоры и сочетает в себе порядок и веселье. Его любимая форма – это круг, так как он используется для сглаживания краев и углов, что добавляет буквам мягкости. Его используют более 1 миллиарда человек, в основном в США и Франции. Шрифт хорошо смотрится с Roboto, Open Sans, Raleway, Oswald и Playfair Display.

17. Playfair Display

Playfair Display устойчив благодаря широким засечкам, и в то же время имеет мягкие закругленные края. Это выглядит великолепно в печати и придает тексту атмосферу журнала. Его используют чуть более миллиарда человек, чаще всего в США, Франции, Италии и Испании. Шрифты-компаньоны для Playfair Display: Roboto, Open Sans, Lato, Montserrat и Raleway.

Советы по использованию шрифтов Google в WordPress

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

1. Выберите шрифт, который подходит вашему сайту

Raleway придает тесту стильность ар-деко, Merriweather обладает легкостью, а Playfair Display может похвастаться журнальной / печатной атмосферой. Спросите себя, какой стиль воплощает ваш бренд, и подберите шрифт, согласно вашей концепции.

2. Сформируйте творческую структуру

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

3. Ограничьте свои стили шрифта

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

4. Помните о читабельности

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

5. Если у вас есть уникальный шрифт, разместите его на сервере

Чтобы попытаться улучшить производительность, можете разместить шрифт локально на вашем сервере. Если вы используете шрифт Google, то это делать не нужно, поскольку серверы Google обычно очень быстро реагируют. Однако есть и другие причины для размещения файлов шрифтов на вашем сервере, в том числе и новые правила GDPR. Пплагин CAOS for Webfonts | Host Google Fonts Locally станет отличным решением для обоих случаев.

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 3

Новый бесплатный шрифт от Google охватывает более 800 языков

Пять лет Google тесно сотрудничала с экспертами в области дизайна из Monotype и Adobe. Результат трудов был представлен сегодня. Noto — семейство шрифтов, которое охватывает свыше 800 языков и 110 000 символов.

Название Noto в полном варианте выглядит как No more tofu, что означает «больше без тофу». Поясним, что такое тофу. Понятие связано с особенностями китайской иконографики. Артемий Лебедев пишет: «Белые прямоугольники, которые показываются, когда символ в шрифте есть, но его изображение отсутствует, называются тофу из-за удивительного сходства с одноимённым соевым творогом».

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

Где скачать шрифт Google Noto

Полное семейство шрифтов со всеми начертаниями и стилями занимает 472 МБ. Разумеется, самые объёмные пакеты содержат китайские и корейские символы. Можно загрузить всё сразу или выбрать те, которые вам нужны. Перейдите на страницу Noto и введите в поисковой строке нужный язык.

Шрифт Noto распространяется бесплатно по свободной открытой лицензии SIL Open Font License. Компания утверждает, что будет поддерживать Noto в актуальном состоянии и постоянно обновлять семейство по мере роста Unicode. Сейчас Noto включает все символы Юникода.

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

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

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

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

Open Sans является одним из самых популярных веб шрифтов в Google Fonts. Это гуманистический шрифт без засечек, разработанный Стивом Маттесоном, директором типа Ascender Corp. Он может использоваться как для титульного, так и для основного текста и очень совместим со многими шрифтами без засечек и засечек.

Roboto Slab — еще один очень популярный выбор шрифтов для портфелей многих дизайнеров. Это геометрическая форма и дружелюбные кривые, которые отлично работают как для заголовков, так и для текстов тела. Он легко сочетается с другими популярными шрифтами, такими как Open Sans, Roboto, Lato и т. Д.

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

Playfair — классический семейный шрифт. Это весовая накладка регулярная, жирная и черная. Черный вес шрифта Playfair Display имеет очень сильное впечатление в портфеле Gabe ниже. Как отличный выбор для заголовков и заголовков, он хорошо сочетается с большинством популярных шрифтов sans serif для основного текста. Шрифт Playfair Display можно также найти в Google Fonts бесплатно.

League Spartan- новая классика. Это смелый, современный, геометрический шрифт без засечек. Это впечатляет для смелых заголовков и названий, которые еще элегантны для навигации и основного текста. Портфолио от Риккардо демонстрирует, как League Spartan работает с засечками шрифтов, чтобы выразить вкус современного и классического.

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

LTC Bodoni 175 — это стильный и структурный шрифт с засечками. Для портфелей это отлично подходит для заголовков, как то, что Мэтт Памер сделал ниже или может быть применено к тексту тела для повествования. Этот шрифт можно приобрести на Typekit и Myfonts.

Calluna — шрифт с засечками, разработанный голландским дизайнером Джосом Буйвенгой и выпущенный в 2009 году через литейный завод exljbris. Calluna можно использовать для заголовков в качестве примера ниже или использовать в курсив форме для более ощущения жидкости и каллиграфии.


Futura PT — один из самых популярных веб шрифтов. Он имеет современный внешний вид и восхитительные характеристики. Его можно использовать как большие и полужирные названия, так и основной текст. Следующий портфель от Ningxia, дизайнер продукта в Facebook, показывает, как этот шрифт способствует стилю всего сайта.

Freight Display — это версия дисплея Textys, предназначенная для использования в больших размерах для отображения и использования заголовков. Диспетчер грузовых перевозок доступен в шести весах: легкий, книжный, средний, полужирный, полужирный и черный — каждый с курсивом. Как отличный выбор шрифта заголовка, он хорошо работает с большинством популярных шрифтов serif и san serif.

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

5 трендов и сочетаний Google шрифтов (перевод статьи)

Google Fonts — это интерактивный каталог свободно размещенных интерфейсов программирования приложений для веб-шрифтов. Он был запущен в 2010 году и обновлен в 2011 году. Многие шрифты выпущены в соответствии с SIL Open Font License 1.1, а некоторые выпущены под лицензией Apache, обе лицензии являются бесплатными.

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

Мастер Йода рекомендует:  Как объединить ячейки в HTML-таблице горизонтально и вертикально colspan и rowspan

Принципы дизайна

«Принципы дизайна — это основные идеи и элементы, которые могут быть применены для достижения качественного дизайна»

01.
Принцип — Белое пространство (White Space)

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

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

Использованы шрифты Google fonts — Montserrat & Lato

02.
Принцип — Симметричность (Symmetry)

Симметрия в повседневном языке означает чувство гармоничной и красивой пропорции и баланса. В математике «симметрия» имеет более точное определение, что объект является инвариантным к любому из различных преобразований; Включая отражение, поворот или масштабирование. Хотя эти два значения «симметрии» иногда можно разделить друг с другом, они связаны между собой, поэтому они здесь обсуждаются вместе.

Использованы шрифты Google fonts — Playfair Display & Open Sans

03.
Принцип — Контраст (Contrast)

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

Использованы шрифты Google fonts — Oswald & Raleway

04.
Принцип — Правило третей (The Rule of Thirds)

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

Использованы шрифты Google fonts — Oranienbaum & Neuton

05.
Принцип — Выравнивание (Alignment)

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

Использованы шрифты Google fonts — Fjalla One & Prata

Крутые сочетания шрифтов #2

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

Уверен, вы замечаете многие многие шрифтовые тренды. Каждый год появляется популярный шрифт, который мелькает в проектах на Behance и Dribble. Сначала это был Gotham, затем Proxima и Avenir, а сегодня мы опять вернулись к Futura. Но нет никакого смысла бояться подобной цикличности.

Дизайн в своём развитии похож на петлю, также как и тренды в стилях архитектуры или моды. Появляется новое направление, достигает своего пика, а затем сменяется.

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

Плюс, я буду обращать ваше внимание на некоторые детали, которые нравятся именно мне.

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

STAMPSY

На сайте Stampsy используется PF Bague Sans Pro для заголовков и шрифта интерфейса.

Шрифт круто смотрится в веб-дизайне, но его также можно использовать в газетах и журналах моды. На скриншоте выше видно, как его применили в дизайне плеера. Второй шрифт — это известный Minion Pro Condensed, который круто смотрится рядом с Bague. Вместе они образуют великолепную связку, как молодая пара хипстеров из Портленда. Ещё я думаю, что было рискованно выбирать Condensed версию Minion, но в результате всё получилось очень цельным и спокойным.

На главной странице они используют те же шрифты, но наоборот. Здесь шрифт текста — это Minion Pro Condensed, а текст заголовков — PF Bague Regular. В целом, эта страница смотрится свежо. Приятные цвета, нет избытка текста, перегружающего страницу. Мне нравится подход, в котором суть проекта отображается в пяти больших слайдах. Иногда трудно описать свой проект коротко и быстро, но всегда есть смысл попробовать так сделать.

В миниатюрной версии плеера также используется PF Bague. Он по-прежнему круто смотрится в интерфейсах. А ещё он лаконичен и сохраняет изюминку, цепляющую взгляд посетителя.

Это блок с рекомендованной статьёй. Оба шрифта остаются читаемыми даже в кегле в 14px.


На странице с подборками статей применяется несколько разных кеглей. Заголовок написан с помощью PF Bague в жирном начертании, 60px, а под ним Minion Condensed, 24px, 31px. Обратите внимание, как круто смотрится шрифт на зелёной кнопке.

FUZZCO

Вот ещё один замечательный шрифт — GT Haptik, на сайте Fuzzco он используется везде. У этого шрифта знаки больше, чем у BF Bague. Побродив по сайту, вы увидите, что шрифт одинаково хорошо смотрится и в большом кегле, и в кегле 15px, что очень удобно для UI.

Fuzzco — хороший пример того, как умелое обращение со шрифтами и изображениями делает страницу привлекательной. У GT Haptik сильный характер, и он подойдёт не каждому сайту. Например, у него очень даже претенциозная цифра 0 и прописная R. Хотя шрифт всё равно крут.

Огромное спасибо ребятам из Fuzzco за новый шрифт в моём арсенале. Теперь буду пользоваться им по праздникам.

EXPOSURE

Exposure — сайт для людей, которые хотят делать красивые фото-истории. Мне нравится, что эти ребята тоже не боятся экспериментов со шрифтами и зачастую придумывают что-то новенькое. Основной шрифт на этом сайте — Europa с TypeKit. В напарники ему был выбран старый добрый Adobe Garamond Pro.

Заголовки написаны прописным жирным начертанием Europa, 40px, 60px; разрядка — 4px. Под ним используется Garamond в нормальном начертании. Как вы можете видеть на правой стороне скриншота, шрифт Europa отлично смотрится на кнопках и в сплошном тексте. На сайте Exposure правильно расставлены визуальные акценты и грамотно использованы прописные заголовки, текстовые области и кнопки.

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

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

Раздел с фото-историями интересно сочетает в себе и Europa, и Garamond. Шрифты хорошо читаются даже в маленьком кегле.

WONDERLAND

На сайте Wonderland используется известный ITC Avant Garde. Шрифту уже 40 лет, но он всё ещё мило смотрится и остаётся популярным.

Второй шрифт на Wonderland — Neuzeit Grotesk. Если вы зададите для него кегль в 22px и межстрочный интервал в 35px, он становится очень даже читаемым и чистым. Это хорошо видно на этом огромном куске текста.

Ещё мне понравилась страница с контактами, на которой используется Neuzeit Grotesk 20px.

Жирное начертание заголовков с подчёркиванием ITC Avant Garde и тонкий, текстуальный Neuzeit Grotesk хорошо смотрятся вместе. Эта страница контактов, как и в случае с сайтом Fuzzco, содержит только текст. И из-за того, что дизайнер постарался сделать её лёгкой и чистой, она и выглядит понятной.

DOGSTUDIO

Визуальное представление этого сайта хорошо привлекает внимание посетителя. Шрифт заголовков — Playfair, кегль: 55px и высота строки: 55px. Помимо всей шикарности этого шрифта вам также понравится факт его полной бесплатности.

Шрифт текста верхней панели меню и слова «Congress» — жирное начертание Futura, 13px.

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

В тексте заголовка (см. выше) используется полужирное начертание Futura 48px, 45px. Возможно вы уже заметили, что иногда я специально акцентирую ваше внимание на кегле шрифтов и межстрочных интервалах. Мне кажется, что выбор дизайнером этих значений не случаен, это же основы подбора шрифтов.

Если цветом прошлого года по моему мнению был ярко синий, и мы видели его абсолютно повсюду, то в начале 2015 года уже было много бежевого.

Основной текст — светлое начертание Helvetica Neue, 16px, 28px. Он превосходно контрастирует с жирным заголовком, а разреженный межстрочный интервал позволяет легко читать текст.

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

Небольшой, но аккуратный блок можно найти в разделе «Studio». Заголовок — полужирная Futura, 35px, 33px. Ниже идёт основной текст — тонкое начертание Playfair, 16px, 20px.

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

READYMAG

У сайта Readymag дизайн действительно продуман. Они часто экспериментируют со шрифтами и нередко результат получается просто здоровский.

Для заголовка главной страницы было выбрано сверхсветлое начертание Nobel, 84px, 82px. А ниже тоже используется Nobel, но 26px, 26px. Для меню используется уже знакомый Avenir Next, 19px, 19px.

У шрифта Nobel есть характер, и он отлично подходит для повествовательной формы представления контента. Вместе с обезличенной и понятной Helvetica этот шрифт можно применять в «креативных проектах» и показывать их «компетентной аудитории». Плюс, Nobel хорошо сочетается с Avenir Next.

На сайте Readymag с помощью этой пары был создан понятный и минималистичный дизайн. Обратите внимание на отступы и параметры шрифта, заданные в блоке с преимуществами продукта. Заголовок — светлое начертание Nobel, 64px, 80px; название каждого блока — полужирное начертание Avenir Next, 24px 30px; текст описания — нормальное начертание Avenir Next, 18px, 24px. А воздух между блоками придаёт всей композиции свободу и чистоту.

Avenir Next отлично подходит для заголовков и обычного текста. Он отлично вписывается и в UI. UI сайта Readymag — лишь один подобный пример. В огромных заголовках он мне больше напоминает хипстерские шрифты, а в обычном тексте в нём появляется больше геометричности и круглости, как в Proxima Nova.

С помощью Avenir Next вы можете выделять нужные блоки, применив прописное начертание шрифта в заголовке. Здесь разрядка задана в 2px, кегль: 13px, высота строки: 13px. Параметры текста ниже: 13px, 13px.

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

Но у сайта Readymag с этим всё в порядке. Для этого блока сайта они взяли Merriweather, который можно скачать с Google Fonts.

Подсказка: вы можете высчитать размер заголовка при помощи золотого сечения. Задайте фиксированный кегль основного шрифта —

. Например, нашим шрифтом будет Proxima, 19 px. Поскольку ширина вертикали сетки будет равна 18px, интерлиньяж контента будет таким — 18*2=36px.

Теперь нам нужно выбрать размер текста под заголовком. Возьмём золотое сечение 1*1,618 и умножим его на размер контента. 1,618*19=30,74

30px. По такой же формуле высчитаем размер заголовка: (1,618*19)*1,618=49,74

В этом случае получаем следующие размеры: основного текста — 19px, текста под заголовком — 30px, заголовка — 50px.

DRAGONE

На сайте Dragone использована такая же пара шрифтов как и на Dogstudio. Сайты похожи и сами по себе, и мастерским уровнем своего исполнения. У меня даже иногда есть ощущение, что их делала одна студия. Заголовки — Playfair, 40px, 40px., основной текст — FuturaLight 17px, 27px.

Только посмотрите, как хорошо шрифты подходят друг другу! Они созданы друг для друга, хотя кажется, будто они из разных миров. Заголовок — Playfair, 30px, 30px. Выше использовано жирное начертание Futura Bold 11px, 25px, разрядка: 2px. Мне нравится чистота и лёгкость этой пары. Кажется, что здесь нет ничего ненужного — приятная картинка и понятный текст, создающий эмоциональную связь с иллюстрированным продуктом.

Мне очень нравится, как сочно выглядит футер. Кегль, цвет и высота строк отлично продуманы. Заголовок — жирное начертание Futura, 12px, letter-spacing: 2px. Пункты меню — Playfair, 13px, 18px.

На странице «Контакты» в заголовках используется тот же Playfair.

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

Это была моя первая статья. Спасибо, что прочитали её и просмотрели все предложенные мной примеры. Анализировать работы других крутых дизайнеров очень важно и полезно.

Если статья вам понравилась, поделитесь ей с друзьями и можете передать мне привет в Twitter. Ещё я завёл блоги в Tumblr и Pinterest, где доступны все скриншоты из этой статьи.

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

Vladimir Kudinov — дизайнер и сооснователь @Designmodo

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