Как выбрать шрифт для медиа

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

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

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

— Андрей Абрамов, арт-директор дизайн-студии AIC

Типы шрифтов

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

Image for post
Image for post
Photo by Natalia Y on Unsplash

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

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

Проще говоря, Times New Roman — это гарнитура; а Times New Roman Bold — шрифт.

  • Антиква, она же гарнитура c засечками, она же serif. Например, Garamond, Times New Roman, Georgia.
Image for post
Image for post
Times New Roman
  • Гротеск, она же гарнитура без засечек, она же sans-serif . Например, Verdana, Helvetica, Proxima Nova.
Image for post
Image for post
Helvetica
  • Леттеринг, рукописная гарнитура.
Image for post
Image for post
Леттеринг. Источник: Школа каллиграфии «от Аза до Ижицы»
  • Декоративная гарнитура. Например, Intro, Calligraph Modern, Drum.
Image for post
Image for post
Drum

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

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

— Андрей Абрамов, арт-директор дизайн-студии AIC

Шрифты различаются по нескольким параметрам:

  • кегль — размер шрифта;
  • начертание — прямой, курсивный, перечеркнутый;
  • насыщенность — тонкий, жирный, полужирный;
  • ширина — нормальный, узкий, широкий;
  • четкость — четкий, размытый;
  • контраст.

Перед тем, как выбрать шрифт, выясните, платный он или бесплатный. Если шрифт платный, нужно понять, какой у него тип лицензии. Это можно сделать на сайте www.myfonts.com.

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

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

Отличная новость — хороших бесплатных шрифтов (в том числе и кириллических) становится все больше и больше. Но лицензионное соглашение на них также стоит читать внимательно (например https://www.paratype.ru/help/license/ptfree.asp )»,

— Дмитрий Осадчук, креативный директор Mail.Ru Group

Бесплатные шрифты имеют лицензию, позволяющую использовать их в коммерческих и личных целях. Такие можно найти в библиотеке Google Fonts или на Behance в разделе Typography по запросу free.

Есть два основных вида лицензий на шрифты:

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

Веб-лицензия — для использования шрифта на сайте. Она делится на три вида:

  • с оплатой за просмотры;
  • с подпиской на определенный срок;
  • с подпиской на тариф: внутри тарифа могут стоять ограничения по количеству просмотров или времени использования.
Image for post
Image for post

Самые читабельные шрифты

Image for post
Image for post
Шрифт Verdana Regular

В 2002 году вышло исследование Sofraware Usability Research Laboratory уичитского университета о читабельности шрифтов. Команда исследователей сравнила несколько десятков шрифтов и пришла к выводу, что на экране компьютера лучше всего воспринимается Verdana 12-м кеглем.

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

Американская ассоциация писателей и художников тоже для онлайна рекомендует шрифты без засечек. Однако так считают не все — например, для основного текста Medium использует serif-шрифт Hebrew Michol.

«Шрифт с засечками (антиква) по-прежнему широко используется как базовый шрифт в именитых медиа-изданиях (New York Times, The Guardian, Ведомости и многие другие). Вероятно, одна из причин, что это визуальное наследие из печатных изданий, когда практически все журналы и газеты были набраны антиквой. На уровне ощущений кажется, что антиква на сайте придает ему более строгий и деловой вид»,

— Дмитрий Осадчук, креативный директор Mail.Ru Group

Самыми популярными шрифтами считаются Georgia, Verdana, Helvetica, Arial и Roboto.

Шрифт и верстка

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

Image for post
Image for post

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

— Дмитрий Осадчук, креативный директор Mail.Ru Group

Image for post
Image for post
Как шрифты могут выглядеть в разных браузерах и устройствах

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

Image for post
Image for post

«В параметрах шрифта и набора рекомендую обратить внимание на ширину текстовой колонки и интерлиньяж (междустрочный интервал). Здесь советы простые: длина строки (с пробелами) для удобного перемещения взгляда — 50–80 символов; а интерлиньяж — 1.5–2–2.5 от размер кегля. Это объясняет, почему многие текстовые медиа делают узкую колонку. И здесь есть момент, про который в онлайне все забывают: чем длинее строка, тем больше интерлиньяж. Даже, если у вас есть межстрочный для одного кегля, это не значит, что стиль будет один для колонок разной ширины.

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

— Андрей Абрамов, арт-директор дизайн-студии AIC

Как выбрать шрифт

  1. Перед тем, как использовать шрифт, почитайте, что о нем говорят специалисты.
  2. Не воруйте шрифты.
  3. Если у вас не бюджета на покупку шрифта или разработку собственного, воспользуйтесь бесплатной библиотекой Google Fonts.
Image for post
Image for post
Библиотека Google Fonts

4. Проверяйте, как ведет себя шрифт на разных устройствах и в разных браузерах. Это поможет избежать неприятных неожиданностей.

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

6. Используйте не больше двух шрифтов на одной странице.

7. Черный на белом читается лучше, чем белый на черном.

8. Не используйте выравнивание по ширине и правому краю. Для больших текстов — выравнивание по левому краю. Для коротких и выносов — выравнивание по центру.

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

10. Идеальная длина строки — 50–80 символов.

Бонус

Если чувствуете желание и силу углубиться в понимание и историю шрифта, то есть 3 канонические книги:

Image for post
Image for post
Image for post
Image for post

Медиатор

Блог команды сервиса аналитики внимания «Медиатор»…

«Медиатор» — сервис редакционной аналитики

Written by

Новости, исследования, лайфхаки от команды «Медиатора» — Надежды Егоровой, Насти Дюжарден и Ольги Сидоровой

Медиатор

Блог команды сервиса аналитики внимания «Медиатор»: новости, статьи, исследования, переводы

«Медиатор» — сервис редакционной аналитики

Written by

Новости, исследования, лайфхаки от команды «Медиатора» — Надежды Егоровой, Насти Дюжарден и Ольги Сидоровой

Медиатор

Блог команды сервиса аналитики внимания «Медиатор»: новости, статьи, исследования, переводы

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store