Большинству дизайнеров знакомы основные принципы типографики. Они знают разницу между «шрифтом» и «гарнитурой», между «верхней линией строчных» (mean line) и «базовой линией» (baseline). Однако немногие дизайнеры понимают, как следует выбирать шрифт для конкретного лендинга. Ведь речь идет не просто о выборе семейства шрифтов, удобного для глаз читателя — вы выбираете средство для передачи оффера компании, «голоса» бренда.
Конечно, если вы работаете в дизайн-агентстве, вам, возможно, не придется слишком часто разбираться с ответом на этот вопрос, поскольку ваши заказчики будут состоять из компаний, уже имеющих стандартизированные шрифты в своих руководствах по брендингу или стилю.
Однако если вам приходится каждый раз выбирать шрифт самостоятельно или даже создавать его с нуля, клиентов не будут заботить ваши познания о засечках и лигатурах. Их будет интересовать лишь то, какой эффект шрифт окажет на их (или ваш собственный) лендинг, почему был выбран этот конкретный шрифт и как он будет способствовать достижению их (или ваших) бизнес-целей.
Чтобы ответить на все эти вопросы, читайте далее.
Содержание статьи
Разборчивость, читабельность, универсальность
1. Разборчивость
2. Читабельность
3. Универсальность
Понимание общей стратегии
Прежде чем начать сканировать библиотеки шрифтов, сформулируйте для себя основную цель и миссию создаваемого вами лендинга. Выбранный вами шрифт должен дополнять ценностное предложение, а не наоборот.
Часто клиенты имеют довольно смутные предпочтения по дизайну: «Мы хотим лендинг, который привлекал бы внимание, выглядел современно, уникально и оригинально — самый беспроигрышный вариант!».
Поэтому для ориентира при выборе шрифта было бы неплохо кратко записать несколько ключевых слов-характеристик, суммирующих видение клиента. Какой дух у компании? Молодежный? Роскошный? Дерзкий и яркий? Набор характеристик поможет вам понять, какой шрифт соответствует общей эстетике. Например, орнаментированный шрифт с засечками (serif) излучает элегантность и статус, в то время как вариант «без засечек» (sans serif) вызывает ощущение чего-то простого и современного.
Учет среды
Определив характеристики, которые должен воплощать ваш шрифт, следует учесть среду, в которой он будет существовать. Здесь мы имеем дело не с печатью, а с цифровым опытом, и поэтому следует учитывать вероятность того, что ваш посетитель будет использовать мобильное устройство.
Выбирайте шрифт, который будет оставаться разборчивым на небольших экранах, не нагружая глаза пользователя. Тестируйте шрифт на разных мобильных устройствах, чтобы убедиться, что он подходит для всех разрешений.
При выборе шрифта часто забывают подумать о том, как будет выглядеть текст при переводе на другой язык. Если ваш лендинг рассчитан на международный трафик, важно, чтобы ваш шрифт выглядел на русском так же хорошо, как и на английском.
Выбранный вами шрифт должен включать символы, существующие за пределами большинства западных алфавитов. Это вряд ли ограничит ваши возможности выбора, поскольку многие шрифты поддерживают многоязычный текст, но важно это перепроверить. Если этого не сделать, то, скорее всего, браузер решит эту проблему сам, заменив ваш шрифт на похожий по своему выбору.
Разборчивость, читабельность, универсальность
Это три ключевых критерия, которым должен соответствовать ваш шрифт. В совокупности они обеспечивают удобство использования (usability). Отложите на мгновение эстетику, стиль шрифта и изучите его чисто с точки зрения практичности.
1. Разборчивость
Скорее всего, для неспециалиста разборчивость (Legibility) и читабельность (readability), являются взаимозаменяемыми понятиями, но для дизайнеров и типографов они отражают два совершенно разных свойства текста. Userzoom определяет разборчивость как меру того, насколько легко пользователь различает отдельные символы.
Разборчивость строки текста определяется множеством различных факторов — контрастность, кернинг, прописные или строчные буквы — но кроме этого также есть несколько общих рекомендаций. Шрифты с засечками часто считаются более разборчивыми, нежели без засечек; а также, согласно исследованию Университета Карнеги-Меллона, прямые шрифты обычно более разборчивы, по сравнению с курсивными или наклонными.
Опять же, это общее правило, а не заповедь. Важно все тестировать. Например, хотя представленный ниже Il1 тест не совсем актуален для русского языка, тем не менее он позволяет понять, насколько разборчив ваш шрифт:
Для проверки шрифта на разборчивость введите на английской раскладке 3 символа: заглавную I, прописную l и цифру 1
2. Читабельность
Как и разборчивость, читабельность — это мера того, насколько хорошо пользователь может различать текст на экране. Разница же в том, что читабельность характеризует общую усвояемость и понимание контента, в то время как разборчивость — отдельные его элементы.
Если говорить о читабельности, то здесь также есть свои рекомендации. Невыровненный текст читается намного легче, нежели выровненный, а строка длиной 10 см является наиболее оптимальной. Простое юзабилити-тестирование поможет вам определить, насколько читабелен ваш текст.
3. Универсальность
Часто шрифты называют семейством шрифтов; одни семейства больше и разнообразнее, нежели другие. У вашего лендинга будет определенная визуальная иерархия, и ваш шрифт должен соответствовать ей посредством разных стилей и насыщенности.
Вероятно, вы уже знакомы с наиболее универсальными гарнитурами, такими как: Georgia, Arial, Franklin Gothic, Roboto и другие. Эти своего рода «рабочие лошадки» можно с успехом использовать для работы с большим контентом, но они не принесут вашему веб-дизайну наград за креативность.
Если вы уже застряли в ситуации, когда вам приходится использовать менее гибкий шрифт, вы можете поэкспериментировать с сочетанием разных шрифтов. Такой способ может создать интересную и уникальную эстетику, но делать это стоит крайне осторожно, чтобы избежать конфликта или нелепого вида. Здесь нет никаких жестких правил — полагаться стоит исключительно на свое шестое чувство и опыт.
Кстати, вам больше не нужно открывать сервис Google Fonts для получения сторонних шрифтов, ведь теперь шрифты подключаются прямо из редактора лендингов LPgenerator. Мы добавили все шрифты из коллекции Google Fonts в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов.
Заключение
Было бы неплохо иметь универсальную шпаргалку, помогающую с выбором шрифта под конкретный лендинг, но веб-дизайн не так прост. В этой отрасли очень мало аксиом и нет советов типа «всегда используйте шрифт X для сайтов электронной коммерции и Y для посадочных страниц».
Надеемся, что эта статья помогла дать вам основу, отправную точку для размышлений о том, какой шрифт использовать на вашем лендинге. Размышляя о типографике подобным образом, вы будете лучше подготовлены к тому, чтобы отстаивать свой выбор перед заказчиком или боссом.
И тогда, когда клиент спросит «почему вы выбрали именно этот шрифт?», у вас найдется для него ответ.
Высоких вам конверсий!
По материалам: usabilitygeek.com
