Шрифты google: Google Fonts / Настройка шрифтов для проекта


28.05.2023 Facebook Twitter LinkedIn Google+ Разное


Содержание

5 лучших бесплатных шрифтов с Google Fonts для сайта — Гаяне Гаспарян на vc.ru

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

441 просмотров

О лицензии шрифтов Google Fonts

К бесплатным относятся системные шрифты, установленные в персональных компьютерах, а также те, что предоставляет Google Fonts. Все шрифты на этом сервисе можно использовать совершенно бесплатно в любых продуктах: печатных или цифровых, коммерческих или персональных.

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

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

В подборке Google Fonts более 1000 бесплатных шрифтов, которые подходят для коммерческого использования, вот 5 лучших:

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

Raleway — это элегантный шрифт без засечек, предназначенный для заголовков и других текстов с большим кеглем. Первоначально его разработал Мэтт Макинерни только в тонком весе, а в 2012 году Пабло Импаллари и Родриго Фуэнзалида расширили его в семейство из девяти начертаний.Стиль этого шрифта добавляет свежести любому проекту, несмотря на строгость форм. Raleway подходит именитым брендам, которые хотят идти в ногу со временем. Стоит обратить на него внимание, если вы хотите подчеркнуть элегантность или минималистичность проекта.

Open Sans — семейство свободных шрифтов, разработанных Стивом Мэттисоном по заказу Google. По данным Google, он был спроектирован с «прямым штрихом, открытыми формами и нейтральной, но дружественной внешностью» и «оптимизирован для удобочитаемости при печати, в веб- и мобильных интерфейсах».

Rubik — шрифт без засечек со слегка закруглёнными углами. Лёгкий, мягкий шрифт будет хорошо смотреться в тексте для чтения и подойдёт проекту практически любой тематики. Он — наша любимая альтернатива платного Daxline.

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

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

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

10 лучших бесплатных кириллических шрифтов с Google Fonts | GeekBrains

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

5 минут

83999

Автор статьи

Дарья Калинина

Автор статьи

Дарья Калинина

https://gbcdn. mrgcdn.ru/uploads/post/2245/og_image/8a84cd2bb41242e077ef7e2a0ee0451b.png

Разработка дизайна для сайта или проекта — трудоёмкий процесс, в начале которого важно принять правильные стилистические решения. Дизайнерам есть над чем подумать: от цветовой схемы и логотипа до навигации и вёрстки контента. Но самое сложное всё-таки в том, чтобы объединить все эти составляющие стиля сайта в одну сбалансированную и цельную концепцию.

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

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

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

О лицензии шрифтов Google Fonts

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

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

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

С лицензиями разобрались — переходим к подборке. 

Rubik

Rubik — это представитель семейства шрифтов без засечек со слегка закруглёнными углами. Его разработали дизайнеры Филипп Хьюберт и Себастьян Фишер. 

Лёгкий, мягкий шрифт будет хорошо смотреться в наборном тексте (для чтения) и подойдёт проекту практически любой тематики. Особенно он хорош для сайтов и лендингов компаний из digital-индустрии. Плюс этого шрифта — в свежести. Он не выглядит заезженным даже для самых опытных дизайнеров. 

Примеры использования: dinoballiana.com, moeamaya.com, genesisblockchain.io.

Cormorant

Cormorant — это изящный шрифт с засечками, созданный Кристианом Талманном. Включает пять классических начертаний (Light, Regular, Medium, SemiBold, Bold) и большое количество символов. Посмотрите проект на Behance, чтобы детально изучить его. 

При создании этого шрифта дизайнер отталкивался от известного всем Garamond, который отлично показывает себя в наборном тексте, но не подходит для заголовков. Стоит отметить, что Кристиану удалось исправить этот недостаток! 

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

Примеры использования: sasha-ng.com, readwildness.com/eco, katescott.co/sparhawk.

Alegreya Sans

Alegreya Sans — это рубленый шрифт (без засечек), разработанный аргентинским дизайнером Хуаном Пабло дель Пералом. Представлен в семи начертаниях, в том числе в Italic.

Его рекомендуют для наборного текста или для небольших заголовков в начертании Bold. Alegreya Sans минималистичен и отличается необычными пропорциями, поэтому непрост в работе. Но он сильно недооценён на просторах Google Fonts и поэтому будет выглядеть оригинально.

Примеры использования: cafefrida.ca, shinbyeong.com.

Source Sans Pro

Source Sans Pro — это первый бесплатный шрифт Adobe. Разработан Полом Д. Хантом. Без засечек, предназначен для работы в пользовательских интерфейсах. У дизайна Source Sans Pro классический готический характер, который легко воспринимается зрительно.

Шрифт разработан в шести градациях толщины, в прямом и наклонном начертании. Благодаря его компактности, Source Sans Pro можно удачно использовать не только в интерфейсах, но и там, где много текста (в лонгридах). 

Примеры: whitehouse.gov, owlstudios.co, abyssale.com.

Playfair Display

Playfair Display — один из самых известных шрифтов с засечками. Автор — Клаус Эггерс Соренсен. Идеология этого шрифта основана на изящных каллиграфических формах 18 века. Разработан в 2011 году, но до сих пор не теряет популярности. Контрастный и умеренно широкий, он идеально подходит для любых заголовков.

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

Примеры использования: zack.es, sachatourtoulou.com, councl.com.

Montserrat

Montserrat — это один из шрифтов, наиболее удобных для чтения. Без засечек, созданный Джульеттой Улановски в 1989 году — с тех пор невероятно распространённый. В Montserrat есть все варианты начертаний: от ультратонкого до жирного, — а также соответствующие курсивы.

У этого шрифта примерно одинаковое соотношение ширины и высоты, поэтому он удобен практически для всех типов проектов. За исключением, пожалуй, только интерфейсов и мобильных приложений. С 2019 года, когда в моду вошли широкие шрифты для заголовков (например, Druk Wide), Montserrat переживает новую волну популярности.

Примеры: welcometonext.com, melonfashion.ru, userflower.com.

Merriweather

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

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

Примеры: hopesandfears.com, interactive.unwomen.org, scmp.com.

Open Sans

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

Секрет его успеха очевиден уже по названию: это открытый, нейтральный и дружелюбный шрифт. Его главные плюсы — разборчивость и универсальность. А он ещё и бесплатный 🙂

Примеры: noiz.io, cordial.com, designthingy.co.

IBM Plex Sans

IBM Plex Sans — это нейтральный, но в то же время дружественный шрифт в стиле гротеск. Включает Sans, Sans Condensed, Mono и Serif. Остаётся разборчивым в печатных, мобильных и веб-интерфейсах.

В этом шрифте удачно сочетаются геометричность форм и мягкость изгибов — и это придаёт ему характер, сохраняя универсальность. Используйте его для проектов, связанных с IT, а также в интерфейсах и мобильных приложениях. Кстати, IBM Plex Sans — на данный момент основной шрифт GeekBrains.

Примеры: coolstuff.nyc, jasperterra.nl, niteeshyadav.com

Raleway

Raleway — это элегантный шрифт без засечек, предназначенный для заголовков и других текстов с большим кеглем. Первоначально его разработал Мэтт Макинерни только в тонком весе, а в 2012 году Пабло Импаллари и Родриго Фуэнзалида расширили его в семейство из девяти начертаний.

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

Примеры: weddingdronenewyork.com, bellevoye.fr/en, gdovindesigns.com/owed

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

Типографике и композиции посвящён отдельный курс на факультете графического дизайна GeekUniversity. За год обучения вы освоите все инструменты, необходимые графическому дизайнеру, создадите с нуля фирменный стиль и соберёте хорошее портфолио для старта карьеры.

дизайнgraphic-design

Нашли ошибку в тексте? Напишите нам.

40 лучших шрифтов Google — подборка на 2023 год · Typewolf

Последнее обновление

По моему скромному мнению, это 40 лучших бесплатных веб-шрифтов, доступных в Google Fonts. Все они с открытым исходным кодом и на 100% бесплатны для коммерческого использования. Эта коллекция посвящена семействам шрифтов от авторитетных шрифтовых дизайнеров и литейных мастерских, которые содержат несколько начертаний и стилей. Я намеренно избегаю лицевых панелей с одним весом, поскольку их полезность в реальных дизайнерских проектах ограничена.

Хотите знать, как объединить эти шрифты? Ознакомьтесь с The Definitive Guide to Free Fonts , чтобы узнать о некоторых рекомендуемых сочетаниях.

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

ZIP содержат последние версии файлов шрифтов для установки на ваш рабочий стол. Файлы взяты из репозитория Google Fonts на GitHub. Я регулярно проверяю коммиты на GitHub, чтобы убедиться, что представленные здесь файлы содержат последние версии.

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

Лукбуки с парными типами

Исследование шрифтов выполнено за вас.

Подробнее →


Есть ли у вас рекомендации по сопряжению шрифтов Google?

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

Полное руководство по бесплатным шрифтам , которое также включает бесплатную альтернативу Google Fonts, наиболее близкую к любому коммерческому шрифту, представленному на Typewolf.

Могу ли я использовать шрифты из Google Fonts в коммерческих проектах?

Да. Все шрифты, доступные в Google Fonts, выпускаются с открытым исходным кодом либо по лицензии SIL Open Font License версии 1. 1, либо по лицензии Apache версии 2.0. Тем не менее, вы всегда должны перепроверять и читать индивидуальную лицензию, прежде чем использовать какой-либо шрифт в проекте.

Могу ли я использовать шрифты из Google Fonts в теме WordPress, которую я продаю?

Да. Все шрифты, доступные в Google Fonts, выпускаются с открытым исходным кодом либо по лицензии SIL Open Font License версии 1.1, либо по лицензии Apache версии 2.0. Обе лицензии допускают повторное распространение с требованием включения копии исходной лицензии и уведомления об авторских правах. Тем не менее, вы всегда должны перепроверять и читать индивидуальную лицензию, прежде чем распространять какой-либо шрифт.

Могу ли я использовать шрифты из Google Fonts в печати?

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

Могу ли я использовать шрифты из Google Fonts в Photoshop?

Да. Вы можете загрузить файлы ZIP с этой страницы (используя ссылки, расположенные под правым нижним углом образцов изображений), а затем установить файлы шрифтов локально в вашей системе, как и любой другой шрифт.

Рекомендуете ли вы размещать шрифты самостоятельно или предоставлять шрифты непосредственно из Google?

Я рекомендую использовать Google Fonts API (фрагменты кода для встраивания HTML / CSS , предоставленные Google). Это позволяет вам воспользоваться преимуществом межсайтового кэширования, что означает, что у пользователя уже будут локально кэшированы шрифты в его браузере, если он посетил другой веб-сайт, на котором используются те же шрифты (и из-за популярности Google Fonts это часто бывает вероятный). Если вы используете собственный хостинг, каждому пользователю придется загружать шрифты непосредственно с вашего сервера, что обычно происходит намного медленнее.

Какие ваши любимые письменные/рукописные шрифты в Google Fonts?

Некоторые из моих любимых шрифтов — это Tangerine, Dancing Script, Bad Script и Sacramento.

Какие ваши любимые сокращенные шрифты без засечек в Google Fonts?

Archivo Narrow (включенный в список выше) действительно великолепен. Roboto и Open Sans также имеют уменьшенную ширину. Несколько других хороших вариантов: Barlow Condensed, Pathway Gothic One, Fjalla One и Oswald.

Какие шрифты Google Fonts вам больше всего нравятся?

Abril Fatface очень хорош (он не попал в список 40 лучших, так как включает только один стиль). Также обратите внимание на Rozha One и Ultra.

Какие ваши любимые шрифты blackletter в Google Fonts?

Обратите внимание на UnifrakturMaguntia, UnifrakturCook, Pirata One, New Rocker, Germania One и Fruktur, где вы найдете несколько хороших шрифтов в черном письме (иногда их называют 9).

0009 Fraktur или Староанглийский ) стиль.

Есть ли у вас другие любимчики, которых нет в этом списке?

Было трудно сузить этот список до 40 вариантов, поэтому вот некоторые другие претенденты, которые не совсем попали в этот список: Zilla Slab, Overpass, Josefin Sans, Josefin Slab, Old Standard TT, Gentium Basic, Varela Round, Rajdhani, Биттер и Нунито Санс.

Кроме того, вот несколько новых выпусков, которые действительно хороши, и у меня еще не было возможности показать примеры их использования на Typewolf: Roboto Serif, Newsreader, Plus Jakarta Sans, Familjen Grotesk, Azeret Mono, Fraunces, Spartan, DM Serif. Текст, DM Serif Display, Literata и Outfit.

Шрифт и типографика — библиотека

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

  • Встреча с Эриком Шпикерманном

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

    Тематическое исследование

  • Развлекайтесь, создавая стикеры с DynaPuff

    Создавайте собственные текстовые стикеры на телефонах Android и Pixel

    Практический пример

  • Первая партия цветных шрифтов поступила в Google Fonts

    Статья Google Design

    open_in_new material.io

  • Несколько шрифтов для многоязычной Индии

    Удостоенный наград вариативный шрифт Anek

    Практический пример

  • Премия «Эмми» за веб-шрифты: более быстрая онлайн-трансляция

    Статья о дизайне Google

    open_in_new fonts. googleblog.com

  • Вы просили об этом — вот некоторые из наших любимых сочетаний шрифтов

    Посмотрите наши избранные сочетания шрифтов Google и начните использовать их прямо сейчас в Figma

    open_in_new material.io

  • Партнерство, чтобы изменить то, как мир читает

    Расширение Lexend до различных весов

    open_in_new fonts.googleblog.com

  • Рукописные шрифты, которые помогают австралийским учащимся научиться читать и писать, теперь доступны в Google Workspace

    Компании Google for Education Australia и Google Fonts объединились, чтобы сделать шрифты Foundation Fonts для австралийских школ доступными в Google Workspace, включая Google Workspace for Education.

    open_in_new fonts.googleblog.com

  • Предоставление африканским языкам большего количества вариантов латинского шрифта

    Шрифт Questrial обеспечивает поддержку панафриканской латиницы

    Практический пример

  • Коллекция классических южноазиатских текстов Modern Tiro Indic

    Красота и трудности соединения старого и нового

    Тематическое исследование

  • Неуклюжий, бестолковый, игривый, элегантный и рабочая лошадка: познакомьтесь с новой разновидностью шрифта «Старый стиль»

    Fraunces — это вариативный шрифт, предлагающий различные стили для текстовой и графической типографики

    Практический пример

  • Объединяемся для улучшения исследований в области чтения

    Google спонсирует The Readability Consortium

    open_in_new material. io

  • Познакомьтесь с Roboto Serif

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

    open_in_new material.io

  • Чистота и ясность: облегчение чтения с Lexend

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

    Тематическое исследование

  • Flow and Redacted: новые возможности для вайрфреймов и дизайнов ранних стадий

    Придайте смоделированному тексту реалистичный вид и упростите добавление копии позже с помощью шрифтов Flow Дэна Росса и Redacted Кристиана Нэтса.

    open_in_new fonts. googleblog.com

  • Возрождение забытого шрифта: детективы вдохнули жизнь в Brygada

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

    Практический пример

  • Анонс Google Fonts Knowledge

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

    open_in_new material.io

  • Вариативные шрифты никуда не денутся

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

    Руководство

  • YouTube Sans: создание шрифта

    Как YouTube создал индивидуальный шрифт, который одновременно служит посланником бренда

    Практический пример

  • Горячий шрифт, всегда свежий

    Узнайте, как Google Fonts API поддерживает актуальность и эффективность вашего шрифта

    Редакция

  • Модернизация арабского шрифта для цифровой аудитории

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

    От редакции

  • Новая волна индийского Type

    Изучение совместной работы индийских типографов с открытым исходным кодом в качестве модели для глобального дизайна шрифтов

    Передовая статья

  • Выбор веб-шрифтов: руководство для начинающих

    Раскройте тайну выбора шрифта с помощью нашего пошагового руководства

    Руководство

  • Spectral: новый шрифт для первого экрана

    Production Type представляет свою последнюю комиссию для Google Fonts

    Editorial

  • Написание сценариев на кириллице

    Освещение процесса разработки расширенной языковой поддержки в Google Docs and Slides

    Практический пример

  • Superfamilies

    Исследуйте гарнитуры, созданные для гармоничного сочетания, с этой рекомендуемой коллекцией в Google Fonts

    open_in_new fonts.

Comments