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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор пары

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

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

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

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

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

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

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

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

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

Выделение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У вашего бренда еще нет фирменного стиля и шрифта?

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

1. Учитывайте целевую аудиторию

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

Разные аудитории — разный дизайн, в том числе и шрифт

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

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

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

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

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

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

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

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

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

Вот, как это выглядит на практике:

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

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

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

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

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

Выше можно увидеть еще два примера грамотного использования шрифтов. Первый лендинг принадлежит кэшбэк сервису. Там используется четкий, но слегка угловатый шрифт Open Sans. Благодаря этому сайт приобретает современный внешний вид. Второй пример — магазин чая и подарков. На его страницах используется более редкий шрифт Bebas Neue Regular, также без засечек, но за счет «вытянутости» по вертикали он выглядит более оригинально. В обоих этих примерах шрифт прекрасно сочетается с остальными элементами дизайна и прекрасно передает ценности бренда. В этом и заключается сила влияния шрифта.

Заключение

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

Высоких вам конверсий!

По материалам: 99designs.com

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

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

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

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

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

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

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

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

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

Если вы не знаете, какой шрифт выбрать, статья 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

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

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

Вы уже знаете, как выбрать шрифт

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

Что же шрифт делает?

Типография может быть искусством, но то, что делает его уникальным в этом, это ее основная цель – она должна быть читаемой. Основной способ ее применения, это чтение. Чтение не означает, что вы должны понять, что вы читаете, и не подразумевает, что вы должны прочитать его так, как вы читаете эту статью, традиционно. Важно, посмотреть на чтение, как на абстрактность. Есть много, много способов, которыми мы способны «читать» типографию. Играть с изучением природы чтения невероятно ценно. Когда я говорю о “читаемости”, я обычно подразумеваю определенную область спектра чтения: традиционный способом, то что мы читаем предложения и абзацы. Как правило, это то, на чем сосредоточено большинство людей. Как вы хотите, чтобы люди читали вашу типографику? Это тот вопрос, который вероятно, вы должны задать себе. Есть вещь, которая может быть полезна для понимания, это идея доступности, или дружелюбия. Некоторые гарнитуры являются пугающими и яркими, а другие успокаивающие или безобидные. Вы хотите, чтобы проснулись сильные чувства и идеи, или вы предпочитаете, чтобы чтение было легким? Думая о том, насколько шрифт является дружественным, вы можете сузить область поиска.

Какие существуют гарнитуры?

Многие люди разделяют шрифты просто как шрифты с засечками и без них, но есть много видов засечек и также много без засечек (а также рукописные шрифты!), и их различия очень важны. На картинке ниже можно увидеть основные типы гарнитур. Отметим некоторые основные идеи: книги обычно используют transitional или modern serifs, засечки в целом хороши для больших параграфов с малыми размерами. Transitionals и Old Styles, как правило, очень похожи, и не слишком интересны, но очень легко читаются (в традиционном смысле) и эффективны для чисто функционального использования, или создания чувства умеренности. Slab Serifs в основном используются для отображения: заголовков или важных знаков или логотипов, а не как текст. Monospaced (Моноширинный) шрифт используется для редакторов программирования. Humanist тип, как правило, самые дружественные из Sans-serifs и геометрически наименее доступны, но самые интересные и захватывающие.

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

В чем разница между font и typeface?

«Шрифт» это «программное обеспечение», или «пакет» содержащий набор букв. “Typeface” относится к дизайну letterset. Вы покупаете или продаете шрифты, в то время как вам может нравиться, или не нравится какие то typeface.

Сколько мне будет стоить шрифт?

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

Шрифты могут быть куплены либо в упаковках либо как индивидуальный стиль, они обычно включают в себя 5 или больше стилей. Пример стиля – Futura Bold. Другой стиль будет Futura Light или Futura Condensed. Все эти стили, гипотетически, будет частью шрифта Futura.

Есть несколько ключевых вещей, которые вы должны понять о покупке шрифтов:

1. Шрифты очень, очень дороги, и это печально.

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

3. Любой шрифт, дороже $50/стиль это пустая трата вашего времени. Я могу гарантировать вам, с большой уверенностью, что вы можете найти шрифт, который будет удовлетворять вас по цене ниже $50 за стиль. Блин, может даже, по $30 за стиль. Нет такого шрифта, который стоит 50$ за стиль. Если Вы так или иначе остановились на шрифте, о котором Вы думаете, что он прекрасен, и Вы считаете нормальным платеж больше чем 50$ за стиль, то я рекомендовал бы, чтобы Вы удостоверились, что это – самая великолепная, абсолютно уникальная и незаменимая вещь, которую Вы когда-либо видели, в противном случае Вы можете, вероятно, найти очень хорошую альтернативу за значительно меньшие деньги.

4. Есть дизайнеры, которые берут отдельную плату между моделями коммерческого и личного использования, что мне очень нравится. Например, лично я поклонник шведского дизайнера Måns Grebäck, в частности, его каллиграфических шрифтов, таких как Recorda Script и Ventography. У него предусмотрено отдельное коммерческое ценообразование, где его один стиль шрифта стоит, как правило 50$, и для личного использования, где тот же typeface будет стоить около $ 5. Это внимание для тех, кто заинтересован в типографии, но которые не работают в студии, и я ценю это. Я часто не вижу этой модели, но отмечу, что это может быть полезно для вас.

Где я могу найти (дешево) шрифты?

Вот основные магазины, которые я регулярно использую:
MyFonts
FontSpring – приоритет дешевых шрифтов,
FontShop – Работает большой блог, некоторые приложения, и каталог
FontSquirrel – все бесплатно! Но они обновляются не часто

Единственным сайтом c бесплатными шрифтами, который я использую, является FontSquirrel, и я избегаю такие сайты как DaFont.com или FreeFonts.com. Как правило, вы должны избегать любой магазин, который не имеют надлежащей категории, как те, которые я описал выше, так как, скорее всего, шрифты будут очень низкого качества (плохой кернинг и расстояние, странная калибровка), и поиск шрифтов будет запутанным и сложным. В чем разница между шрифтами “futuristic” и “techno? “Cartoon” и “comic”? Я не знаю. Как правило, вы увидите, что категории основаны на популярных заблуждениях, что сделает Ваш процесс поиска запутанным и противоречивым.

Я в первую очередь использую MyFonts.com потому что он имеет самый большой набор шрифтов. Почти каждый typeface что я видел я мог бы найти на этом сайте. Если вы хотите, бесплатные шрифты, вы можете перейти на сайт FontSquirrel, но я бы рекомендовал вместо этого просто пойти в поиск MyFonts, и установить цену 0$. Варианты поиска по сайту фантастические, так что воспользуйтесь ими!

Не существует шпаргалки для шрифтов

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

Сайты типа FontsInUse бесценны – регулярно посещайте их. Обратите внимание на стиль и применения, которые вам нравятся. Отмечайте стили, которые Вы любите. Развейте личный вкус, который позволит Вам принимать лучшие решения, когда надо будет что-то выбрать. Чтение этой колонки могло бы также помочь;).

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