10 отличных инструментов, для подбора правильного сочетания шрифтов

Содержание:

Конфликт

То чего нужно всегда избегать.

Проще всего это проиллюстрировать на примере:

Almendra и Stoke

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

Шпоры очень схожи, но имеют разную кривизну, особенно проявляющийся на букве «T»:

Так же у них различный наклон осей направленный при этом в одну сторону:

Готическое письмо придает направление буквам, в то время как Римское письмо вертикально:

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

Правила которые помогут вам выбрать нужный шрифт.

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

Избегайте выбора шрифтов из одной категории, например, рукописные шрифты или брусковые. (Шрифты Clarendon  и Rockwell смотрятся вместе не очень хорошо).

Определите каждому шрифту его задачу и придерживайтесь её.

Попробуйте шрифты из различных категорий, которые имеют одинаковую высоту строчных знаков и ширину глифов. (Например, Futura вместе с Times New Roman смотрятся плохо, потому что у них большая разница между х-высотой и шириной. )

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

Сравните начертание шрифтов: оно должно быть разным. (Например, Didot и Rockwell выглядеть очень плохо вместе по многим причинам, но одна из главных — потому что они оба имеют жирное начертание).

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

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

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

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

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

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

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

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

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

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

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

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

Измените размер кегля. Сочетание шрифтов может не согласоваться, но если вы измените размер одного из шрифтов, всё станет на свои места.

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

Не смешивайте настроение шрифтов. Беззаботный Gill Sans не захочет стоять рядом с деловым Didot, по крайней мере, смотреться вместе они будут плохо. Сочетайте два шрифта с одинаковым или похожим настроением.

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

Нарушайте правила. Найдите свой уникальный способ. Не бойтесь экспериментировать, но делайте это разумно!

Зачем это нужно

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

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

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

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

Текст в современном дизайне

Текст – это самый популярный способ передачи информации, знакомый каждому!

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

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

Пример использования крупной надписи в дизайне сайта violin-rio.dance

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

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

Как правильно подобрать сочетание

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

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

1. Контраст вместо конкуренции

Шрифты должны контрастировать, а не конкурировать на странице

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

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

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

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

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

2.  Найдите большое и классное семейство шрифтов

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

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

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

3.  Не используйте больше трех разных шрифтов

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

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

4. Работайте с кернингом

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

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

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

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

В этом примере слово “mozzarella” написано рукописным шрифтом со стандартным расстоянием между буквами, а подзаголовок “the superior cheese” выведено заглавными буквами, шрифтом без засечек и с увеличенным кернингом.

5.  Не используйте заезженные шрифты

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

Некоторые из заезженных шрифтов: Comic Sans, Impact, Arial, Bradley Hand, and Papyrus.

Что такое гарнитура

Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.

Различные начертания шрифта Montserrat

Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.

Начертание

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

Толщина

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Наклон

Прямое, курсивное

Ширина

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

Избегайте слишком разрозненных комбинаций

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

Слева, у нас Antique Olive Nord — чрезвычайно тяжелый шрифт в паре с Garamond Narrow. Слишком большая контрастность очевидна

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

Справа, Antique Olive Nord был заменен на более сдержанный Antique Olive Bold. Garamond Narrow можно было бы заменить на Garamond Book, но после раздумий был выбран Chaparral. Chaparral имеет большую высоту строчных букв и в целом является более современным и как следствие нейтральным, против достаточно своеобразного Antique Olive.

Почему шрифты важны в графическом дизайне

Шрифт — это способ выразить посыл, который вы закладываете в свой проект. Конечно, если бы мы везде использовали старый добрый Arial, жизнь была бы проще. Но стала бы она интереснее? Скорее всего, нет

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

Вот основные ошибки, которые допускают в использовании шрифтов:

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

Но тут важно чувство меры. Чтобы не ошибиться, остановитесь на двух (максимум трех) шрифтах в одном дизайне

Обычно этого достаточно.

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

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

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

Гармоничные сочетания

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

  • Контраст размера
  • Контраст размера и насыщенности
  • Контраст размера и начертания
  • Контраст размера, насыщенности и начертания
  • Контраст аксессуаров и размера
  • Контраст аксессуаров, размера и насыщенности
  • Контраст аксессуаров, размера и начертания
  • Контраст аксессуаров, размера, насыщенности и начертания

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

Шрифтовая пара для сайта: где подобрать?

И напоследок – где брать шрифты. Сделайте просто скриншот – посмотрите потом по ссылкам (рис.12):

Рис.12 Где брать шрифты

  • google.com/fonts/ — это каталог бесплатных шрифтов от Google
  • typekit.com – похож по модели, по концепции. Мы можем оттуда брать шрифты и использовать их в web-е, например, сразу же.
  • myfonts.com – огромная база шрифтов. Там очень много английских шрифтов, латиницы и, на самом деле, также есть и кириллица.
  • paratype.ru – огромное количество российских шрифтов. Они не самые дешевые, но на сайте Paratype (у них в группе) часто бывают акции. Когда они запускают какой-то очередной новый шрифт, они его продают очень дешево. Поэтому имеет смысл подписаться на их группу в Facebook.

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

На этом все. Если тема типографики и вообще веб дизайна вам интересна — то советую посмотреть мой бесплатный мастер-класс по профессии веб дизайнера.

Где брать шрифты.

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

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

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

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

@import url(http://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

Сколько шрифтов мне использовать?

Количество используемых шрифтов остается полностью на вашей совести, но не забывайте про тот эффект, которого вы желаете добиться, соединяя шрифты. У шрифтов, как и у людей, есть характер. И характеры шрифтов, как иногда и между людьми, могут сталкиваться друг с другом. Думайте о ваших шрифтах, как о гостях за свадебным столом; одного заводилы обычно хватает, в то время как присутствие сразу нескольких сильных характеров может сильно накалить атмосферу, как эпизод из «Big Brother».

Но убедитесь, что в группе все же остается немного харизмы; восемь человек, которым нечего сказать, только и могут, что ждать, пока кто-то заговорит…

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

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

Избегайте шрифтов из одной классификации

Тут как нельзя хорошо подходит статья про классификацию шрифтов.

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

В этом примере на левой стороне у нас есть заголовок из шрифта Clarendon Bold, который является брусковой антиквой. Основной текст выполнен из Officina Serif, который так же является брусковым. Брусковые шрифты известны тем что любят доминировать в любой области где используются. Два шрифта такого рода создают ненужную напряженность.

Теперь обратите внимание на пример справа. Clarendon Bold в паре с гораздо более нейтральным New Baskerville

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

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

Обзор классических и трендовых шрифтов

Bodoni

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

Meta

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

Headline News

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

Futura

Futura — это классический геометрический гротеск и двадцатые годы, когда эстетизировалось промышленное производство. До этого в шрифтах прослеживались следы пера, а здесь пера не осталось: все формы и линии — это либо идеальный круг, либо прямая линия. Даже в сравнении с Gill Sans она выглядит более строгой и геометричной, если сравнить по буквам «a».

Альтернатива Roboto, меняющая представление о том, что такое типовой шрифт.

San Francisco

Первый шрифт от Apple за последние 20 лет, пришедший на смену Helvetica.

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

IBM Plex

IBM Plex — это Helvetica XXI века. Стильный шрифт со своим настроением, комбинирующий плавные рукописные и жесткие «машинные» линии.

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

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

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

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

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

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

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

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

Как в PowerPoint вставить текст WordArt?

  • Что научитесь делать, посмотрев это видео?
  • Вы научитесь работать с текстом WordArt в программе PowerPoint, узнаете, как выделять абзацы с помощью маркеров и получите ссылки для дальнейшей работы в программе.
  • Описание видео:

Как правило, любая работа начинается с заголовка или титульного листа. В программе PowerPoint титульным листом служим первый слайд, где обычно пишут название презентации и ФИО докладчика. На панели слева выделяем первый слайд и переходим на вкладку «Вставка». В группе «Текст» выбираем инструмент «WordArt». В раскрывшемся окне выбираем понравившийся стиль текста. Согласно видео, выберем синий текст с зеркальным отражением. В появившемся поле на панели  редактирования слайдов нужно удалить стандартный текст и написать наш заголовок «Пример презентации». Расположение название можно перемещать в пределах слайда просто перетащив поле с надписью с помощью мышки. В следующем уроке вы научитесь добавлять на титульный лист изображение.

Отредактируем название текста, добавив тень и отражение. Для этого выделяем текст надписи, переходим во вкладку «Формат», кликаем на кнопку «Анимация», наводим мышь на пункт «Тень» и находим в списке «Снизу со смещением». Подобное оформление придает тексту некую иллюзию трехмерности.

Для зеркального отражения текста нужно снова выделить надпись, перейти во вкладку «Формат», кликнуть кнопку «Анимация», найти в списке пункт «Отражение» и выбрать вариант среднего отражения с заданным смещением.

Для изменения цвета надписи, её нужно выделить и во вкладке «Формат» на панели «Стили WordArt» выбрать инструмент «Заливка текста». Тут программа предлагает всевозможные цвета из имеющейся палитры. Также можно изменять цвет окантовки текста с помощью инструмента «Контур текста».

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

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

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

Текст надписи нужно заменить на «Слайд 1» и разместить вверху страницы. Аналогичным образом копируем этот заголовок на другие слайды, при этом не забываем менять порядковый номер.

Для того чтобы написать ФИО докладчика обычным текстом, нужно перейти во вкладку «Вставка» и выбрать инструмент «Надпись». Кликаем мышкой в том месте, где хотим расположить текст. В появившемся поле вбиваем имя и фамилию, для примера автор видео вписал свои данные: Никита Гаврилов.

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

Если маркеры появятся в неположенном месте, их можно удалить.

  1. Узнать о том, как сделать красивые переходы от слайда к слайду вы можете тут.
  2. О том, как анимировать различные элементы презентации, подробно написано в следующем уроке.
  3. О добавлении в презентацию аудио и видео вы можете узнать тут.
  4. О работе с графиками в программе PowerPoint подробнее описано в отдельном уроке.
  5. Как быстро и легко управлять слайдами будет рассмотрено в этом уроке. 

 Loading …

Советы по сочетанию шрифтов

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

1. Пара контрастных шрифтов

При совмещении шрифтов необходимо, чтобы был контраст и дополнение друг друга

Это означает гармонию шрифтов, и при этом ни один из них не перетягивает внимание

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

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

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

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

2. Используйте Font Super Families

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

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

Популярным примером является суперсемейство Lucida, в состав которого входят Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif и Lucida Math, которые представлены обычным, курсивом и жирным шрифтом.

3. Установить иерархию

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

Самый простой способ добиться этого — изменить размер, вес и даже цвет ваших шрифтов. Например, используя 45pt Montserrat для заголовков и 16px Courier New для основного текста.

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

4. Подумайте о «настроении» вашего проекта

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

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

Что такое типографика

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

До XIX века шрифты использовались в основном для книгопечатания. С появлением афиш, вывесок и объявлений шрифты стали неотъемлемой частью бизнеса и рекламы

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

Где взять бесплатные шрифты

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

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

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

Webfonts — русскоязычный ресурс с большой библиотекой бесплатных качественных шрифтов для работы в Adobe Photoshop или текста на сайте.

Dafont — одна из наиболее богатых коллекций бесплатных шрифтов. Вы наверняка найдете подходящий вариант среди20 тыс. наименований, представленных на сайте.

1001 Free Fonts — широкий выбор бесплатных шрифтов и аналогов официальных.

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

Font Space — сайт с рукописными и акцидентными шрифтами.

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

Font Base — приложение, которое позволяет брать шрифты в аренду, систематизировать шрифты по папкам и проектам, разрабатывать свои начертания. Подписка стоит3 доллара в месяц.

Бесплатные шрифты — группа во «ВКонтакте» с бесплатными шрифтами.

Типографика — основа, с которой стоит начинать в дизайне

На курсе «Веб дизайн с 0 до PRO» вы сможете подробнее узнать, как с помощью типографики создавать узнаваемый дизайн и привлекать внимание пользователей, как подбирать шрифтовые пары, верстать текст по сетке и делать его удобным для чтения.. Курс «Веб-дизайн с 0 до PRO»

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

Курс «Веб-дизайн с 0 до PRO»

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

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Добавить комментарий

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

Adblock
detector