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

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

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

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

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

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

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

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

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

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

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

Например, некоторые шрифты больше подходят для младшего возраста. Детям, которые только учатся читать, нужны очень разборчивые шрифты с чёткими контурами букв. Хорошая иллюстрация к этому - 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 предлагают платные и бесплатные варианты.

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

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

Вконтакте

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

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

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

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

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

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

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

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

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

Ниже приводится пример написания одного и того же текста декоративным шрифтом с засечками 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. Он предоставляет возможность увидеть и оценить наиболее выигрышные комбинации шрифтов.

Вконтакте

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

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

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

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

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

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

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

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

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

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

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

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

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

О базовых принципах работы с типографикой.

В закладки

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

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

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

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

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

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

Выбирайте шрифт, соответствующий стилю иллюстраций

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

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

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

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

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

Sassoon Primary

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

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

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

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

Идеи для шрифтов

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

Другой полезный источник идей - это 100 Greatest Free Fonts Collection for 2015 от Awwwards. К тому же, Invision не так давно огромный список ресурсов о типографике. Там источников идей предостаточно.

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

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

Идеи для сочетаний

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

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

Выберите свои шрифты

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

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

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

Сочетание двух шрифтов, контрастирующих друг с другом

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

Для веб-шрифтов хорошо подходят Google Fonts , Typekit , и Font Squirrel . Google Fonts бесплатны, а в Typekit и Font Squirrel есть и бесплатные, и платные шрифты.

Определите размеры шрифтов

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

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

Золотое сечение (1:1.618)
1.000 x 1.618 = 1.618
1.618 x 1.618 = 2.618
2.618 x 1.618 = 4.236
4.236 x 1.618 = 6.854
6.854 x 1.618 = 11.089

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

Золотое сечение (1:1.618)
11.089 x 1.618 = 17.942
17.942 x 1.618 = 29.03
29.030 x 1.618 = 46.971
46.971 x 1.618 = 75.999
75.999 x 1.618 = 122.966

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

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

Практическая типографская разметка

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

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

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

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

Сделав написанное удобочитаемым, вы немедленно опередите по крайней мере половину своих конкурентов, что на самом деле здорово, потому что не так уж сложно!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Как выбрать гарнитуру шрифта?

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

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

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

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

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

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

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

Выбор пары

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

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

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

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

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

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

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

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

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

Выделение

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

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

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

У The Design Cubicle – очень уникальный логотип и дизайн. Он мощный, однако классный, привлекающий внимание, но изящный. Когда я смотрю на этот проект, у меня остается чувство высокого класса этого сайта. Он говорит мне: «Я знаю, что делаю».

Будьте небанальны

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

Ребята из Savvy Belfast умны. Они заметили, какими стесненными смотрятся большинство вебсайтов и решили заменить весь бессмысленный основной текст одним предложением.

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

Приводите свой дизайн в соответствие

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

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

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

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

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

Впервые посетив Solid Giant , я улыбнулся. Я улыбнулся в следующий раз, когда его увидел, и даже в следующий. Внезапно я ощутил родство с этим проектом. Эта большая, пушистая "G" слишком очаровательна, чтобы ее можно было забыть!

Если честно, я думаю, что это гениально.

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

Заключение урока о том какой выбрать шрифт для сайта

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

Как вы считаете, что самое важное в типографской разметке сайта? Оставьте свое мнение в комментариях!