Как подобрать сочетающиеся шрифты – несколько полезных советов. Практическая типографская разметка. Дискуссия о Serif и Sans Serif

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

Что такое насыщенность шрифта

Читабельность шрифта

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

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

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

Пример 1: Текст читается не очень

Пример 2: Текст читается хорошо

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

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

Вконтакте

Одноклассники

Из этой статьи вы узнаете

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

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

Как выбрать шрифт

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

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

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

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

Ниже приводится пример написания одного и того же текста декоративным шрифтом с засечками Tobin Tax и классическим и четким шрифтом с засечками Sabon. Очевидно, что текст справа прочитать гораздо легче.

• Выбирайте шрифты со стандартными буквами.

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

• Выбирайте шрифты с хорошим интервалом.

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

• Выбирайте шрифты с хорошей высотой строчных знаков (x-height).

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

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

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

Советы по читабельности:

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

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

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

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

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

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

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

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

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

Совет по эстетике:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следующие советы позволят сделать ваши эксперименты по выбору шрифта более быстрыми не в ущерб качеству:

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

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

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

Представьте свой вариант на суд независимого эксперта. Со стороны могут быть заметны очевидные промахи.

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

Антиква – это шрифт с засечками, а гротеск – без засечек (засечками называют маленькие черточки на концах букв).

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

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

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

Для пользователей Windows можно посоветовать Georgia, шрифт, который традиционно используется на сайте, – The New York Times и идущий в комплекте с Microsoft Office Garamond, к которому большинство читателей приучены с детства. На Mac OS тоже есть Georgia, не менее хорош Iowan Old Style, один из вариантов, которые предлагаются в программе для чтения iBooks, и PT Serif.

Совет №6. Используйте шрифт без засечек для коротких текстов

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

В Windows это такие шрифты, как Verdana, Tahoma и Segoe UI. Для тех, кто использует Mac OS, этот перечень расширяется за счет Helvetica Neue и Helvetica (ему, кстати, посвящен отдельный фильм). Шрифт-новинка от Apple – San Francisco, присутствующий на всех интерфейсах, упаковке и даже официальном сайте компании, – по неясным причинам не включен в систему и доступен только после скачивания и последующей установки.

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

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

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

Строгое следование этому правилу позволит вам стать хорошим профессионалом в типографском деле. В чем оно заключается?

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

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

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

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

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

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

Большой выбор бесплатных кириллических шрифтов в Google Fonts.

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

Естественно, что возможность выбрать шрифт из самого большого количества вариантов есть у тех, кто приобретает их за деньги. Популярностью среди дизайнеров пользуется интернет-магазин шрифтов MyFonts. Его посетителям доступны около двух тысяч кириллических шрифтов. Другой вариант купить нужный шрифт – зайти на сайты словолитен – предприятий, разрабатывающих и продающих шрифты. Самые известные – Parachute, Colophon, Radim Pesko, Commerical Type, Grilli Type, а также российские «Паратайп», Студия Лебедева, Letterhead, Type Today и Brownfox.

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

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

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

Шуточный проект по использованию Comic Sans для логотипов крупных компаний.

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

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

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

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

Известны дизайнеры, которые за всю свою карьеру применяли не более двадцати шрифтов. В качестве основы для создания собственной палитры можно взять FontShop’s 100 Best Typefaces. Если разнообразить этот перечень шрифтов, давно вошедших в классику типографского дела, несколькими новыми, а также выбрать два-три шрифта из самых последних разработок, можно будет решить практически любую задачу.

На примере ниже вы видите, как комбинация из Bembo и шрифтов от Haptic Pro создает органичное сочетание классики и современности.

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

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

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

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

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

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

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

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

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

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

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

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

Какой имидж у моей компании?

За какие качества ее ценят клиенты?

Какие черты вы хотели бы подчеркнуть – доступность, креативность, стабильность?

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

Каким вы видите своего идеального клиента?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вконтакте

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

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

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

Определите свою цель

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

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

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

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

Очертите свою аудиторию

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

Например, некоторые шрифты больше подходят для младшего возраста. Детям, которые только учатся читать, нужны очень разборчивые шрифты с чёткими контурами букв. Хорошая иллюстрация к этому - Sassoon Primary . Sassoon Primary - проект Rosemary Sassoon , в основе которого лежат её исследования на тему того, какие шрифты детям проще всего считывать.

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

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

Ищите вдохновение

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

Вдохновение: шрифты

За свежими идеями насчет шрифтов можете обратиться к The 100 Best Free Fonts от CreativeBloq - это отличный источник, который придаст вам нужный настрой. В своей статье CreativeBloq объясняет логику, которой они следовали при выборе каждого из шрифтов.

Кроме того, Invision составил целый с ресурсами по типографике. Там вы найдёте массу источников для вдохновения.

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

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

Вдохновение: сочетания

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

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

FontPair - еще один ресурс о том, как лучше выбирать сочетания, предназначенный конкретно для работы с Google Fonts . На ресурсе предусмотрена возможность сортировки по сочетаниям стилей (например, sans-serif и serif или serif и serif).

И наконец, в Сети полно наборов готовых сочетаний от профессиональных дизайнеров. Скажем, Typography: Google Fonts Combinations или Typography: Google Fonts Combinations Volume 2 . Просто вбейте запрос «font pairing» на Behance , Dribble и других подобных сайтах.

Выберите шрифт

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

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

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

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

Для веб-шрифтов можно использовать Google Fonts , Typekit , и Font Squirrel . На Google Fonts всё бесплатно, Typekit и Font Squirrel предлагают платные и бесплатные варианты.

Задайте размер

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

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

Шрифты имеют огромное значение в дизайне. В статье мы расскажем:

Как сочетать несколько шрифтов на одной странице;

Как создать контраст при помощи шрифтов.

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

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

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

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

• http://www.google.com/fonts/ - каталог свободных шрифтов от Google;
• http://www.fontsquirrel.com/ - агрегатор и конвертер шрифтов;
• http://www.myfonts.com/ - большой каталог шрифтов;
• http://www.fonts.com/ - еще один большой каталог шрифтов;
• http://webfont.ru/ - коллекция бесплатных шрифтов.

2. Как выбрать шрифты?

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

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

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

Как часто вы задаётесь вопросом «какой шрифт лучше использовать для сайта ?», многие на это не обращают внимания, а зря!

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

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

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

Часто используемые шрифты

Стандартные шрифты для сайта это:

• Times New Roman;
• Arial; Georgia;
• Impact;
• Trebuchet MS;
• Verdana и другие.

Они входят в группу безопасных. Рассмотрим их подробней:

Arial . Преимущество этого компактного шрифта в высоте букв.

Tahoma . Благодаря средне-широким буквам, идеально-подходящий для технических статей.

Trebuchet MS . Самый неподходящий для чтения. Даже при нормальном размере 12-14 px надо вглядываться в текст, что ведет к напряжению глаз.

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

MS Sans Serif . Считается системным шрифтом Windows. На нем написаны все памятки и оповещения операционной системы.

Georgia . Очень похож на Times. Но в нём более широкие и резкие засечки и концы.

Comic Sans MS . Самый ненавидимый обществом. Отличается плавными округлыми очертаниями, небольшой кривоватостью букв, маленьким меж буквенным расстоянием.

Courier New . Похож на тот, которым раньше отпечатывали на пишущей машинке. Courier New выделяется четкими, хорошо читаемыми буквами, отличающимися небольшим сжатием . -Минус: ненасыщенный цвет.

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

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

Итак, так какой шрифт лучше всего использовать на сайте? По последним опросам среди пользователей интернета, оптимальным вариантом является сделать заголовок с помощью Verdana, а основной текст - Times New Roman. Но не исключен вариант, при котором можно весь текст сделать именно Verdana.

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

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

Нововведение от Яндекс. Размер имеет значение!

Вслед за мобильным алгоритмом «Владивосток », Яндекс сделал фактором ранжирования размер шрифта . Теперь размер текста на мобильном сайте имеет значение и его стандарт 12 см. PX (или больше). Проверить шрифт на «мобилопригодность» можно в Яндекс.Вебмастере.

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

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

Интересно! Разные виды шрифтов обладают неодинаковым размером. Если вы хотите сделать его больше, не обязательно изменять его пиксельный размер. Можно поэкспериментировать с выбором других шрифтов. Например, если поставить размеры Times New Roman и Tahoma - 12 px - выглядеть они будут по-разному. Последний, визуально будет смотреться больше.