Шрифты для лендинга: Как выбрать правильный шрифт для лендинга-одностраничника

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

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

Содержание:

Как мы читаем?

Почему правильный шрифт и хорошая верстка делают чтение комфортным?

Ассоциативное восприятие шрифтов

Дизайн контента равнозначен качеству

Начните с выбора основного шрифта

Размер шрифта должен быть не меньше, чем 12 пунктов (pt)

Следите за длиной строки

Не забывайте про межбуквенное расстояние

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

Посмотрите на разницу между двумя примерами:

Пример 1. Medium.com

Пример 2. Cracked.com

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

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

Назад к содержанию

Как мы читаем?

Когда мы читаем, наши глаза следуют естественному паттерну сканирования информации. Мы разбиваем предложение на саккады (части, по которым мы скачкообразно передвигаем взгляд) и паузы.

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

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

Назад к содержанию

Почему правильный шрифт и хорошая верстка делают чтение комфортным?

Вряд ли многие из нас задумывались, что есть научное объяснение тому, почему разные шрифты заставляют людей испытывать разные эмоции. Однако есть человек, посвятивший этому всю свою жизнь — психолог Кевин Ларсон (Kevin Larson) уже много лет изучает тему и не так давно провел очень значимое исследование на тему того, как шрифты и верстка влияют на эмоции.

Для этого исследования Ларсон привлек группу волонтеров из 20 человек (10 мужчин и 10 женщин) и разделил их на две группы. Каждой группе были показаны две разные версии онлайн-журнала The New Yorker — одну, где расположение изображений, шрифт и верстка были в порядке, и вторую, с очень плохой версткой и неудобным для чтения шрифтом.

Эксперимент дал следующие результаты:

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

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

Назад к содержанию

Ассоциативное восприятие шрифтов

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

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

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

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

Оригинальный сайт Банка Америки выглядит так:

А вот так он бы выглядел со шрифтом Impact:

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

Назад к содержанию

Дизайн контента равнозначен качеству

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

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

1. Начните с выбора основного шрифта

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

Существует четыре основные категории шрифтов:

Шрифты с засечками — буквы с перпендикулярными штрихами на концах. Рассматриваются как официальные и традиционные. Больше подходят для печати.

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

Рукописные шрифты — чаще всего используются для официальных приглашений. Не подходят для основного текста.

Декоративные шрифты — неформальные, образованы от основных шрифтов. Больше всего подходят для заголовков и совсем не годятся для основного текста.

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

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

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

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

2. Размер шрифта должен быть не меньше, чем 12 пунктов (pt)

В 1929 году проводилось специальное исследование, целью которого было выяснить, какой размер шрифта больше всего подходит для чтения. Рассматривались размеры 6, 8, 10, 12 и 14 пунктов. Тогда ученые сделали вывод, что самым удобным для чтения является размер 10 пунктов, однако с тех пор многое поменялось и в настоящее время найдется очень мало людей, которые назовут такой формат наиболее комфортным.

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

3. Следите за длиной строки

Длина строки — то, сколько символов вмещается в одну строку текста на странице. Идеальной считается та, где количество символов варьируется между 50 и 75.

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

4. Не забывайте про межбуквенное расстояние

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

На примере показана разница между двумя шрифтами — Helvetica и Avenir. У шрифта Avenir межбуквенное расстояние больше.

Вашему вниманию 5 комбинаций шрифтов, доступных для скачивания в Google Fonts, с хорошим межбуквенным расстоянием и отлично подходящих для больших текстов:

• 
  Roboto Slab и Roboto
• 
  Raleway и Merriweather
• 
  Lustria и Lato
• 
  Ubuntu и Lora
• 
  Quattrocento и Quattrocento Sans

Назад к содержанию

Вместо заключения

Аарон Уолтер (Aaron Walter), автор знаменитой книги «Эмоциональный веб-дизайн» (Designing for Emotion) писал: «Люди простят вам все несовершенства, последуют вашему примеру и будут восхвалять вас, если вы подарите им позитивные эмоции».

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

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

По материалам: blog.pickrew.com 

27-01-2015

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

Большинству дизайнеров знакомы основные принципы типографики. Они знают разницу между «шрифтом» и «гарнитурой», между «верхней линией строчных» (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 в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов. 

Читайте также: 15 потрясающих комбинаций шрифтов для вашего вдохновения

Заключение

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

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

И тогда, когда клиент спросит «почему вы выбрали именно этот шрифт?», у вас найдется для него ответ.

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

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

27-02-2019

Подбор шрифта для landing page

Landing page

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

Разновидности шрифтов

Есть четыре основные разновидности шрифтов:

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

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

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

Подбор шрифтов для Landingpage

Подобрав стиль одного, или двух шрифтов, нельзя забывать об их размере. Для основного текста размер шрифта не должен быть меньше 12 пунктов, в идеале 14-16. Заголовки же рекомендуется делать размером 18-32 пункта. Нужно не забывать про межбуквенное расстояние, шрифты с большим межбуквенным расстоянием, читаются и воспринимаются легче.

Так же нужно подумать о длине строки текста, идеальная длина 50-75 символов.

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

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

Шрифты для лендинг пейдж | ЗЕКСЛЕР

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

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

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

Рубленные рубим, засечные засекаем, а брусковые используем в заголовках

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

• Гладкие малоконтрастные без засечек – это рубленые гарнитуры (наборы).  Здесь даже иллюстрация не понадобится, весь текст этой статьи написан таким шрифтом. Многие популярные веб-ресурсы – поисковая выдача Яндекса и Google, ВК и ОК – используют этот способ начертания, а уж они-то отлично знают толк в подаче контента. Он хорошо читается, но при соблюдении определенных правил. Уменьшение кегля (размера) может привести к смазанности зрительного восприятия. Например, литеры «с» и «е» при малых размерах способны ввести читателя в заблуждение.
• Обыкновенные шрифты – длинные засечки и контрастные штрихи. Даже по внешнему виду читатель может сделать сравнение с предшествующим начертанием и увидеть отличия. Эту разновидность часто используют на бумажных носителях, но современный оформительский тренд не поощряет внедрения таких гарнитур на страницы сайтов.
• Брусковые гарнитуры – засечки оформлены в виде прямоугольного среза с небольшим скруглением. Чаще всего используются для оформления заголовков или подзаголовков – съешь еще этих мягких французских булок…

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

​

Обратите внимание…

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

• Не увлекайтесь нештатными шрифтами. Они, возможно, отлично смотрятся, но задерживают загрузку страницы и не всегда корректно отображаются. Продающему лендингу это не пойдет на пользу.
• Не применяйте в тексте больше двух видов шрифта – это безвкусица и элемент отвлечения внимания. Исключение составляют цитаты и ссылки – они выделяются по смыслу, без вреда для удобочитаемости.
• В продолжение предыдущего пункта. Учитывайте опыт пользователей и сложившиеся у них ассоциации. Цитаты лучше смотрятся в курсивном оформлении, а ссылки на сайтах традиционно отличаются нижним подчеркиванием текста. Не старайтесь это изменить.
• Белый верх, черный низ – это классика, но только в одежде. На интернет-страницах все наоборот. Здесь подложка светлая, а шрифт темный. Если все-таки дизайнерское решение диктует обратное – применяйте контрастные гарнитуры с засечками. Они лучше читаются на темных бэкграундах. Хотя стандартным лендингам такие креативные выкрутасы все-таки ни к чему.
• Переход трафика на мобильные платформы тоже внес свои коррективы в работу со шрифтами. Например, Яндекс не дает точных характеристик, но обращает внимание на читаемость и ее параметры. Стандартная рекомендация – 12 пунктов. Хотя это не догма и значение способно меняться в зависимости от индивидуальных особенностей избранного шрифта. Главное, чтобы пользователи были довольны.
• Не старайтесь выделить основную мысль СТРОЧНЫМИ БУКВАМИ. Во-первых – это дурной тон. Во-вторых, раздражает и отвлекает. В-третьих, в пространстве интернета воспринимается, как истошный крик. Уважайте читателей! В хорошем продающем тексте они и без ТАКИХ ПОДСКАЗОК отыщут полезную информацию.
• Поинтересуйтесь правилами оформления текстов – типографикой, художественным обликом и разновидностями начертания. Все это поможет разнообразить визуальное полотно, оставаясь в пределах профессионально-выверенного шрифтового пространства.

И в заключение всего один вывод.

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

Landing page шрифты или идеальный шрифт для лендига

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

1. Посетитель игнорирует сложные, мелкие, плохо читаемые шрифты.

А если говорить совсем честно, «иероглифы» на лендингах просто бесят. Будьте готовы к тому, что клиент изначально не хочет читать ваш текст (всевозможное заголовки, буллеты, списки и т.д. всегда как бы уговаривают клиента и облегчают вам задачу). Представьте себе потенциального клиента: читать неохота, времени нет, нужно срочно решить проблему, а вы предлагаете поиграть в Шампольона и расшифровать странные закорючки. Результат, скорее всего, будет плачевным. Клиент просто уйдет, забыв про положенные 3 секунды на сайте.

2. Посетитель — как женщина на диете.

Потому что он пристально следит за жирностью и размером (шрифта). Эти два фактора могут загубить любой текст, даже если вы решили заказать продающий копирайтинг у ведущего автора. Не стоит использовать на одной landing page одновременно и обычное, и тонкое, а также жирное и полужирное написание одного шрифта. Лучший вариант — 2 варианта жирности, отличающиеся визуально.

Проверьте размер шрифта: оптимальный для восприятия основной текст — это 14-16 пикселей. Учитывая повальную близорукость пользователей, шрифт меньшего размера становится блокатором восприятия. А заголовки будут смотреться логично, если они от 18 и до 32 пикселей. При этом важно учитывать длину заголовка. Основное правило: чем длиннее заголовок, тем меньше его шрифт.

3. Посетитель не читает серый шрифт на сером фоне. Никогда.

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

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

Получайте бесплатные уроки и фишки по интернет-маркетингу

Главные ошибки дизайна лендинга

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

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

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

Максимум, который может выдержать станица – 3 шрифта. В идеале – 2: один шрифт для заголовков, один для основного текста.

Какие шрифты лучше использовать?

Хорошо работают связки, в которых один шрифт с засечками (serif), один без (sans). Например, Playfair Display и Pt Sans. Если оба шрифта без засечек, то будет более современный технологичный вид, например TTnorms и Open Sans. Bebas Neue часто используется для кулинарных сайтов. Шрифты с мягкими очертаниями более дружелюбны, например, Comforta.

Как изменить шрифты сразу на всей странице?

Смотрите видеоурок

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

Чтобы выбрать удачные сочетания цветов, используйте сайт colorscheme.ru

В Платформе цвета можно задать сразу для всей страницы – смотрите инструкцию

Неконтрастный цвет текста, слишком яркий фон – и ваше сообщение не читается. Изменяем цвет фона – затемняем/высветляем изображение или делаем его однотонным. Выбираем более контрастный цвет текста.

Плохо: черный текст на ярком фоне
Лучше: белый на ярком фоне

Прописными буквами может быть набран только заголовок, в крайнем случае – подзаголовок. Весь текст СapsLock’ом – это истерика. Не создавайте панику, пишите спокойно. Важное сообщение выделите цветом или размером текста.

Писать прописными все первые буквы слов – тоже плохая идея. Взгляд тормозит на каждом слове, не дает воспринимать текст цельно. Поступаем так же как с тотальным СapsLock’ом: хотите выделить важное – сначала, определите, что именно важно, затем выделите это цветом или размером.

Жирный, курсив, подчеркивание, зачеркивание – переизбыток форматирования сбивает восприятие. Не увлекайтесь. Используйте курсив для отзывов и комментариев, выделяйте жирным что-то одно.

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

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

Плохо: серый текст на ярком фоне
Лучше: тот же текст на белом фоне

Две яркие картинки подряд сбивают смысловые акценты. Разделяйте их секциями с нейтральным фоном или добавляйте разделитель.

Плохо: секция с фоном-картинкой, следом ещё одна картинка
Лучше: секция с фоном-картинкой, следом секция с нейтральным фоном

Хороший размер для картинки-фона – с шириной 1920px. Допустимо использовать картинку с шириной 1024px, но при условии, что фон будет сильно затемняться. Изображение меньшего размера будет растягиваться и смазываться.

Как‌ ‌заказать‌ ‌текст‌ ‌для‌ ‌лендинга‌ ‌с‌ ‌высокой‌ ‌конверсией

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

Персонализация

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

Директор по маркетингу в Cheetah Digital Ричард Джоунс: «Следующее поколение персонализации — это предложение ценности в обмен на действие клиента здесь и сейчас».

Больше полезного контента

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

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

Эксперименты

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

Интерактивные лендинги

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

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

Крупный шрифт

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

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

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

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

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

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

Во-первых, вам нужно использовать широко распространенный шрифт.

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

Обычно используемые веб-шрифты включают:

• Verdana, Женева, без засечек
• Джорджия, Times New Roman, Times, serif
• Courier New, Courier, моноширинный
• Arial, Helvetica, без засечек
• Тахома, Женева, без засечек
• Trebuchet MS, Arial, Helvetica, без засечек
• Arial Black, Gadget, без засечек
• Times New Roman, Times, с засечками
• Palatino Linotype, Book Antiqua, Palatino, с засечками
• Lucida Sans Unicode, Lucida Grande, без засечек
• MS Serif, New York, serif
• Lucida Console, Монако, моноширинный
• Comic Sans MS, cursive (используйте на свой страх и риск)

Awwwards.com рекомендует несколько веб-шрифтов Google, которые бесплатны, но могут иметь не самое высокое качество. (Однако учтите, что Microsoft Outlook не поддерживает веб-шрифты Google.) Они рекомендуют:

• Open Sans
• Josefin Slab
• Арво
• Лато
• Фоллкорн
• Абрил Fatface
• Ubuntu
• PT Sans + PT Serif
• Старый стандарт TT
• Droid Sans

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

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

Шрифты и типографика целевой страницы: Secret CRO Ingredient

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

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

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

Не верите? Вот некоторые доказательства:

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

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

Такие небольшие различия, но сумасшедшие воздействия — источник изображения

Результат?

Показатель выхода снизился на 19%, показатель отказов снизился на 10%, а показатель конверсии увеличился на 133%.

Помните, когда Стив Джобс бросил школу и узнал о типографике?

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

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

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

Ничто из этого не имело даже надежды на практическое применение в моей жизни.

Но десять лет спустя, когда мы проектировали первый компьютер Macintosh,
все это вернулось ко мне.

И все это мы разработали для Mac.
Это был первый компьютер с красивой типографикой ».

Шрифты, которые вы используете, имеют коэффициент конверсии детали, которые имеют значение .

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

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

Шрифты против типографики против гарнитуры

Чаще всего мы, миряне, используем слова «шрифты», «типографика» и «гарнитура» как синонимы.

Что я узнал?

MAJOR нет, нет!

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

Вы думаете о шрифте как о том, что вы выбираете, когда собираетесь использовать Microsoft Word.

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

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

Эта огромная коллекция разных символов — это то, что составляет «один шрифт».

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

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

Шрифт = набор символов.
Гарнитура / типографика = стиль и их внешний вид.

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

[Tweet «Выбранные вами шрифты целевой страницы должны отражать тон, настроение и цель вашей компании.”]

Почему так важны шрифты целевой страницы?

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

Каков средний возраст этих посетителей? Они молоды или старше?

Ответ на этот вопрос может помочь определить, какой тип шрифта вам следует протестировать в первую очередь.

Следует ли использовать шрифт без засечек или шрифт с засечками? Какая разница?

Это должно устранить любую путаницу — источник изображения

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

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

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

Сумасшедшая вещь? Данные исследования доказали, что люди без засечек на самом деле имеют более высокие показатели понимания и скорости чтения.

Так что же важнее? Восприятие посетителей вашей целевой страницы или фактический коэффициент конверсии?

Я буду брать фактические коэффициенты конверсии в течение всего дня .

Но целевые страницы — не единственное место, где выбор шрифта имеет огромное значение.

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

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

Какой лосось вы бы предпочли заказать? — источник изображения

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

Люди, которые садятся в ресторан, не собираются уходить. Они потратят время на то, чтобы прочитать и понять меню.

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

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

В нем он делится тестом коэффициента конверсии, который был создан на веб-сайте New York Times.

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

Вот и тестируемые шрифты:

Я так сильно хочу, чтобы Comic Sans выигрывал — источник изображения

Баскервиль имел 1.5% -ное увеличение числа людей, согласившихся с этим утверждением, на по сравнению с другими шрифтами.

1,5% может показаться не таким уж большим, но если вы получаете объем трафика, как New York Times, то это достойно серьезного празднования.

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

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

Как шрифты целевой страницы влияют на конверсии?

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

Цель шрифта вашей целевой страницы — , чтобы его можно было просто прочитать .

«Но разве это не то же самое, что и заголовок целевой страницы?»

Да. Но есть еще кое-что.

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

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

Итак, какие шрифты показали самую высокую разборчивость ?

Вы можете последовать совету Клэр Фэллон о ее совершенно субъективной любви к определенным шрифтам.

Или вы можете быть научным сотрудником и воспользоваться исследованием Software Usability and Research Laboratory 2002 года, которое пришло к выводу, что шрифты Arial, Courier и Verdana являются наиболее разборчивыми.

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

7 подробных советов по шрифтам целевой страницы

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

Цвет шрифта
Так же, как цвета кнопок имеют значение для коэффициента конверсии, также важны цвета, которые вы выбираете для своих шрифтов.

Вы, наверное, слышали о 40 оттенках синего, которые команда Gmail тестировала, чтобы измерить более высокий рейтинг кликов на своих кнопках, но знаете ли вы, что Bing провел аналогичный тест цвета синего шрифта на своей странице результатов поиска?

В результате получился поразительный дополнительный годовой доход в размере 80 миллионов долларов .

Шрифты — люди не шутки — источник изображения

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

Когда-то они использовали шрифт Verdana, но в конечном итоге снова переключились на Arial, потому что он тоже работал лучше.

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

Штат Уичито провел исследование, чтобы выяснить, какие размеры шрифта 10, 12 или 14 были самыми легкими и быстрыми для чтения.

Результат? Размер шрифта 12 выигран .

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

Больше не всегда лучше.

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

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

Другое исследование было проведено двумя сотрудниками Microsoft и MIT, которые хотели узнать, может ли типографика влиять на настроение и когнитивные способности (способность обрабатывать и понимать информацию).

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

Результаты? Группа с хорошей типографикой выполнила 52% задачи , в то время как группа с плохой типографикой смогла выполнить только 48% задачи.

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

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

Ширина и относительная «толщина» ваших шрифтов (особенно в заголовке и подзаголовке целевой страницы) также должны быть проверены.

Толщина шрифта становится толще при движении вправо — источник изображения

Межстрочный интервал
Помните то время в колледже, когда ваша статья должна была состоять из 24 страниц, но вы не могли выжать больше 20?

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

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

Некоторые люди даже не начнут читать, если это слишком — источник изображения

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

Ваши реальные навыки копирайтинга решат, продолжит ли посетитель читать.

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

Если пойти слишком широко, людям будет сложно сосредоточиться на тексте.

Если зайти слишком узко, можно нарушить ритм читателей.

Более безопасная ставка — начать с малого — источник изображения

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

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

Разрывы строк
Разрывы строк аналогичны ширине строки.

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

Ваши предложения мешают ритму? — источник изображения

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

Вау! Достаточно краткое изложение шрифтов и их влияния, да?

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

Они могут иметь большое влияние на производительность при правильном использовании.

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

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

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

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

Совет по дизайну

: 4 указателя для выбора и применения шрифтов на целевых страницах

Отправлено в 07:44
в лучших практиках
Джейн Вэнс

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

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

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

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

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

Шрифты с засечками обычно считаются «классическими» и считаются более формальным стилем. Бренды, которые хотят дать своим клиентам чувство надежности и надежности, могут рассмотреть возможность использования шрифтов с засечками. Распространенными шрифтами с засечками являются Times New Roman, Garamond, Merriweather и Big Caslon. Например, вы, вероятно, распознаете текст, который читаете в газете или книге, как шрифт с засечками.

Шрифты с обычными засечками

И наоборот, шрифты без засечек не имеют декоративных элементов.Шрифты без засечек часто вызывают ощущение современности и простоты. Эти шрифты могут показаться «чище» из-за простоты штрихов букв. Распространенными шрифтами без засечек являются Arial, Helvetica, Open Sans и Trade Gothic. Брендам, которые хотят выглядеть дружелюбными, доступными и непринужденными, следует рассмотреть шрифты без засечек. Например, многие технологические компании выбирают шрифты без засечек для своих логотипов и текста своей платформы.

Обычные шрифты без засечек

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

Популярные скриптовые шрифты

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

Кернинг: интервал между символами в слове
Ведущий: интервал между строками текста
Отслеживание: интервал между словами в предложении

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

ВАЖНО: Лучше всего выбирать шрифт из широко используемого источника, например Google Fonts или Adobe Font.

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

СОВЕТ. Ознакомьтесь с этим ресурсом для выбора шрифта: Как выбрать правильные шрифты для создания своего бренда

Определить иерархию шрифтов

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

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

Заголовок

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

Подзаголовок

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

Пункт / текст

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

Выбрать из встроенных шрифтов

Панель стилей ShortStack включает 21 встроенный шрифт, который можно применить к целевой странице. Их:

В этом удобном видео показано, как использовать панель стилей для стилизации текста на целевой странице.

Добавить пользовательские шрифты с помощью веб-шрифтов Google и правил @ font-face

Хотите использовать шрифт, которого нет на панели стилей ShortStack на целевой странице? Ты можешь.Вам просто нужно использовать немного CSS. Доступ к редактору CSS можно получить, щелкнув ссылку CSS в правом верхнем углу панели стилей. Там вы можете добавить веб-шрифт Google или использовать правила @ font-face для извлечения шрифта, размещенного на вашем сервере.

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

4 способа использования шрифтов на целевой странице для продвижения вашего бренда

Есть причина, по которой вы можете сразу узнать рекламу Apple. То же самое с Nike и Airbnb. Большая часть этого связана с изображениями, копией и макетом, но гарнитуры также играют огромную роль.

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

Примеры эстетики фирменного дизайна Apple и Nike.

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

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

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

По возможности нарушайте правила

Сезар Мартинес, старший арт-директор Unbounce, слышит много разговоров о правилах. Но они не все и не все. Как он говорит нам:

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

При разработке целевых страниц, которые должны выглядеть особенно брендированными или нестандартными, старайтесь время от времени нарушать эти правила. (затем A / B-тест, чтобы увидеть, что работает, а что нет). Например, вы можете использовать более двух гарнитур в одном абзаце, разбить кернинг на заголовках, использовать большие жирные засечки на полу-черном фоне и посмотреть, как это выглядит с тонким каллиграфическим шрифтом ручной работы в качестве подзаголовка … Я знаю, это звучит безумно, но это может привести к неожиданным результатам, и я действительно с нетерпением жду этого с новыми встроенными шрифтами Google конструктора.

Какие-нибудь из любимых нестандартных типографских примеров Сезара?

«Мне нравится то, что ILOVEDUST делает с типографикой. Я также рекомендую прочитать Pretty Ugly2 как самоанализ «плохих» типографических приложений, которые преуспевают в том, как они передают визуальную идею ».

Какой шрифт больше всего нравится Cesar использовать в конструкторе? Несколько: Roboto, Playfair и Abril Fatface.

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

Дениз Вильянуэва, дизайнер продуктов, создала нашу Академию Unbounce с четкой и последовательной иерархией.

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

Дениз предоставила несколько конкретных указателей, которые помогут вам достичь правильной иерархии контента на ваших целевых страницах:

«В случае сомнений, использование одного семейства шрифтов с толщиной 2–3 (или двух семейств шрифтов с толщиной 1-2) будет работать большую часть времени. Использование более трех шрифтов может отвлекать и хаотично — избегайте этого.

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

Дайте кому-то все ощущения с помощью типографских деталей

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

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

Различные шрифты передают различные типы эмоций с помощью текста — о чем эти шрифты заставляют вас думать? Профессионализм? Надежность? Игривость? Безвременье?

Попробуйте включить шрифт в свое сообщение.

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

«Если типографика сделана хорошо, вам не всегда нужны дополнительные элементы, такие как изображения, фон или даже цвета, чтобы усилить сообщение. А иногда исполнение настолько безупречно, что аудитории, возможно, даже не нужно знать, как читать, чтобы понять и прочувствовать послание, стоящее за ним. Как проект Джи Ли «Слово как изображение» — просто… вау ».

Изображение из проекта «Слово как изображение» Джи Ли.

На ваших целевых страницах тоже можно использовать потрясающие шрифты.

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

Как типографика влияет на конверсию

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

Но есть один элемент, который часто недооценивают в его влиянии на конверсии.

Я говорю о типографике.

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

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

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

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

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

Здесь может помочь понимание типографики. Это инструмент, который помогает читателю уловить и понять информацию, которую вы пытаетесь передать.

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

Искусство типографики состоит из нескольких компонентов. Давайте посмотрим на основные элементы:

1. Гарнитура — Гарнитура — это не то же самое, что шрифт.Он относится к группе символов, букв и цифр, имеющих одинаковый дизайн. Например, Garamond, Times и Arial — это гарнитуры, а не шрифты — очень распространенное заблуждение.
2. Шрифты — определенный стиль шрифта с заданной шириной, размером и плотностью. Например, «Грузия» — это шрифт; 9pt Georgia Bold — шрифт. Люди в сообществе шрифтовых дизайнеров считают шрифт механизмом доставки, а шрифт — творческой работой.
3. Длина строки — Это относится к расстоянию, занимаемому текстом, который присутствует между правым и левым полями в одной строке.
4. интерлиньяж — это расстояние между базовыми линиями (линиями, на которых «сидят» буквы), выражаемое в точках.
5. Кернинг — этот термин относится к пустому пространству между отдельными символами или буквами. Многие шрифты имеют значение кернинга по умолчанию, которое лучше всего подходит для того, чтобы пространство между буквами выглядело более естественным.
6. Отслеживание — Также известно как межбуквенный интервал, он используется для равномерного регулирования пространства по диапазону символов.Отслеживание может повлиять на плотность символов отрывка.

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

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

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

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

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

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

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

1. Сходство
2. Продолжение
3. Закрытие
4. Близость
5. Фигурка и фон

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

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

Что показывают исследования?

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

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

Чего 40 000 участников не осознавали, так это того, что, хотя им всем был представлен один и тот же отрывок, он был набран разными шрифтами. В этом эксперименте использовались шесть шрифтов: Baskerville, Helvetica, Comic Sans, Computer Modern, Georgia и Trebuchet.

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

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

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

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

«Шрифты имеют разный характер.Мне кажется, что о Баскервиле можно сказать только то, что он кажется более формальным или выглядит более формальным ».

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

Имеет ли значение размер шрифта?

Чтобы выяснить, имеет ли значение размер шрифта, Майкл Бернард из Usability News (созданный Лабораторией исследования юзабилити программного обеспечения в Государственном университете Уичито) провел исследование, в котором сравнивались 8 популярных онлайн-шрифтов: 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.

Дебаты с засечками и без засечек

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

Рекомендуется использовать

шрифтов без засечек для основной части текста и шрифтов с засечками для заголовка и подзаголовков.

Влияние на настроение и когнитивные способности читателей

В исследовании, проведенном доктором Кевином Ларсоном из Microsoft и доктором Розалинд Пикард из Массачусетского технологического института, изучалось, может ли типографика влиять на настроение и когнитивные способности. Исследование было разделено на две части, и было проведено три различных измерения: относительная продолжительность предмета, шкала Лайкерта и когнитивная задача.

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

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

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

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

В задаче со свечой 4 участника из группы с хорошей типографикой успешно выполнили тест, а 0 участников из группы с плохой типографикой выполнили задачу.

В задаче удаленных сотрудников участники из группы с хорошей типографикой выполнили 52% задачи со средней скоростью 6395 мс, а участники из группы с плохой типографикой выполнили 48% задачи со скоростью 6715 мс.

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

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

1. Не позволяйте выразительности влиять на полезность. При нажатии на эту опцию «шрифт» мы получаем столько разновидностей, что это почти как в сказке о конфетах. Однако важно помнить, что сложные шрифты не всегда легко читать. Да, они могут выглядеть красиво, но красивый не всегда означает продажи.
2. Помните, что выбранный вами шрифт должен дополнять текст, а не подавлять его.После прочтения текста люди должны помнить ваше сообщение или призыв к действию, а не шрифт.
3. Когда дело доходит до сочетания шрифтов, вы можете сделать это с помощью двух принципов — соответствия и контраста.

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

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

1. Разнообразие — это хорошо, но не переборщите. Ваша копия не должна отображать ваши любимые шрифты. Простота — ключ к успеху.
2. Чтобы найти идеальный шрифт, изучите свою нишу и свою аудиторию. Должен ли шрифт быть формальным или неформальным? Он должен быть больше? Ответы можно найти, если при необходимости проведет простое исследование рынка.Но если вы продаете продукт, который даст людям зрение 20/20, скорее всего, ваша целевая аудитория будет состоять из людей с ослабленным зрением в той или иной форме. Так что в данном случае использование простого шрифта большого размера не составляет труда.
3. Выберите шрифт, который сделает ваш текст разборчивым и читаемым. Один из способов сделать это — выбрать шрифт с большими счетчиками (полностью или частично заключенные области букв).
4. Не пишите каждое слово или первую букву в каждом слове с заглавной буквы.Девяносто процентов текста, который люди читают в Интернете, написаны строчными буквами.
5. Когда дело доходит до длины строки, не делайте ее слишком короткой, потому что необходимость постоянно перемещать взгляд затрудняет чтение. С другой стороны, слишком длинные строки иногда могут затруднить читателям поиск следующей строки.
6. Убедитесь, что расстояние между буквами оптимизировано для правильной плотности, чтобы слова не выглядели тесными и переполненными, что может расстроить и сбить с толку вашего читателя.

Типографика важна. Так думал даже Стив Джобс!

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

Сводка

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

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

Об авторе: Анкит Оберой — соучредитель AdPushup, стартапа, который помогает издателям и блоггерам оптимизировать свои доходы от рекламы. Вы можете связаться с ним в Twitter @oberoiankit.

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Использование шрифтов Google на целевых страницах — SharpSpring

Поиск шрифтов

Чтобы найти и скопировать шрифты Google для использования на целевой странице, выполните следующие действия:

Лучшие шрифты для целевых страниц

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

Неважно, насколько хорош ваш продукт, если целевая страница не является привлекательной, посетители уйдут, не купив.

Шрифты без засечек - это обычно используемые шрифты в Интернете. Потому что его легче читать и понимать. Некоторые популярные шрифты без засечек - Helvetica, Avant Garde, Arial и Geneva.

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

Подобные сообщения

Шрифты для целевых страниц (с примерами)

1. Род

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

MoneyLion использовал Rhode на своей целевой странице.Они соединили Роуд с Graphik. Отличное сочетание. Graphik - лучший вариант для абзацев, подзаголовков и т. Д.

Сопряжение шрифтов: Rhode + Open Sans, Roboto

2. Казимир

А вот и Казимир. Kazimir - это шрифт с засечками, разработанный Ильей Рудерманом и Юрием Остроменцким. Поставляется с пятью начертаниями - от светлого до жирного.
Взгляните на целевую страницу Альфреда. Они сделали этот крутой дизайн с Казимиром в паре Интер. Inter работает с большинством экранных шрифтов.Целевая страница Альфреда

Font Pairings with Kazimir: Inter, Trade Gothic, Roboto

3. Эйна 02

Предыдущая домашняя страница Specify

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

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

Сопряжение шрифтов с Eina 02: Roboto, Arial, Helvetica, Heebo

4.GT Walsheim Pro

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

Ready невероятно использует GT Walsheim на своей целевой странице. Вдохновляйтесь их веб-сайтом и создайте свою уникальную и чистую целевую страницу.

Сопряжение шрифтов с GT Walsheim: жирный + светлый, черный + средний

5.Реколета

Recoleta становится популярной прямо сейчас. Его можно использовать, чтобы вызвать ностальгию по 80-м годам. Но он работает и с современными страницами. Этот винтажный шрифт создан Хорхе Чистерна. Реколета имеет 15 различных весов. Кроме того, этот шрифт отлично подходит для логотипов и водяных знаков.
Целевая страница Андре

Посмотрите, например, целевую страницу Андре. Он идеально смешал Реколета с Авертой. Еще примеры - клерки и хумааны.

Сочетание шрифтов: жирный + светлый, жирный + интер, жирный + софия

6.iA Writer Duospace

iA Writer Duospace - идеальный моноширинный шрифт, разработанный iA. Он идеально подходит для всех видов кодирования, современных цифровых целевых страниц. Anonymous Pro и Cousine - два популярных сейчас моноширинных шрифта. Включите этот шрифт для лучшей читаемости и единообразия.

Целевая страница Anygood

Anygood - отличный тому пример. Он разработан Can Saglam. Для сочетания шрифтов лучше подойдет любой легкий шрифт без засечек. Или вы можете выбрать версию iA Writer Duospace Regular.

Сопряжение шрифтов:

7. Avenir Next

Адриан Фрутигер и Акира Кобаяши создали этот простой, но мощный шрифт. Avenir Next отлично работает со всеми видами целевых страниц, но особенно хорошо смотрится на чистых и красочных страницах. Если вы создаете целевую страницу для своего интернет-магазина, вам обязательно стоит подумать об этом шрифте.
Целевая страница hum

Целевая страница Colgate Hum разработана с использованием Avenir Next. Avenir хорошо сочетается с Gilroy, Avenir light, Metro Nova.

Сопряжение шрифтов:

Конструктор посадочных страниц, который мы рекомендуем

• A / B-тестирование
• Настраиваемые шаблоны
• Перетаскивание
• Бесплатный SSL
• Бесплатная пробная версия 14 дней
• 29,00 $ / месяц

Если вам понравился этот пост, буду очень благодарен, если вы поможете ему распространиться, поделившись им в Twitter или Facebook.