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

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

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

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

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

Типы шрифтов

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

Как выбрать шрифт для своего проекта
Photo by Natalia Y on Unsplash

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

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

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

Существуют четыре основных типа гарнитур:

  • Антиква, она же гарнитура c засечками, она же serif. Например, Garamond, Times New Roman, Georgia.

    Times New Roman
    Times New Roman
  • Гротеск, она же гарнитура без засечек, она же sans-serif . Например, Verdana, Helvetica, Proxima Nova.

    Helvetica
    Helvetica
  • Леттеринг, рукописная гарнитура.

    Леттеринг
    Леттеринг. Источник: Школа каллиграфии «от Аза до Ижицы»
  • Декоративная гарнитура. Например, Intro, Calligraph Modern, Drum.

    Drum
    Drum

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

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

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

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

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

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

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

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

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

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

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

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

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

Плата за лицензию на использование шрифта

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

Шрифт Verdana Regular
Шрифт 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.

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

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

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

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

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

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

Выравнивание текста

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

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

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

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

    Библиотека Google Fonts
    Библиотека Google Fonts

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

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

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

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

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

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

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

Бонус

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

Рекомендуемые книги


[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх