Блог “У Василича”

Подборка опенсоурсных вариативных шрифтов

Приблизительное время чтения7 мин.
Фото от Markus Spiske

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

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

Но что тогда нам может помешать? Несмотря на то, что к 2020 году выбор вариативных шрифтов стал обширен, кириллических из них не так много. Более того, если вы разработчик и хотите использовать вариативный шрифт для своего личного проекта, то вряд ли вы готовы за него платить, т.к. стоят шрифты нынче недёшево. Так что сужая выборку до бесплатных кириллических шрифтов, их уже можно пересчитать по пальцам.

Эту скромную подборку и хотелось бы сегодня представить вашему вниманию. Шрифты отсортированы по убыванию даты выхода, так что начнём с самых трендовых. Сравним такие характеристики как число глифов, размеры файлов, число осей и наличие OpenType опций — по этому сравнению можно будет подобрать подходящий шрифт для своего следующего проекта (первостепенен конечно же визуал, но это вещь субъективная).

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

Commissioner

Демонстрация шрифта Commissioner на сайте v-fonts.com
Commissioner: внешний вид

Дата выхода: 15 января 2020

Семейство: sans-serif

Число глифов: 1124

Оригинальный размер: 723KB

Размер сабсета: 112KB

Оси:

  1. Weight: 100 — 900
  2. Slant: -12 — 0
  3. Flair: 0 — 100
  4. Volume: 0 — 100

Commissioner — самый свежий шрифт из подборки. Его можно видеть в деле на этом сайте. Его особенностью является наличие оси Flair, которая добавляет подобие засечек. Ось Volume работает только вместе с Flair, практически незаметно для фронтендерского глаза изменяя вид “засечек”. Эти оси однако делают шрифт довольно тяжёлым, хотя сабсет версия в 112KB — это уже адекватно (хоть и не мало). Встроенная поддержка италика через Slant ось — безусловный плюс.

Плюсы:

  • Подобие serif внутри sans-serif шрифта через Flair ось
  • Поддержка италика через Slant ось
  • Поддержка альтернативного начертания через aalt
  • Самый новый, а значит модный и молодёжный

Минусы:

  • Тяжеловесный, в т.ч. из-за необязательной Volume оси
  • Нет поддержки табличных цифр (TNUM)
  • Пожалуй, слишком новый, что может выражаться в наличии багов вроде поломанных лигатур

Табличные цифры — это моноширинные глифы цифр, аналогичные моноспейсным шрифтам. Очень полезная фича, когда хочется иметь возможность сравнить значения выровненных друг под другом чисел, например в таблице. Без неё придётся использовать monospace или жертвовать пользовательским опытом.

Под альтернативными начертаниями понимается OpenType опция, заменяющая некоторые символы на их альтернативные версии, зачастую каллиграфического характера. Например, я могу активировать этот режим для Commissioner через font-feature-settings: "aalt";

Почувствуй разницу:

“Съешь ещё этих мягких французских булок, да выпей же чаю.”

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

Manrope

Демонстрация шрифта Manrope на сайте v-fonts.com
Manrope: внешний вид

Дата выхода: 16 декабря 2019

Семейство: sans-serif

Число глифов: 741

Оригинальный размер: 152KB

Размер сабсета: 23KB

Оси:

  1. Weight: 200 — 800

Manrope — простой вариативный шрифт. На контрасте с Commissioner его вес поражает: 152KB, которые после сабсеттинга вообще превращаются в незаметные 23KB. Но разумеется такой выигрыш в размере происходит из-за гораздо меньшего числа возможностей: здесь всего одна ось и нет поддержки италика ни в каком виде. Если вам все эти усложнения и не нужны, то это хороший вариант.

Плюсы:

  • Лёгкий, как пёрышко колибри
  • Не успел покрыться пылью
  • Поддержка табличных цифр
  • Поддержка альтернативного начертания через aalt
  • Есть модный сайт

Минусы:

  • Нет поддержки италика

Montserrat

Демонстрация шрифта Montserrat на сайте v-fonts.com
Montserrat: внешний вид

Дата выхода: 8 ноября 2019

Семейство: sans-serif

Число глифов: 1944

Оригинальный размер: 377KB + 385KB

Размер сабсета: 51KB + 53KB

Оси:

  1. Weight: 100 — 900

Montserrat — ещё один простенький шрифт с единственной осью. Весит больше, чем Manrope, т.к. поддержка глифов у него куда шире. Глифы идут в плюс, т.к. можно среди них откопать интересную экзотику. Италик есть, но идёт отдельным ассетом, так что если он вам нужен, то можно умножать вес на 2.

Плюсы:

  • Широкий выбор глифов
  • Поддержка италика
  • Хороший вес
  • Поддержка табличных цифр
  • Поддержка 2 видов альтернативного начертания через aalt и salt
  • Довольно свежий

Минусы:

  • Италик требует подключения дополнительного ассета

Science Gothic

Демонстрация шрифта Science Gothic на сайте v-fonts.com
Science Gothic: внешний вид

Дата выхода: 29 августа 2019

Семейство: sans-serif

Число глифов: 1218

Оригинальный размер: 1.26MB

Размер сабсета: 259KB

Оси:

  1. Weight: 100 — 900
  2. Width: 50 — 200
  3. Y Opaque: 18 — 122
  4. Slant: -10 — 0

Science Gothic — тяжеленный шрифт, почти в 2 раза тяжелее Commissioner, который сам относится к группе тяжеловесов. Такой вес разумеется здесь не просто так — шрифт самый гибкий с 4 полезными осями: традиционный Weight, Width для ширины символов, Y Opaque, меняющий визуальный стиль, делая некоторые линии тонкими, ну и Slant для италика. Здесь стоит выбор между тем нужно ли вам столько власти или она только усложняет работу да прибавляет в весе.

Плюсы:

  • Фарширован возможностями
  • Поддержка италика через Slant ось
  • Единственный из списка поддерживает регулировку ширины через Width ось
  • Меняет внешний вид через Y Opaque ось
  • Поддержка табличных цифр
  • Поддержка альтернативного начертания через aalt

Минусы:

  • Чересчур тяжёлый
  • Власть пьянит похлеще хмельного напитка

PT Root UI VF

Демонстрация шрифта PT Root UI VF на сайте v-fonts.com
PT Root UI VF: внешний вид

Дата выхода: 29 января 2019

Семейство: sans-serif

Число глифов: 973

Оригинальный размер: 213KB

Размер сабсета: 41KB

Оси:

  1. Weight: 300 — 700

PT Root UI VF — похож на Manrope в том плане, что тоже одна ось, тоже лёгкий и тоже без италика. Выбор между ними чисто визуальный.

Плюсы:

  • Малая вариативность даёт плюс в весе
  • Поддержка табличных цифр

Минусы:

  • Нет поддержки италика

Inter

Демонстрация шрифта Inter на сайте v-fonts.com
Inter: внешний вид

Дата выхода: 10 сентября 2018

Семейство: sans-serif

Число глифов: 2548

Оригинальный размер: 759KB

Размер сабсета: 67KB

Оси:

  1. Weight: 100 — 900
  2. Slant: -10 — 0

Inter — наш победитель по числу глифов. За счёт глифов получается приличный вес на уровне Commissioner, хотя изощрённых осей здесь нет. Но вес здесь не в минус, т.к. сабсеттинг полностью решает эту проблему. Slant идёт в безусловные плюсы. Шрифт полностью справляется с тем, чем он является, так что минусов я здесь не увидел.

Плюсы:

  • Широкий выбор глифов
  • Поддержка италика
  • Приятный размер после сабсеттинга
  • Поддержка табличных цифр

Lora

Демонстрация шрифта Lora на сайте v-fonts.com
Lora: внешний вид

Дата выхода: 18 января 2018

Семейство: serif

Число глифов: 882

Оригинальный размер: 199KB + 212KB

Размер сабсета: 37KB + 40KB

Оси:

  1. Weight: 400 — 700

Lora — единственный в списке serif, что делает его уникальным. Незамороченный, с одной осью, но зато с хорошим весом. Италик есть, но нужно подключать отдельно.

Плюсы:

  • Монополист в семействе serif
  • Поддержка италика
  • Отличный вес
  • Поддержка табличных цифр
  • Поддержка альтернативного начертания через aalt

Минусы:

  • Италик требует подключение дополнительного ассета
  • Ограниченный диапазон Weight
  • Не совсем минус, но serif означает пониженную универсальность

Вот собственно и всё, из чего приходится выбирать. Использовать статичный шрифт, будучи фронтенд-разработчиком, нестатусно, а выбор вариативных кириллических сильно ограничен. Но в принципе и из этих 7 есть что выбрать: Manrope, Inter, Montserrat и PT Root UI VF подойдут в простых случаях, Commissioner и Science Gothic, если хочется большей гибкости, ну и Lora стоит обособленно от них, единственная в своём семействе. Если отдать денюжку, то выбор шрифтов будет гораздо выше, имейте в виду.

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

p1t1ch.com