Шрифты бизнес – Занимательная инфографика — CMS Magazine

Содержание

Занимательная инфографика — CMS Magazine

Помните, с каким придыханием еще какие-то пять лет назад многие произносили слово «инфографика»? Нужно дать пользователю четкие инструкции на сайте? Как это сделать?! Инфографика! Иллюстрируем годовой отчет или презентацию? Инфографика! Нужен контент с вирусным потенциалом? Ответ тот же: инфографика!

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

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

Как выбрать шрифт для инфографики?

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

Читабельность

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

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

Шрифты

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

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

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

Согласно статистике, в 90% случаев пользователь не задумывается о том, каким шрифтом написан текст. Если он может его легко прочитать, то этого вполне достаточно. Тем не менее, не стоит забывать о том, что также как дресс-код определяет характер мероприятия, шрифт определяет характер контента, помогая читателю понять, с каким материалом ему придется иметь дело: креативным, серьезным, брендовым или бизнес-контентом.

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

Строгие бизнес-шрифты

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

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

Шрифты с засечками и без засечек

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

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

Бизнес-шрифты

Креативные шрифты

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

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

Креативные шрифты

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

Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе? Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис БЕСПЛАТЕН для заказчиков.

Шрифты для брендинга

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

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

Несколько наиболее интересных вариантов можете посмотреть на рисунке ниже в левой колонке. Шрифты из правой колонки смотрятся не так элегантно, но безусловно их также можно использовать.

Шрифты для личного брендига

Минималистические шрифты

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

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

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

Минималистические шрифты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размер шрифта

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

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

Иерархия

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

Интерлиньяж

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

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

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

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

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

Интерлиньяж

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

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

Трекинг

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

Трекинг

Цвет

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

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

Оригинал статьи.


 

Рисуем инфографику: как выбрать цвет?

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

Цветовая палитра непосредственно влияет на восприятие информации

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

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

Немного теории

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

Наиболее распространенным считается колесо, состоящее из 12 цветов. Но также вы можете встретить 6-24-48-96-частные цветовые круги.

Цветовой круг

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

  • Основные или первичные цвета (Primary Colors): красный, желтый, синий. Согласно классической теории цвета основные цвета — это три пигментных цвета, которые невозможно получить путем смешивания других цветов. Все остальные цвета являются производными от них и при смешивании дают черный цвет.

  • Дополнительные или вторичные цвета (Secondary Colours): зеленый, оранжевый, фиолетовый. Эти цвета получаются в результате смешивания двух основных цветов.

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

Также хочется пару слов сказать о таких понятиях, как тон, тень, оттенок и тональность.

Тон — самая чистая или самая яркая форма цвета. Это цвета, не смешанные ни с белым, ни с черным, ни с серым цветами. На цветовом колесе они располагаются по внешнему кругу.

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

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

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

Тон, оттенок, тень, тональность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Осень

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

Зима

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

Весна

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

Лето

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

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

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

Оригинал статьи.

Рисуем инфографику: расстановка элементов на странице

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

Что значит свободное пространство?

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

Почему свободное пространство играет такую важную роль?

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

Свободное пространство    

Основные типы макетов

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

Можно выделить 6 основных типов макетов для инфографики.

Макеты для инфографики    

Эффективная приманка

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

Отличительные особенности:

  • основной акцент делается на передачу информации, а не на дизайн;

  • можно распечатать и регулярно использовать;

  • легко читается.

Макет 1    

Сравнение/противопоставление

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

Отличительные особенности:

  • для восприятия информации важен хороший дизайн;

  • хорошо работает даже с большими объемами информации;

  • требует наличия интересного релевантного контента.

Макет 2    

Большие числа

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

Отличительные особенности:

  • хорошо справляется большими объемами данных;

  • строится на основе графиков и диаграмм;

  • требует хорошего дизайна:

  • может быть расширен до блок-схемы;

  • можно использовать для создания графика проекта;

  • хорошо работает в связке с маркетинговой стратегией.

Макет 3    

Дорожная карта

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

Отличительные особенности:

  • дизайн может быть очень простой;

  • макет пользуется популярностью в социальных сетях;

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

Макет 4    

Таймлиния

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

Отличительные особенности:

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

  • в зависимости от материала может быть и простым, и сложным;

  • требует наличия интересного релевантного контента.

Макет 5    

Визуализированная статья

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

Отличительные особенности:

  • отлично справляется с большими объемами данных;

  • хорошо подходит для передачи сложного материала или длинных историй;

  • легко читается и воспринимается;

  • требует наличия «сильных» заголовков.

Макет 6    

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

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

Оригинал статьи.

Выравнивание инфографики: важно или не стоит заострять внимание?

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

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

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

Инфографика с выравниванием и без    

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

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


 

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

А также помните о рекомендациях: объекты разные по размеру лучше выравнивать по центру, а ровные по краям можно выравнять по краю.

Что касается текста, то здесь существует 4 возможных способа для выравнивания:

  • выравнивание с обеих сторон, больше подходящее для официальных заявлений;

  • выравнивание по левому краю, менее формальное и самое популярное;

  • выравнивание по правому краю;

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

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

Оригинал статьи.

cmsmagazine.ru

как и зачем с ней работать — статьи на Skillbox

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

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

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

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

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

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

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

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

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

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


Брусковый шрифт — подтип антиквы, с элементами гротеска. У брускового шрифта есть засечки, но не округлые изящные, а мощные рубленые, словно высеченные из камня. Такие шрифты впервые возникли в Англии и применялись в начале XIX века. Сначала ими набирали титульные страницы и заголовки, но в XX веке их начали активно использовать для газетного набора.


Гротеск — шрифт без засечек. В названии этих гарнитур часто встречается сочетание sans serif (лат. без засечек). Они появились в конце XVIII века и изначально применялись в рекламе как акцидентные. В XX веке с развитием новой школы типографики их начали использоваться для набора текста.


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


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

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

  • Какой имидж у вашей компании?
  • Какие качества ценят клиенты?
  • Какие качества вашей компании вы хотите подчеркнуть: надежность, креативность, стабильность?
  • Опишите свой бренд в трех словах. Какие бы это были слова?
  • Кто ваш идеальный клиент?

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

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

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

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

Используйте простые и стандартные шрифты. Не слушайте тех, кто говорит, что стандартные шрифты это скучно. С их помощью можно создавать сильные знаки. Пример простой типографики: логотип студии DILETTANT. Денис Башев набрал его с помощью Arial.

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

У многих зарубежных компаний в основе логотипа лежит шрифт Helvetica, например, — старый логотип Microsoft, Lush, Nestle и Toyota.

Не ориентируйтесь на конкурентов. По статистике Tasty Placement, 63% мировых брендов используют гротески, из них треть — Helvetica. Это не значит, что вы должны писать все тексты на сайте и упаковке тем же шрифтом. Контраст не должен быть кардинальным. Достаточно взять шрифт с более яркими выносными элементами или другим типом засечек, выбрать более открытый гротеск, заменить шрифт на антикву или брусковый.

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

Хороший пример того, как можно выделиться среди конкурентов, — это рынок медиа. В соцсетях большинство СМИ оформляет картинки гротесками, но посты The Village заметнее благодаря антикве.

Издание Meduza использует отдельные шрифты для разных рубрик: для новостей — антиква, для историй — гротеск.

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

На картинке пять разных шрифтов — это утомляет. О цветовых решениях даже не говорим.

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

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

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

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

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

Font Pair — сервис позволяет посмотреть, как сочетаются между собой основные шрифты Google Fonts. Вы можете комбинировать шрифты для классического стиля «антиква — антиква» и для современного дизайна «гротеск — гротеск».

Typotheque — идеальный инструмент для работы со шрифтами на латинице. Кириллических начертаний здесь немного — всего 37, зато латинских — 72. Кроме этого, есть еще шрифты для арабского, иврита и греческого.

Just My Type — инструмент позволяет загрузить шрифты из сервисов TypeKit, H&FJ и проверить на совместимость.

Fast Print — шпаргалка для дизайнеров по совместимости шрифтов Google Fonts. Работает как таблица Пифагора: выбираете два шрифта и смотрите, какой цвет стоит на их пересечении. Белый — шрифты хорошо сочетаются; светло-серый — нежелательно сочетать эти шрифты; темно-серый — следует избегать сочетания этих шрифтов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

skillbox.ru

Особо уникальные буквы — нужны ли компаниям собственные шрифты — Дизайн на vc.ru

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

Скачай или купи

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

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

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

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

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

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

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

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

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

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

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

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

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

Потратиться ради экономии

Разработка корпоративного шрифта — недешёвое удовольствие и занимает довольно продолжительное время. Например, «Яндекс» разрабатывал свой шрифт Yandex Sans 2,5 года.

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

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

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

Похожая история была ещё на заре Windows. Microsoft пришли к выводу, что для их операционной системы лучше всего подойдёт популярная тогда Helvetica, но затраты на лицензию они посчитали чересчур накладными. Тогда они заказали у компании Monotype аналог этого шрифта. Так появился Arial.

Узнаем вас по буквам

Сейчас корпоративные шрифты есть у многих компаний. Apple использует собственный шрифт San Francisco. У Microsoft — шрифт Segoe. У Samsung — SamsungOne. А у Google их два: Product Sans и Roboto.

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

Одной из первых была «Студия Лебедева». В 2002 году она представила свою уникальную шрифтовую систему Artemius с 16 вариантами начертаний. Его разработкой занималась студия «Леттерхед».

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

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

Та же «Студия Лебедева» с 2002 года не раз значительно меняла оформление сайта и делала редизайн логотипа. Но Artemius оставался уместным в их айдентике.

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

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

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

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

Анастасия Горбунова

дизайнер Punk you brands

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

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

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

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

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

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

Алексей Козырев

генеральный директор агентства защиты интеллектуальной собственности «Алтпатент»

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

След в истории

Впрочем, бывает, что корпоративный шрифт — это история вовсе не об экономии, защите и уникальности.

У IBM корпоративный шрифт не только разрешён к использованию для других компаний, но и вообще разработан по принципу Open Source. То есть любой может участвовать в его развитии: дополнять, совершенствовать и применять для решения своих задач. Бесплатно. Но зачем это IBM?

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

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

А недавно Александр Невзоров подарил Сергею Шнурову талисман-медиатор, на котором написано известное слово из трёх букв нашим шрифтом.

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

vc.ru

Как выбрать шрифт для инфографики?

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

Читабельность

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

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

Шрифты

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

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

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

Согласно статистике, в 90% случаев пользователь не задумывается о том, каким шрифтом написан текст. Если он может его легко прочитать, то этого вполне достаточно. Тем не менее, не стоит забывать о том, что также как дресс-код определяет характер мероприятия, шрифт определяет характер контента, помогая читателю понять, с каким материалом ему придется иметь дело: креативным, серьезным, брендовым или бизнес-контентом.

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

1. Строгие бизнес-шрифты

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

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

Шрифты с засечками и без засечек.

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

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

Бизнес-шрифты.

 

2. Креативные шрифты

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

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

Креативные шрифты.

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

3. Шрифты для брендинга

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

Шрифты позволяют показать индивидуальность вашего проекта. Так что, если цель –  создать определенную атмосферу и в тоже время не переборщить с оформлением, то неплохим вариантом будет выбор какого-нибудь непопулярного шрифта. Также это позволит вам выделиться среди сотен тысяч других работ, выполненных с помощью Time New Roman или Arial.

Несколько наиболее интересных вариантов можете посмотреть на рисунке ниже в левой колонке. Шрифты из правой колонки смотрятся не так элегантно, но безусловно их также можно использовать.

Шрифты для личного брендига.

4. Минималистические шрифты

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

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

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

Минималистические шрифты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размер шрифта

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

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

Иерархия

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

Интерлиньяж

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

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

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

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

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

Интерлиньяж.

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

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

Трекинг

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

Трекинг.

Цвет

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

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

rusability.ru

Какие шрифты лучше использовать для оформления сложных данных — Дизайн на vc.ru

Перевод материала типографа Джонатана Хофлера о том, как делать презентации, аннотации, отчёты и другие официальные документы понятными и приятными для чтения.

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

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

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

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

Стратегии для маленьких шрифтов

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

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

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

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

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

Работаем со списками

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

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

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

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

Выше представлены два списка ингредиентов в шрифте Gotham: слева допустимый Gotham Condensed, а справа гораздо более привлекательный Gotham Narrow. Совет: для максимальной разборчивости шрифта следует использовать широкий шрифт не только в основном тексте, но и в дополнительном шрифте ScreenSmart.

Работа с комплектом знаков

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

С такими символами, как *, † и ‡ пользователи еще разберутся, а вот с их повторением вроде **, †† и ‡‡ — или §, || и # в зависимости от того, к чему вы привыкли в своей компании, будет уже сложнее. Если в тексте больше трёх сносок, лучше придерживайтесь всем понятного нумерованного списка в верхнем индексе.

Супериндексы включены в каждый шрифт H&Co, у которого есть версия Pro, а также они есть в Gotham, Ringside и Inkwell. Совет: в тексте отмечайте сноски с помощью супериндексов, которые возвышаются над прописными буквами. Но в самих сносках лучше пользоваться числителем, потому что он расположен ниже. Так связь нумерации с текстом сноски лучше видна, и пункты сносок чётче визуально отделены друг от друга.

Цифры, цифры, цифры

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

У табличных цифр есть и вторая важная характеристика: их ширина не изменяется в зависимости от насыщенности шрифта. В обычном шрифте всё устроено не так: там чем больше насыщенность, тем шире символы.

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

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

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

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

Креативный выбор

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

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

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

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

В нашей коллекции Numbers есть шрифты Indicia, Claimcheck, Revenue и Greenback, в которых цифры имеют одну ширину, то же самое с интересными цифрами в любой насыщенности в шрифте Inkwell Blackletter.

Индивидуальные рекламно-информационные материалы бренда

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

Шрифты Office — это адаптация часто используемых шрифтов от H&Co, специально созданная для использования их в таких бизнес-решениях, как Word, Excel и PowerPoint. Это те же самые семейства шрифтов, чьи ScreenSmart версии хорошо использовать для мелкого текста и чьи профессиональные комплекты знаков подходят даже для самых сложных данных.

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

А ещё эти шрифты выгружаются в формат TrueType для максимальной совместимости даже с самыми старыми операционными системами.

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

vc.ru

Как выбрать правильный шрифт для логотипа: полное руководство

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

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

Какие шрифты используют известные компании

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

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

Рукописный шрифт с завитушками как у Coca-Cola и Disney ассоциируется с чем-то свободным и дружелюбным, делая логотип немного магическими.
Банковский гигант HSBC использует классический шрифт с засечками, заглавными буквами, который представляет сильную, надежную личность.

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

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

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

Категории шрифтов

Все основные шрифты можно разделить на несколько видов: Serif (с засечками), Sans serif (без засечек), рукописные, Script, машинописные шрифты, шрифты с завитушками Display.

Шрифты Serif самые традиционные. У этих шрифтов линии (черточки) в конце каждого штриха, они смотрятся профессионально и классически. Например, Times New Roman – один из самых часто используемых шрифтов Serif.

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

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

Шрифты Script очень изысканны и предполагают роскошь. Как и у рукописных шрифтов, у них есть характерные черты.

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

Машинописные шрифты имитируют текст, набранный на печатной машинке.

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

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

Советы как выбрать шрифт для логотипа

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

– Какой имидж у моей компании?
– Какие качества ценят клиенты?
– Чтобы вы хотели бы подчеркнуть – надежность, креативность, стабильность?
– Если бы вы могли выбрать три слова, чтобы описать свой бренд, какими бы они были?
– Кто ваш идеальный клиент?

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

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

Выбирайте шрифт, не основываясь на личных предпочтениях

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

Учтите дух и особенности вашего бизнеса

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

Не копируйте конкурентов

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

Будьте оригинальными

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

Выбирайте простые шрифты

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

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

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

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

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

Избегайте популярных шрифтов

Сейчас в Интернете столько сайтов со шрифтами, что уже нет оправданий, чтобы не исследовать их. Большинство из них позволяют просмотреть каждый шрифт, проверить как он будет смотреться с названием вашей компании, и т.д. Стоит помнить, что понравившийся вам шрифт могли использовать до вас или еще будут. Поэтому старайтесь избегать очень популярных шрифтов для своего дизайна – Roboto, Lobster, Ubuntu и т.д.
И помните, покупать шрифт или другой качественный продукт в Интернете – это нормально:)

Будьте вне времени

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

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

Никаких вычурностей

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

Дайте пространства

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

Сочетание несколько шрифтов

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

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

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

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

Сайт для подбора шрифтов

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

Ниже список сайтов, где вы может найти нужный шрифт для логотипа:

Fonts-online

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

Dafont

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

1001 Free Fonts

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

Google Fonts

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

Webfont

Русскоязычный веб-ресурс, представляющий собой большую библиотеку бесплатных качественных шрифтов для использования в Adobe Photoshop или на сайте.

Typography

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

Больше сайтов со шрифтами можно найти в нашей Периодической таблице создания логотипа.

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

www.logowiks.com

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

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

10 лучших шрифтов с поддержкой кириллицы

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

1. Nord — шрифт без засечек, который доступен сразу в 4 вариантах (Light, Medium, Regular и Bold). Характеризуется скругленными краями и интересными выступающими элементами (обратите внимание на букву «Я») и подойдет для заголовков или выделения отдельных элементов:

2. Шрифт Lora доступен в вариантах Regular, Bold, Italic, и BoldItalic, но у него есть засечки и его лучше использовать для основного текста:

3. Рукописный шрифт Mateur пригодится для оформления иллюстраций:

4. Lato — еще один шрифт без засечек с просто потрясающим количеством поддерживаемых языков: 100 языков с латинским и 50 языков с кириллическим алфавитом, а также греческий! Доступен в вариантах Regular, Bold, Italic, Light, BoldItalic, LightItalic.

5. Шрифт Sangha создавался на основе индийских мотивов и будет хорошо выглядеть на тематических веб-сайтах, посвященных культуре Востока:

6. Arvo — шрифт типа Terminal, который можно использовать для отображения примеров кода на странице:

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

8. Шрифт Proba Pro доступен бесплатно только в вариантах Regular и Italic, но этого достаточно для качественного оформления текста на странице:

9. Intro Condensed — уплотненный вариант известного шрифта Intro, который его создатели рекомендуют использовать для заголовков и плакатов. Варианты начертания Black и Light доступны бесплатно.

10. Шрифт Poiret One выглядит очень элегантно, но в отличие от Frenchpress будет уместен и на веб-страничках:

10 лучших шрифтов с поддержкой латиницы

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

1. Volkorn — один из первых шрифтов с засечками, которые стали доступны на Google Fonts. Он поддерживает 8 начертаний:

2. Kaushan Script — аккуратный и читабельный рукописный шрифт, который подойдет как для веба, так и для печатных материалов:

3. Stroke подойдет для иллюстраций или написания слоганов и заголовков. Начертания Regular, Bold и Light распространяются бесплатно:

4. Шрифт Montserrat без засечек хорошо подойдет для заголовков и посадочных страниц:

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

6. Jura — элегантный шрифт со скошенными засечками и круглыми формами, лучше всего подойдет для подзаголовков или основного текста:

7. Exo 2 — универсальный технологичный шрифт с несколькими начертаниями, поэтому его вполне хватит для оформления большинства текстовых элементов на странице:

8. Pompiere подойдет вам, если вы ищите элегантный, но не слишком серьезный шрифт:

9. Aclonica — еще один яркий шрифт для оформления запоминающихся заголовков и печатной рекламной продукции:

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

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

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

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

Студия stfalcon.com создает дизайн сайтов и приложений для Android и iOS, и мы будем рады помочь вашему бизнесу привлечь пользователей с помощью уникального и узнаваемого дизайна.

Об авторе

Руководитель отдела дизайна

Макс ратует за интересы пользователей, поэтому работать с сайтами и приложениями, к которым он приложил руку — одно удовольствие.

stfalcon.com

Отправить ответ

avatar
  Подписаться  
Уведомление о