Google Fonts: семь комбинаций, которые вы можете копировать и использовать

  1. Сколько разных шрифтов я должен использовать?
  2. Читаемость в параграфах против креативности в заголовках
  3. Создайте контраст между вашими шрифтами

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

Обычно, если вы не находитесь в проекте, в котором структура абзаца очень сложная, вы должны разделить текст на заголовок, подзаголовок и текст абзаца. Субтитров может быть несколько (субтитр 1, субтитр 2…). В этом случае рекомендуется использовать один и тот же шрифт для всех из них, отличающихся друг от друга размером текста (в субтитре 1 больше, чем в субтитре 2 и скоро.)

Таким образом, на нескольких примерах сочетаний шрифтов (которые используются нами в наших проектах и ​​проектах) мы покажем вам 3 основных правила, которые необходимо соблюдать для объединения шрифтов в дизайне. Они являются примерами, потому что есть миллионы возможностей, но после прочтения этой статьи вы увидите, что иметь «первую десятку» шрифтов и комбинировать их в соответствии с правилами - лучший вариант !

Сколько разных шрифтов я должен использовать?

Одним из основных базовых правил, когда речь идет о комбинациях шрифтов, является количество шрифтов, используемых в одном проекте. Мы все помним наши школьные работы, где использование компьютера было последним стилем, и поэтому мы хотели запечатлеть все, что знали, что с ним делать. Результатом этого стало то, что в работе, насчитывающей около 1000 слов, мы использовали самое большое количество различных шрифтов и, конечно, бесконечно использовали Comic Sans! Это, помимо того, что вызывает расстройство, в большинстве случаев является причиной недостаточной читаемости .

Наиболее удобно использовать 2 или 3 разных шрифта . Как вы увидите на примерах комбинаций, иногда с помощью одного семейства шрифтов вы можете создать весь текст. Для этого важно помнить о существовании множества семейств шрифтов, таких как «светлый», «средний», «курсив», «жирный», «черный»…. (Oxigen, roboto, lato, advend pro.) Имея всего одну семью, вы можете передать различие между заголовком и абзацем и обеспечить последовательность, необходимую для проекта.

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

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

Читаемость в параграфах против креативности в заголовках

Другой принцип, который должен быть ясен, заключается в том, что, хотя почти все шрифты полезны для «заголовков», не все из них подходят для текста абзаца. Более того, когда это проект, в котором текст абзаца имеет важное значение, можно использовать несколько шрифтов. Как вы видели, хотя в SiloCreativo у нас есть несколько гарнитур для заголовков, когда мы говорим о тексте абзаца, мы играем только с несколькими шрифтами, такими как «roboto», «oxigen», «lato» или «pontano sans». Что касается заголовка, почти все идет, для текста абзаца вы должны знать, что самое важное - это удобочитаемость, учитывая, что это текст, который нужно прочитать, и поэтому очень важно правильно выбрать шрифт.

С    Дисплей Playfair   «Мы можем объединить все правила: этот шрифт идеально подходит для заголовков, но он не рекомендуется для текста абзаца
С " Дисплей Playfair «Мы можем объединить все правила: этот шрифт идеально подходит для заголовков, но он не рекомендуется для текста абзаца. Таким образом, мы можем комбинировать два шрифта этого семейства с другим, используя контрастный шрифт (« Лато ».)

Учитывая, что    Advent Pro   , Не имеет читабельности, необходимой для текста абзаца, мы используем   кислород   ”Для этой цели, комбинируя два типа шрифтов семейства Advent Pro для заголовка и субтитров
Учитывая, что " Advent Pro ", Не имеет читабельности, необходимой для текста абзаца, мы используем" кислород ”Для этой цели, комбинируя два типа шрифтов семейства Advent Pro для заголовка и субтитров.

Создайте контраст между вашими шрифтами

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

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

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

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

«   базар   ”Шрифт идеально подходит для заголовков, так как он имеет силу и контрастирует с текстом абзаца (вы можете видеть, что он работает в нашем дизайне для WordPress, тема гласных
« базар ”Шрифт идеально подходит для заголовков, так как он имеет силу и контрастирует с текстом абзаца (вы можете видеть, что он работает в нашем дизайне для WordPress, тема гласных.) В этом, однако, мы использовали шрифт« Oxigen », потому что мы искали хорошо читаемый шрифт.

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

ПРИМЕЧАНИЕ. В этом случае все шрифты, кроме BAZAR, Google Fonts Таким образом, вы можете скачать их бесплатно и легко использовать для всех ваших проектов. Шрифт BAZAR - это не Google Fonts, но он имеет те же функции: бесплатная и открытая лицензия.

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

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

Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

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

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

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

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта