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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор пары

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

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

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

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

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

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

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

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

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

Выделение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ключевые компоненты типографики

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

• Тип начертания - ошибочно мы называем эту характеристику «шрифтом», но начертание относится к группам символов, букв и цифр, которые объединены общим дизайном. Например, начертание - это Garamond, Times, Arial; мы же привычно по ошибке называем их «шрифтами».
• Шрифт - конкретный тип размера, длины, ширины и жирности букв. На практике это выглядит так: Georgia - это начертание, а 9pt Georgia Bold - шрифт.
• Длина строк - характеристика, которая обозначает расстояние между левым и правым крайним полем и число символов и слов, которые умещаются на этом отрезке.
• Расстояние между строками - пространство между основными линиями, по которым размещены буквы, выражается в количестве точек.
• Кернинг - обозначает незаполненное пространство между отдельными символами или буквами. У большинства шрифтов кернинг задается автоматически так, чтобы выбранное начертание и размер выглядели естественно и приятно для глаз.
• Пробелы и плотность символов - отвечают за плотность и однородность размещения символов в словах и строках по тексту.

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

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

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

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

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

Чтобы достичь совершенства в структурировании текста, надо сначала понять, как организовать информацию, для чего стоит почитать, например, Gestalt’s Principles of Perception («Гештальт-принципы восприятия»).

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

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

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

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

О чем говорят исследования?

В июле 2012 года в The New York Times был проведен эксперимент под названием «Вы оптимист или пессимист?». Читателям предлагался абзац из книги The Beginning of Infinity, за которым шли два вопроса, подразумевавших ответы «да» или «нет». Интересно, что сами ответы не так сильно интересовали исследователей, как реакции людей на выбранное начертание шрифтов и эмоциональный фон, который несет в себе тот или иной шрифт. Может ли шрифт влиять на доверие к тексту? Это и хотели узнать авторы эксперимента.

Все 40 тыс. участников видели один и тот же абзац в шести разных начертаниях: Baskerville, Helvetica, Comic Sans (профессиональные дизайнеры критикуют Comic Sans или, точнее, просто ненавидят его из-за корявого начертания и широкого распространения в работах любителей. - Прим. ред.) , Computer Modern, Georgia, Trebuchet.

В результате выяснилось следующее. Утверждения и вопросы, напечатанные шрифтом Comic Sans, вызвали наибольшее несогласие. Недалеко ушла и Helvetica: утверждения, написанные этим шрифтом, тоже особо не убедили участников опроса. Зато наибольшее согласие и доверие вызвали утверждения, написанные начертанием Baskerville.

Урок для интернет-маркетологов

Вот почему, по мнению психолога, победил шрифт Baskerville: он более формален и надежен на вид.

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

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

Размер имеет значение?

Касательно размера шрифта также был проведен интересный эксперимент в Usability News. В ходе этого исследования сравнили восемь популярных в интернете шрифтов: Courier New, Georgia, Arial, Century Schoolbook, Times New Roman, Comic Sans, Tahoma, Verdana. Разобрали при этом шрифты размером 10, 12, 14 пунктов. В исследовании принимали участие 60 участников.

Вот что выяснилось: Verdana, Arial, Comic Sans лучше всего читаются при размере шрифта 10, 12 и 14 пт.

Быстрее всего люди читали тексты, набранные Times New Roman и Arial.

Также Arial и Courier влияли наилучшим образом на степень восприятия текста, в то время как текст, набранный Comic Sans, доверия не вызывал (показал наихудший результат). Наибольший уровень положительного восприятия вызвали в числе прочих шрифты Tahoma 10 пт, Courier 12 пт и Arial 14 пт.

Дискуссия о Serif и Sans Serif

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

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

Еще одно исследование (PDF), проведенное совместно доктором Кевином Ларсоном (Kevin Larson) из Microsoft и доктором Розалиндой Пикар (Rosalind Picard) из MIT, выявило взаимосвязь между настроением и когнитивной производительностью. Были проведены в два этапа измерения трех различных характеристик: сравнительная продолжительность, шкала Лайкерта и задания на распознавание.

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

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

Эксперименты по измерению эффективности текстов со шкалой Лайкерта выявили лишь со второй попытки преимущество хорошей типографики.

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

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

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

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

• Помните, что выбранная вами типографика должна дополнять текст, а не подавлять заложенный в нем смысл своей формой. Прочитав текст, люди должны запомнить не шрифт, а призыв к действию или информационный посыл, которые в этом тексте заложены.
• Всегда помните о двух принципах: взаимосвязь и контраст разных шрифтов в одном тексте. Сочетание двух разных шрифтов в одном тексте должно быть таким, чтобы при переключении между ними у читателя не появлялось ощущение, что его от текста внезапно отвлекли. Рассматривайте пары вроде Helvetica и Arial. А контрастность должна делать шрифты разными, но при этом сохранять в них хотя бы одну общую черту.
• Не забывайте, что ключ к успеху - в простоте. Не стоит превращать ваш текст в выставку ваших любимых шрифтов.
• Для поиска идеально подходящего шрифта изучите нишу, которую занимает ваш проект и его аудитория. Нужен ли вам формальный, строгий шрифт? Нужен ли вам крупный шрифт? Изучите рынок и его запросы, факторы, которые побуждают ваших покупателей внимательнее читать надписи и тексты.
• Выберите типографику такую, чтобы текст внушал доверие, выглядел удобно и при этом легко читался. Внимательно отнеситесь также к пробелам между буквами и словами - они должны быть в меру широкими.
• Не используйте заглавные буквы в начале каждого слова. 90% всех текстов, которые люди читают в интернете, набраны строчными буквами.
• Длина строки не должна быть слишком короткой, чтобы не приходилось перескакивать постоянно взглядом на начало строки - это утомляет читателя. И она не должна быть слишком длинной. (Оптимальной шириной текста можно считать 600 пикселей. В «Ловим сетью» установлена именно такая ширина. - Прим. ред. )
• Плотность слов и строк должна быть такой, чтобы пользователю не казалось, будто весь текст свален в одну кучу.

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

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

Выступая перед выпускниками и студентами Стэнфордского университета в 2005 году, основатель и в то время генеральный директор компании Apple Стив Джобс рассказывал, что в университете не очень интересовался обычными дисциплинами, зато записался на курсы каллиграфии, где изучал шрифты и особенности комбинирования Serif и Sans Serif. Делал он это исключительно для собственного удовольствия - и даже не предполагал, что десять лет спустя, в работе над шрифтами для революционного компьютера Macintosh ему пригодятся именно эти знания и опыт (кстати, есть легенда, что Стив Джобс уволил своего сотрудника за одну-единственную фразу «Шрифт - это не главное». - Прим. ред. ).

Подводя итоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Открываете сервис.

Сначала определите каким способом вы хотите воспользоваться.

1. Нажав на кнопку Browse, выберите нужную картинку. Мой пример:

2. Укажите url-адрес к этой картинке, в случае, если она находится у вас не на компьютере, а где-то висит на просторах интернета.

Затем кликаем на Continue.

Примечание

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

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

Как видите, программа сама распознала где буквы и разделила их по отдельности. Затем она просит вписать в соответствующие поля каким буквам на клавиатуре соответствуют данные картинки.

Еще ниже имеется три регулятора, влияющие на поисковую выдачу.

1. Display only free fonts or free alternative fonts . Галочка здесь означает, что поисковая выдача будет содержать только бесплатные аналоги.

2. Display only commercial fonts or commercial alternative fonts — здесь наоборот — только платные аналоги.

3. Display all fonts — отобразятся сразу все возможные шрифты.

Выбрав нужную галочку, жмите на Continue.

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

Как видите, подходящий для меня вариант отображен самым первым под названием «SummerCrushes» . Я кстати поставил галочку, чтобы мне предлагали только бесплатные аналоги. Поэтому я могу с легкостью нажать на «Click here to download the font» , чтобы скачать шрифт который я определял по картинке.

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!