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

Каковы различия в категориях шрифтов Google?

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

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

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

4. Шрифты Google Handwriting

Это, вероятно, очевидно для вас. Это шрифты, которые выглядят как чей-то почерк. Некоторые из них выглядят как причудливые сценарии.

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

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

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

Курс копирайтинга The Copy Cure чрезвычайно эффективно использовал рукописный шрифт в качестве мелкого акцентного шрифта в дизайне страницы продаж 2019 года. (Контент красного цвета с «был там» и «ага». ) Это помогло придать странице разговорный тон.

Если вас привлекает эта категория, но важно, чтобы ваш веб-сайт выглядел заслуживающим доверия и профессиональным, рассмотрите возможность использования его как веб-сайта The Copy Cure: просто немного акцента здесь и там, чтобы добавить интереса и индивидуальности.

5. Google Monospace Fonts

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

Это не означает, что они бесполезны в некоторых проектах, но их может быть сложно использовать надлежащим образом.

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

Некоторые из них также немного напоминают шрифты старых компьютеров — середины 80-х годов.

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

The Tangent Cafe — это веб-сайт, который хорошо использует моноширинный формат.

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

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

Ваши дальнейшие действия

Выберите одну категорию на сайте fonts.google.com и изучите ее в течение 10 минут.

Просто установите фильтр на эту категорию и почувствуйте, как шрифты в ней выглядят и ощущаются.

Затем выберите другую категорию и установите фильтр только для этой категории.

Какие отличия вы заметили?

Вас привлекает одна широкая категория, а не другая? Обратите на это внимание!

Готовые к использованию комбинации шрифтов Google

Дизайн

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

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

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

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

Типографика очень важна при создании профессионального веб-сайта. Но это еще не все . Загрузите руководство «7 способов сделать ваш веб-сайт профессиональным» и убедитесь, что ваш веб-сайт делает ваш бизнес привлекательным.

Для пользователей Artisan Themes: вы можете включить эти шрифты на своем сайте, перейдя на вкладку «Параметры темы» >> «Типографика» и выбрав нужный шрифт для каждого элемента вашего сайта (основной части, заголовков и т. д.)

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

1. Мерриуэзер и Рейлуэй

Добавьте этот код в качестве первого элемента в вашего HTML-документа:


 

Добавьте этот код CSS в свою таблицу стилей:

 тело {
   семейство шрифтов: Raleway, без засечек;
}
h2, h3, h4, h5, h5, h6 {
   семейство шрифтов: «Merriweather», с засечками;
}
 

2. Дроид с засечками и робототехника

Добавьте этот код в качестве первого элемента в вашего HTML-документа:

 

Добавьте следующий код CSS в свою таблицу стилей:

 body {
   семейство шрифтов: «Roboto», без засечек;
}
h2, h3, h4, h5, h5, h6 {
   семейство шрифтов: «Droid Serif», с засечками;
}
 

3.

Монтсеррат и Кватроченто Санс

Добавьте этот код в качестве первого элемента в вашего HTML-документа:

 

Добавьте следующий код CSS в свою таблицу стилей:

 body {
   семейство шрифтов: «Quattrocento Sans», без засечек;
}
h2, h3, h4, h5, h5, h6 {
   семейство шрифтов: 'Montserrat', без засечек;
}
 

4. Варела Раунд и Варела

Добавьте этот код в качестве первого элемента в вашего HTML-документа:

 

Добавьте следующий код CSS в свою таблицу стилей:

 body {
   семейство шрифтов: 'Varela', без засечек;
}
h2, h3, h4, h5, h5, h6 {
   семейство шрифтов: «Varela Round», без засечек;
}
 

5. Lobster Two и Open Sans

Добавьте этот код в качестве первого элемента в вашего HTML-документа:

 

Добавьте следующий код CSS в свою таблицу стилей:

 body {
   семейство шрифтов: «Open Sans», без засечек;
}
h2, h3, h4, h5, h5, h6 {
   семейство шрифтов: «Lobster Two», курсив;
}
 

6.

Оставить комментарий

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

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