FRTVT написал

Шрифты в вебе

А давайте сделаем курсивом?

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

Зачем вы хотите добавить кастомный шрифт?

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

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

На него никто не обратит внимания

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

Никто просто не оценит вашего старания.

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

font-family:
	-apple-system,
	BlinkMacSystemFont,
	'Roboto',
	'Helvetica Neue',
	Geneva,
	"Noto Sans Armenian",
	"Noto Sans Bengali",
	"Noto Sans Cherokee",
	"Noto Sans Devanagari",
	"Noto Sans Ethiopic",
	"Noto Sans Georgian",
	"Noto Sans Hebrew",
	"Noto Sans Kannada",
	"Noto Sans Khmer",
	"Noto Sans Lao",
	"Noto Sans Osmanya",
	"Noto Sans Tamil",
	"Noto Sans Telugu",
	"Noto Sans Thai",
	sans-serif,
	arial,
	Tahoma,
	verdana;

Теперь загляните, скажем, на Яндекс Дзен Новости:

font-family:
	-apple-system,
	system-ui,
	"Helvetica Neue",
	Helvetica,
	Roboto,
	Arial,
	sans-serif;
Микро-заметка про Дзен

Раньше, когда Дзен принадлежал Яндексу и назывался Яндекс Новости, код был такой:

font-family:
    YS Text,
    Helvetica Neue,
    Arial,
    sans-serif;

Первый из них, который YS Text — это один из вариантов Yandex Sans. Они писали про него в своём блоге на Хабре. Мне кажется, что эта заметка важна, потому что всем стоит знать разные мнения по вопросу шрифтов.

В связи с тем, что Дзен потерял права на фирменный шрифт Яндекса (смотри раскрывашку выше 👆), в качестве примера буду приводить проект Дока — свободную энциклопедию про веб-разработку на русском языке.

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

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

Поэтому мы купили несколько начертаний шрифта Graphik у type.today, и теперь наш css, управляющий шрифтами на странице выглядит вот так:

font-family: 'Graphik', sans-serif;

Откройте Доку, Дзен и VK рядом: видите ли вы значительную разницу в удобстве чтения? Потому что именно материал — самое важное на сайте.

Нет никакой разницы, потому что шрифты хорошие.

Можно легко ошибиться с выбором

Вспомните начало двухтысячных — эпоху WordArt?

Каждый, кто мог, использовал на сайтах и в документах (не официальных, там властвует Times New Roman) свои шрифты: сумасшедшие курсивы и рукописные начертания; Comic Sans, добавленный к месту и не к месту; шрифты, созданные людьми, которые не знают как пишутся буквы русского алфавита...

Всё это делало тексты смешными, нелепыми или нечитаемыми. За внешним видом пропадал смысл передачи написанной информации.

Так просто лучше читается.

О техническом

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

На сервере нужно место, сборка должна происходить без ошибок.

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

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

И, даже если всё ок, это забитая кэш-память и трафик. В современных реалиях ничтожно-малое количество, но всё же.

А ещё не стоит забывать, что загрузка CSS (а шрифты у нас используются именно при CSS-запросах) блокирует загрузку DOM, JS и контента страницы!

Пример из жизни про такую блокировку

Недавно консультировал один интернет-магазин на предмет медленной загрузки страницы на мобильном, около 67 баллов из 100 в Google PageSpeed Insights. Проблема заключалась в том, что CSS загружался большим бандлом, в котором достаточно большое время грузились именно шрифты.

Отдельно стоит заметить, что проблемный шрифт грузился во всех начертаниях, хотя использовалось только два, а нужен был этот шрифт только потому, что в купленном отсутствовал символ рубля (₽). Ребята могли поправить open-source шрифт, это позволяла лицензия, оставить в нём только один символ, убрать ненужные начертания и скорость загрузки увеличилась в разы.

Поэтому очень важно:

О цене

Да, существует огромное количество бесплатных шрифтов. Прекрасные Roboto, Ubuntu, PT Sans, но что если вы хотите, например Гельветику?

Гельветика (Helvetica) — платный шрифт, который установлен системно на маках, поэтому если вы напишите

font-family: Helvetica, sans-serif;

то на маках и прочей яблочной технике всё заработает, а на андроидах, линуксе и windows — нет. В этом случае вам нужно купить шрифт, добавить его в сборку сайта и убрать название шрифта в одинарные кавычки после подключения через @font-face.

Давайте посмотрим, сколько стоит этот шрифт

У шрифтов есть начертания: обычный (regular), курсив (italic) или наклонный (oblique) — обычно берётся один из них, жирный (bold). Ещё вам может понадобиться жирный-курсив. Итого у вас есть четыре начертания. Давайте посмотрим сколько это стоит.

Стоит каждое начертание €49.99, причём вы платите за шрифт, который можно по лицензии использовать только на одном сайте или домене, да, к тому же, лицензия прекращается по достижении 250 000 просмотров. А сколько просмотров уже зависит от популярности сайта. 2 500 000 — €199.96, 25 000 000 — €1 499.70. Дорого? А я напомню, что начертания нужно минимум 2, 3 или 4, и за каждое из них надо заплатить.

Впрочем, возможны скидки.

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

И да, я против пиратства. Воровать шрифты — уголовное преступление.

Почему так дорого?

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

Для примера посмотрите на набор символов в шрифте Inter.

Много? А ведь это ещё не всё. Кроме этого нужно описать ширину каждого символа, для всех диакритических знаков нужно описать их положение относительно букв, и указать могут ли конкретные буквы быть с такой диакритикой. А для рукописных шрифтов ещё и все соединения между буквами. Вспомните как вы напишете от руки: «он» и «боль». По-разному, верно?

И всё же, вам нужен кастомный шрифт

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

Выбирайте бесплатный со свободной лицензией.

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

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