Skip to content

Fonts: Custom vs System

nin-jin edited this page Dec 7, 2022 · 7 revisions

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

Custom Fonts

Размер

  • Одна языковая панель в одном начертании: 10-15 KB.
  • Все основные языковые панели в одном начертании: ~100KB.
  • Типичная страница использует 3-6 начертаний (тонкий/обычный/толстый, прямой/наклонный).
  • Типичная не англоязычная страница использует минимум 2 языковые панели (одна из которых - латиница).
  • Итого: для отображения типичной страницы нужно загрузить минимум 120 КБ шрифтов.
  • Типичный контентный сайт на $mol (habhub.hyoo.ru) весит 60 КБ.

Достоинства

  • На любой системе шрифт выглядит почти одинаково.
  • Большой выбор вариантов шрифтов.
  • Соответствуют айдентике компании, если шрифт является её частью.

Недостатки

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

System Fonts

Достоинства

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

Недостатки

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