50+ лучших шрифтов google: как выбрать шрифты для вашего бизнеса

Bowfinprintworks.com – ещё один сервис с ответами на вопросы

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

Сервис «Fontmassive»

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

1. Для работы с ним необходимо перейти на данный ресурс, в специальном окне написать текст с вопросом.
2. Нажать на кнопку «Вставить изображение» для загрузки изображения с нужным шрифтом на ресурс.
3. А затем нажать на кнопку «Отправить».

Спросите у пользователей о нужном шрифте на fontmassive.com

Расширение «WhatFont»

Расширение для браузера Google Chrome (а также для других браузеров на ядре «Chromium») под названием «WhatFont» позволит вам легко выполнить опознавание шрифта онлайн. После установки и активизации приложения в браузере будет достаточно навести курсор на нужный шрифт для идентификации последнего (опознаются как латинские, так и кириллические шрифты).

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

Расширение «WhatFont» в магазине Chrome

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

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

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

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

@font-face { font-family: 'Имя_шрифта_любое'; src: url('Имя_файла_шрифта.eot'); src: url('Имя_файла_шрифта.eot?#iefix') format('embedded-opentype'), url('Имя_файла_шрифта.woff') format('woff'), url('Имя_файла_шрифта.ttf') format('truetype'), url('Имя_файла_шрифта.svg#DSNoteRegular') format('svg'); font-weight: normal; font-style: normal;}

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

/* Код для подключения шрифта в /css/style.css */ @font-face { font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; }

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

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

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

1. @IMPORT

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic');

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

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

body {        font-family: 'Roboto', sans-serif;        font-size: 16px;      }

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

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

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

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

1. Войдите в Панель управления WordPress

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

1. Поиск “Easy Google Fonts”

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/

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

Шрифт и характер текста

Шрифты имеют собственный язык и помимо текста несут в себе определенную информацию

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

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

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

Шрифтов очень много, поэтому при поиске подходящего, думайте о том, какие ассоциации он вызывает у вас. Если в чем-то не уверены – вспомните о правиле «ЛУЧШЕ — ПРОЩЕ»

Приведем несколько классических примеров использования шрифтов:

1. Шрифты с засечками категории Serif (Times new roman, Garamond Text, Angelica Pro, Theano и другие) считаются классическими для печатных изданий.

2. Более современные шрифты без засечек из группы Sans Serif (Helios Antique, Bronto, Helvetica, Roboto) используются на десктопах и мобильных приложениях.

3. Такие шрифты как Comic Sans, Curls, Papyrus считаются устаревшими и вместо них лучше использовать варианты, которые меньше отвлекают пользователей от смысла текста.

4. Популярность набирают новые шрифты, вытесняющие классические Roboto и Helvetica

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

• Leto Sans
• Geometria
• AngelicaPro
• Gotham
• Circe
• Google Product Sans
• San Francisco

Красивые шрифты для сайта

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

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

Шрифты гугл для сайта

Для начала разберемся где брать шрифты для сайта. Сайтов со шрифтами много. Есть как платные, так и бесплатные. Но я рекомендую начать с бесплатных от Google. Для этого необходимо посетить соответствующую страницу http://google.com/fonts/. Ресурс на английском языке, но интерфейс простой и разобраться не сложно.

Если ваш сайт на русском языке, то нужно отфильтровать шрифты с кириллицей. Делается это в левой части экрана.

Как использовать google шрифты и добавить их на сайт

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

@import url(https://fonts.googleapis.com/css?family=Arimo&subset=latin,cyrillic);

А в свойствах элемента, который вы хотите отобразить этим шрифтом (пусть это будут все заголовки H1, H2, H3, H4, H5, H6), пишете следующее:

h1, h2, h3, h4, h5, h6 {
font-family: 'Arimo', sans-serif;
}

Если не разобрались, то просмотрите оригинальную документацию по использованию шрифтов от Гугла — https://developers.google.com/fonts/docs/getting_started

Если не отображается шрифт на сайте

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

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

Эксперимент, в нём участвовали две группы людей – первая, которая получила печатное меню простым шрифтом, а другая получила печатное меню причудливым шрифтом.
Результаты? Не то, что вы ожидали.
Люди, получившие напечатанное меню в причудливых шрифтах, предполагали, что у шеф-повара больше навыков. В то время как другая группа, которая получила меню, написанное простым шрифтом, думала, что шеф-повар не такой опытный.
Что заставило их поверить в это? Необычные шрифты спровоцировали мысль, что на создание продукта ушло больше работы.
Как говорят исследователи, “если вы продаете дорогостоящий продукт, описание его с помощью трудно читаемого шрифта подтолкнёт зрителя к тому, что на создание этого продукта ушло больше усилий.”
Список не сортируется по определенному порядку или предпочтению. Я буду продолжать добавлять более удивительные шрифты Google в список с течением времени, поэтому не забудьте либо добавить эту страницу в закладки, либо подписаться на нашу группу вконтакте.

Заголовок

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

Яндекс и Google придерживаются позиции, что заголовок должен помочь пользователю сориентироваться по тематике страницы. Поэтому стоит включить в него ключевое слово. Специалист по SEO Сергей Кокшаров (Devaka.ru)
говорит, чем ближе ключевик к началу, тем лучше для ранжирования. От выделения тегом зависит название вкладки со статьей. Многие CMS, например WordPress, автоматически помещают заголовки в тег H1, но лучше перепроверить.

Хороший пример — заголовок статьи Texterra о гифках:

Еще один хороший пример — статья Likeni о биткойнах:

Несколько примеров неудачных заголовков:

Вывод

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

Правила выбора цветовых палитр

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

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

• Выбирайте 1-2 основных цвета (чистые и выразительные). И используйте для остальных элементов дополняющие (комплементарные) цвета (менее яркие и выразительные).

• Если возникает сильное желание добавить еще один цвет — постарайтесь вместо этого использовать оттенки существующих.

• Оставляйте достаточное количество свободного пространства, чтобы глаза могли отдыхать.

Используйте корпоративные цвета

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

Обе инфографики были разработаны дизайнером Нелли Соеджанто. Слева — Redpepper. Справо — Coca-Cola.

Как выбрать дополняющие цвета?

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

Используйте оттенки

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

Выбирайте цвета, исходя из контекста

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

Тематические цвета

При использовании тематических цветов можно попробовать выбрать цветовую палитру из большого количества готовых цветовых схем в интернете. Например, в приложении Adobe Color CC представлено множество пользовательских тематических пресетов.

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

Ищите вдохновение у природы

Выбирая цвета для своего будущего проекта, вы также можете попробовать поискать вдохновения у природы. Например, подобрать цветовые гаммы, основываясь на определенном времени года. Взять цвет деревьев, неба, моря и т. д., характерный для того или иного сезона. Выберите два основных тона, а далее воспользуйтесь возможностями программы Coolors. Также можно поэкспериментировать с тенями и оттенками. Главное не используйте более 4 разных цветов одновременно.

Осень

Цвета природы 1

Зима

Цвета природы 2

Весна

Цвета природы 3

Лето

Цвета природы 4

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

Цвета праздников

Анатомия шрифтов

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

Serif — шрифты с засечками, sans-serif — без засечек.

Поверьте, использование Arial или Georgia – это банально

Необходимо обращать внимание и на другие варианты. Не бойтесь экспериментировать

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

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

Система 5: С засечками для чтения / Без засечек для маркировки

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

Пример из жизни: New York Times особенно хорошо смешивает шрифт NYT Cheltenham с засечками для чтения и шрифт NYT Franklin без засечек для марикровки данных. Несмотря на то, что это два совершенно разных шрифта, они работаю вместе, потому что буквы имеют дополнительную апертуру, большую X-высоту и одинаковую ширину штриха при соответствующих весах.

На следующем графике отображена такая система с использованием шрифта Lora для заголовка и подзаголовка и шрифта Libre Franklin для содержимого маркировки.

Используемые шрифты: Lora — шрифт Google, оптимизированный для экрана, но также хорошо подходящий и для печатных проектов. Текст диаграммы — Libre Franklin, это шрифт на основе Franklin. Он относится к группе шрифтов, вдохновленных оригинальным шрифтом Franklin Gothic, созданным примерно в 1910 году.

Указанные в тексте шрифты и системы являются взаимозаменяемыми. Ниже приведён список упомянутых гарнитур:

1. Lato
2. Assistant
3. Noto Sans
4. Source Sans Pro
5. Libre Franklin

Это шрифты, подходящие для заголовков:

1. PT Sans
2. Merriweather
3. Lora

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

Выбор правильного шрифта для печати

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

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

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

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

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

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

Сочетание шрифтов

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

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

На практике можно остановиться на разных типах. Гротеск и антиква привлекают читателей поэтапностью изложения материала

Также можно обратить внимание на различные начертания одних и тех же элементов

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

Основные принципы выравнивания

Выравнивание графических объектов: по центру или по краю?

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

• объекты с ровными краями можно выравнивать по краю;

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

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

Выравнивание графических объектов

Выравнивание текста: 4 основных способа

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

Выравнивание текста

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

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

• Выравнивание по правому краю. Используется реже всего. Чтобы было проще читать, такой текст использовать его в паре с визуальными элементами, расположенными с правой стороны.

• Выравнивание по центру. Еще один популярный способ. Очень хорошо смотрится с паре с графическими объектами круглой формы (или любой другой непрямоугольной формы). Как правило, это самый распространенный вариант для выравнивание заголовков и подзаголовков.

Типы веб-шрифтов и их поддержка браузерами

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

• TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
• WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
• WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
• SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
• EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Формат шрифта	Chrome	Firefox	Opera	Safari	IExplorer	Edge
TTF/OTF (True Type и Open Type Fonts)	4.0	3.5	10.0	3.1	9.0*	12.0
WOFF (Web Open Font Format)	5.0	3.6	11.1	5.1	9.0	12.0
WOFF2 (Web Open Font Format 2)	36.0	39.0*	26.0	Нет	Нет	Нет
SVG (Scalable Vector Graphic)	4.0	Нет	9.0	3.2	Нет	Нет
EOT (Embedded Open Type)	Нет	Нет	Нет	Нет	6.0	12.0

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

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

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

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

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

Система 1: один шрифт / один размер

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

В следующей таблице используется техника «Один шрифт / один размер» с Lato в 14 пунктов и высотой строки в 18 пунктов:

Используемый шрифт: Lato — хороший шрифт для визуализации данных, потому что хорошо читается при небольших размерах. Шрифт имеет чистую апертуру, умеренную X-высоту и узкий, но неискаженный интервал между буквами. Для чисел он использует табличные значения, они равномерно распределены для удобства чтения. Жирный шрифт легко отличается от обычного, однако полужирный не имеет достаточных отличий от обычного или жирного, так что его следует избегать. Lato был выпущен в Google Fonts в 2015 году и в настоящее время является третьим по популярности шрифтом на их сайте.

Сочетание шрифтов

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

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

Четыре основные классификации

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

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

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

Четыре категории шрифтов

Как создать контраст, используя один шрифт

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

Аналогично можно вместо стиля написания использовать цвет.

Одинаковый шрифт, разный стиль и цвет

Выбираем шрифты из одной категории

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

В этом случае для создания контраста между заголовками, подзаголовками и основным текстов вы можете работать, например, с размеров и гарнитурой в пределах одной категории. Взять для заголовка шрифт Lovers Quarrel больший по размеру, а для основного текста Loved by the King меньший по размеру.

Аналогично вместо размера вы можете использовать различные стили написания или цвет.

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

Выбираем шрифты исходя из контекста

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

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

Наоборот для красивых романтичных свадебных фотографий лучше подойдут шрифты с засечками Satisfy и Marcellus SC.

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

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

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

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

Самые популярные шрифты для веб-страниц

Arial

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.

Helvetica

Helvetica — палочка-выручалочка для дизайнеров. Этот стандартный веб шрифт работает практически всегда (по крайней мере, в качестве подстраховки для других шрифтов).

Times New Roman

Выполняет ту же роль для шрифтов с засечками, что и Arial для тех, что без засечек. Он является одним из самых популярных на Windows-устройствах. Это обновленная версия старого шрифта Times.

Times

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

Courier New

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

Courier

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

Verdana

Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

Georgia

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana. Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.

Palatino

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

Garamond

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

Bookman

Bookman (или Bookman Old Style) — один из лучших стандартных шрифтов для заголовков. Его характерная черта — удобочитаемость даже при использовании маленького размера.

Comic Sans MS — забавная альтернатива для шрифтов с засечками.

Trebuchet MS

Это шрифт средневековой тематики, изначально разработанный корпорацией Microsoft в середине девяностых годов. Он применялся в Windows XP. Сегодня с его помощью составляют основной текст.

Arial Black

Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica

А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию

Impact

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

Подводим итоги по выбору шрифтов для логотипов.

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

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

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

Надеемся, что вам понравилась данная статья и она оказалась интересной.

А если вам нужно разработать собственный логотип, вы можете сделать это в нашем сервисе логотип онлайн!