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

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

Как люди читают в интернете

Исследование «Как люди читают в интернете», опубликованное американской компанией Nielsen Norman Group в 2020 году, говорит о том, что люди предпочитают сканировать страницы глазами, прежде чем решают прочитать текст внимательно. Сканирование происходит по разным паттернам, но практически всегда взгляд читающего скользит по заголовкам.

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

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

Прежде, чем переходить к выбору шрифтовых сочетаний, нужно знать, из чего выбирать. По способу начертания шрифты делятся на рукописные и печатные. Рукописные шрифты имеют оригинальный вид, среди них есть персонализированные (например, шрифт Кафки, Пикассо, Сезанна). Их используют дизайнеры для оформления заголовков, логотипов. В качестве основного шрифта для текста они не подходят, поскольку затрудняют чтение и восприятие. Здесь эстафету у них перенимают печатные шрифты. Их разделяют на три группы:

1. Шрифты с засечками. Они облегчают чтение печатных изданий, визуально очерчивая строки. Но в веб-дизайне они скорее усложняют восприятие и рассеивают внимание читателя. Основное назначение таких шрифтов – использование в логотипах, выделение заголовков и важной информации на странице.
2. Рубленные. Шрифты нейтрального характера, без засечек. Подходят для заголовков, параграфов, основного текста.
3. Декоративные. Они выглядят оригинально, ярко. Такие шрифты отлично подойдут для молодежных сайтов и любой тематики, связанной с творчеством. Но применять их нужно очень осторожно: текст, написанный декоративным шрифтом, сложный для чтения. Чаще всего их используют для создания логотипов и выделения заголовков.

Какие шрифты актуальны в 2020-х

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

• Коллекция обширная и включает только качественные бесплатные шрифты.
• С ними не возникает проблем при верстке — легко подключить библиотеку и подтягивать из неё любой шрифт.
• Библиотека Google Fonts поддерживает разные виды сортировки содержимого.

В Google Fonts есть шрифты для латиницы, кириллицы, иероглифического письма, иврита и арабского. Находить нужные удобно при помощи фильтров, а отобрать топовые можно в один клик — выбрав сортировку по популярности.

Рейтинг самых популярных шрифтов Google Fonts начала 2020-х выглядит так:

1. Roboto. Легко читается даже в маленьком размере и прекрасно работает в паре с другими кириллическими шрифтами Google Fonts.
   
Roboto был взят за основу при разработке веб-студией «Бизнес Сайт» интернет-магазина «Мир клея».
2. Open Sans. Еще один универсальный шрифт для длинных текстов и заголовков. Читается в любом размере, вплоть до самого мелкого, годится для баннеров, презентаций, рекламных креативов.
3. Montserrat. Аккуратный шрифт в урбанистической стилистике, идеально подходящий для использования в рекламе. Его козырь — читабельность. Выглядит он тоже достаточно представительно, чтобы найти ему место в заголовке.

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

Характер и настроение шрифта

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

• Юмористические зарисовки, оформленные гарнитурой Times, посчитало смешными на 10% больше читателей, чем при оформлении Arial.
• Текст, напечатанный Baskerville, по сравнению с этим же самым, напечатанным Comic Sans, признали более убедительными

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

Если в этой паре соединить противоречащие друг другу гарнитуры, внимание читателя сосредоточится на самих шрифтах, а не на содержании страницы. Например, если заголовок выполнен в Franklin Gothic (элегантный, солидный, мужественный стиль), а основной текст в Souvenir (легкомысленный, игривый), в результате получится противоречивое сочетание, которое мешает гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura Bold, картина полностью изменится: эти два шрифта дополнят друг друга благодаря схожести элементов и не создают ненужного напряжения.

Влияние шрифтов на конверсию и SEO: Анализ и примеры

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

1. Влияние на конверсию
   Читабельность и удобство восприятия — это одни из главных факторов, влияющих на конверсию сайта. Исследования показывают, что пользователи быстрее принимают решения на сайтах, где текст легко читается и визуально привлекателен.
   Например, A/B тестирование на сайте электронной коммерции может продемонстрировать, что простой переход с одного шрифта на другой, более читабельный, может увеличить конверсию на 10-20%. Причина этого в том, что пользователям легче воспринимать информацию, они быстрее находят нужные товары и легче ориентируются по сайту.

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



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

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

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



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

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

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

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

Примеры и статистика

• A/B тесты: Компании, проводящие A/B тесты, часто обнаруживают значительное влияние смены шрифтов на ключевые метрики. Например, одна известная компания увеличила конверсию на 14% просто заменив декоративный шрифт на более простой и удобочитаемый. Это подтверждает гипотезу, что пользователи быстрее выполняют целевые действия на сайте, когда шрифт не отвлекает их внимание от основного контента.



• Исследования Nielsen Norman Group: Исследования показали, что использование шрифтов с высоким контрастом и четкими линиями повышает восприимчивость текста и улучшает показатели вовлеченности пользователей, что в конечном итоге ведет к более высоким показателям времени на сайте и конверсии.
• Данные Google: В исследованиях Google отмечается, что сайты с хорошо оптимизированными шрифтами и высокой скоростью загрузки получают преимущество в поисковой выдаче по сравнению с конкурентами, использующими сложные и тяжелые шрифты

.

Ищем правильные сочетания шрифтов для сайта

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

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

Задача дизайнера — проработать все эти факторы, выдерживая дресс-код тематики сайта.

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

• Не использовать больше 3 шрифтов для оформления сайта. Большее количество будет отвлекать внимание посетителей. К тому же, на подгрузку шрифтов нужно больше времени, а даже доли секунды замедления скорости загрузки страницы отрицательно сказываются на эффективности поискового продвижения и лояльности пользователей.
• Следите за читабельностью. Когда текст не читается, всё остальное — не важно, просто меняйте шрифт.. Чтобы пользователь не покинул страницу в первые же секунды после перехода, важно убедиться, что текстовый контент легко читается и выбраны правильные параметры: цветовое сочетание, размер, начертание и пр.
• Используйте типографику логично. Для этого применяются разные гарнитуры или один и тот же шрифт, но с разными параметрами насыщенности, размера, начертания. Но так, чтобы в выборе была логика —- заголовки не были мельче подзаголовков, а основной текст не сливался с подложкой. Это помогает посетителю сориентироваться на странице.
• Следите за сочетанием шрифтовых пар и меняйте при возникновении малейших сомнений. Классические варианты: шрифт с засечками + рубленый, сочетание шрифтов разного класса, контрастная насыщенность шрифта в заголовке и в основном тексте, сочетание шрифтов различной тональности, яркое + нейтральное. Оценить гармоничность типографики можно приемом «бокового зрения»: направить взгляд левее или правее текста, чтобы воспринимать картинку в целом, не читая текст.

Полезные инструменты в работе со шрифтами

Подберите удачные сочетания шрифтов для сайта при помощи онлайн-сервисов:

• Google Type: большое количество шрифтовых пар, подобранных дизайнерами.
• Type Genius: вводите основной шрифт и получайте подходящую пару.
• Font Combinator , простой в использовании сервис, позволяет выбирать и гарнитуру и тип шрифта для заголовков и основного текста среди гармонирующих между собой вариантов.
• Font Pair: подбирайте шрифтовую пару по выбранным в фильтре характеристикам и скачивайте их на свой компьютер.
• The Art of Mixing Typefaces – таблица-шпаргалка по сочетаемости шрифтов для веб-дизайнеров.

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

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