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

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

 

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

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

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

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

 

Какие шрифты бывают

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

• Рукописные – уникальные оригинальные шрифты с персонализированным стилем (шрифт Кафки, Пикассо и другие). Для обычного текста практически не применяются. Их используют дизайнеры для разработки логотипов, афиш и других проектов;
• Печатные – классические шрифты для набора текста и печати. Это наиболее распространенные типы. Они бывают с засечками и без засечек. Именно их используют на сайтах, в приложениях и документах. Разберем их далее.

 

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

Буквы таких шрифтов имеют засечки – черточки и штрихи на концах. Их второе название «антиквы», а в их английских обозначениях часто есть слово «serif». Засечки облегчают чтение, визуально очерчивают строку и направляют взгляд слева направо. Известный представитель семейства – Times New Roman.

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

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

 

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

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

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

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

 

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

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

1. Times New Roman – один из самых распространенных шрифтов. Им традиционно оформляются деловые документы, как в бумажном, так и в электронном виде;
2. Arial – ближайший конкурент Times New Roman. Используется и в документах, и в дизайне сайтов. Это шрифт по умолчанию в Google Docs;
3. Roboto – легко читается вне зависимости от размера. Гармонично смотрится в сочетании с другими кириллическими шрифтами. Отлично подходит для интернет-ресурсов;
4. Open Sans – универсальный шрифт для длинных текстов. Хорошо воспринимается в любом размере. Отлично смотрится на баннерах, презентациях и рекламных буклетах;
5. Montserrat – шрифт без засечек в урбанистическом стиле. Легко читается и выглядит представительно. Идеален для рекламных заголовков;
6. Tahoma – считается техническим шрифтом. Им оформляют инструкции, технические решения и сложные описания изделий;
7. Courier New – современный вариант шрифта печатной машинки. Четкий и легко читается. Им имитируют фрагменты печатных изданий в сети. Является стилем по умолчанию во многих текстовых редакторах;
8. Verdana – оптимальный шрифт для сайтов. Он без засечек, с комфортным межбуквенным расстоянием, легко понимается, не утомляет глаза и красиво смотрится в разных масштабах.

 

Где брать шрифты

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

Google Fonts

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

FontSpace

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

Allfont

Сайт с платными и бесплатными шрифтами. Они распределены по группам: 3D-шрифты, брендовые, готические, комические, восточные, поцарапанные и многое другое. Одних только кириллических здесь более 2 тыс.

FontStruct

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

Font Squirrel

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

DaFont

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

Urban Fonts

Платные и бесплатные продукты собраны в одном месте. Вторые выделены в отдельную категорию – Free;

Abstract Fonts

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

My Fonts

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

 

Советы и сервисы для работы со шрифтами на сайте

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

• Разный шрифт для заголовка и текста;

Обычно ресурс оформляют в двух шрифтах: один для заголовков, другой для статей. Так посетители лучше воспринимают информацию. Гармоничные сочетания можно найти и скачать на сервисе Fontstorage. Здесь же можно менять размеры, типы, фоны, картинки и видеть в реальном времени, как это будет смотреться. Еще сервисы для подбора шрифтов: Тур.io, Google Type, Font Combinator, Font Pair, The Art of Mixing Typefaces;

• Цветовой круг для подбора гаммы;

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

• Оптимальный размер;

Важен не только тип, цвет, но и размер (кегль). Рекомендуемый размер для обычного текста – 12-14, минимальный – 10, максимальный – 16. Кегль заголовка можно подсчитать по формуле «золотого сечения». Размер букв умножаем на 1,6 и выбираем ближайшее существующее значение. Например, для основного текста величиной 14px оптимальным будет заголовок в 22px (14х1,6=22,4). Подобрать кегль можно в сервисе Modularscale. Оптимальный межстрочный интервал – 1,5;

• Правильный подход.

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

 

Заключение

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

При создании сайта важно все. Любая мелочь влияет на конверсию, а значит и на конечную прибыль. Нужен продающий сайт? Специалисты Белой Вороны реализуют самый смелый проект. Позвоните нам или оставьте заявку. Приведем клиентов из интернета!

 

Если Вам понравилась статья - ставим лайк и делимся ей в социальных сетях. Хотите получать больше полезных статей? Подпишитесь на рассылку. Раз в неделю пишем коротко про интернет-маркетинг.