История типографики в вебе: от @font-face в 1997 до variable fonts в 2024

Веб-типографика прошла путь от четырёх системных шрифтов в 1995 году до переменных шрифтов в 2024. Это 30 лет эволюции, в течение которых менялись технологии, подходы и эстетика. В этой статье — ключевые этапы этой эволюции: @font-face в IE4, технологии sIFR и Cufón, появление Google Fonts, формат WOFF, переменные шрифты. Понимание этой истории помогает не только ценить современные возможности, но и видеть направление развития.

Когда веб только появился, выбора шрифтов у дизайнеров не было. HTML 2.0 (1995) определял семь «безопасных» шрифтов, которые были установлены на большинстве компьютеров: Times New Roman, Arial, Courier New, Georgia, Verdana, Comic Sans MS, Trebuchet MS. Эти шрифты использовались через CSS-свойство font-family, но выбора, по сути, не было: на странице можно было использовать только то, что было в системе пользователя.

Попытки изменить это начались рано. В 1997 году Microsoft представила правило @font-face в Internet Explorer 4. Это был первый механизм, позволявший загружать шрифты с сервера. Однако @font-face в IE4 использовал проприетарный формат EOT (Embedded OpenType), который поддерживался только в IE. Конкурирующие браузеры (Netscape, Opera) не приняли этот формат, и @font-face фактически остался экспериментальной возможностью на десятилетие.

В 2002–2008 годах дизайнеры нашли обходной путь: вместо загрузки шрифтов напрямую — генерация изображений или Flash-анимаций с текстом. Самая популярная технология — sIFR (Scalable Inman Flash Replacement), разработанная Шоном Инманом в 2003 году. Принцип: JavaScript находит нужные текстовые элементы, заменяет их на Flash-объект с встроенным шрифтом, и Flash рендерит текст векторно. Это давало дизайнерам возможность использовать любой шрифт, но имело недостатки: тяжёлый Flash-файл, медленный рендер, проблемы с SEO (поисковики видели оригинальный текст, но не стилизованный).

В 2008 году появилась альтернатива — Cufón, разработанный Альберто Кармусом. Cufón генерировал из TTF-файла JavaScript-файл с описанием контуров букв, и через VML/SVG рендерил текст в браузере. Это было быстрее, чем sIFR, и не требовало Flash, но имело те же SEO-проблемы и плохо работало в старых браузерах. Обе технологии — sIFR и Cufón — были «костылями», которые решали проблему отсутствия @font-face, но не были настоящим решением.

В 2008 году браузеры Firefox 3.5, Safari 4 и Opera 10 добавили поддержку @font-face с форматами TTF и OTF. Это возродило интерес к веб-типографике: теперь можно было подключать реальные шрифты через CSS, без Flash или JavaScript. Проблема оставалась в лицензировании: многие коммерческие шрифты не разрешали свободное распространение через веб, и фаундри неохотно давали разрешения.

В 2009 году был разработан формат WOFF (Web Open Font Format), который добавлял к TTF/OTF сжатие и метаданные о лицензии. WOFF был принят как стандарт W3C в 2012 году, и к 2013 году поддерживался во всех браузерах, включая IE9+. Это сделало веб-типографику массовой: фаундри получили формат, защищающий их интересы (метаданные лицензии), а дизайнеры — компактный и универсальный формат.

В мае 2010 года Google запустил Google Fonts (изначально — Google Web Fonts) — бесплатный сервис, который позволял подключать шрифты через CDN одной строкой CSS. На старте было 18 шрифтов, к 2024 году — более 1500. Google Fonts радикально изменил веб-типографику: любой разработчик, без оплаты и без сложной настройки, мог подключить качественный шрифт за минуту.

Влияние Google Fonts на веб было колоссальным. До 2010 года кастомные шрифты были роскошью, доступной только крупным проектам с бюджетом на лицензирование. После 2010 года — стандартом. Такие шрифты, как Open Sans, Roboto, Lato, Montserrat, стали повсеместными, и сегодня сложно найти сайт, который бы не использовал хотя бы один шрифт из Google Fonts. Минус — единообразие: визуальный язык веба стал более однородным.

В 2014 году был разработан WOFF2 — улучшенная версия WOFF с алгоритмом сжатия Brotli. WOFF2 давал на 20–30% меньший размер файлов по сравнению с WOFF, что было особенно важно для мобильного трафика. К 2016 году WOFF2 поддерживался во всех современных браузерах, и сегодня это основной формат для веб-шрифтов.

Параллельно развивалась инфраструктура. Google Fonts начал автоматически генерировать WOFF2 для всех шрифтов, добавил поддержку переменных шрифтов в 2018 году, и сегодня предоставляет более 1500 шрифтов бесплатно. Альтернативные сервисы — Adobe Fonts (платный, в составе Creative Cloud), Fontshare, Bunny Fonts — расширили выбор для дизайнеров. В каталоге FontHub мы также используем WOFF2 как основной формат, с автоматическим subsetting и поддержкой переменных шрифтов.

В 2017 году Apple, Google, Microsoft и Adobe совместно представили стандарт переменных шрифтов (variable fonts) в OpenType 1.8. Переменный шрифт — это один файл, содержащий все начертания шрифта, с непрерывными осями вариации (вес, ширина, наклон, оптический размер). Это позволяло заменить 9–12 файлов одним, что экономило трафик и давало дизайнерам тонкий контроль над иерархией.

К 2018 году переменные шрифты поддерживались во всех современных браузерах. Google Fonts начал их добавлять в 2018, и сегодня в каталоге более 300 переменных шрифтов. В каталоге FontHub переменные шрифты — Inter, Roboto, Manrope, Playfair Display — доступны для немедленного подключения через наш CDN. Переменные шрифты стали стандартом для продуктовых интерфейсов с тонкой иерархией, и в ближайшие годы их доля будет только расти.

К 2024 году веб-типографика достигла уровня зрелости, который дизайнеры 1995 года не могли представить. Любой шрифт — бесплатный или коммерческий — может быть подключён через CSS. Переменные шрифты дают непрерывную вариацию по весу, ширине, оптическому размеру. Подмножества (subsetting) позволяют уменьшить размер файлов до 30 КБ. font-display контролирует рендер во время загрузки. Это базовый набор, без которого современный веб-проект не считается завершённым.

Что дальше? В ближайшие годы ожидаются: расширенная поддержка цветных шрифтов (color fonts, с встроенными палитрами), улучшенная работа с лигатурами и контекстными заменами в вебе, более глубокая интеграция variable fonts в дизайн-системы. Уже сейчас доступны экспериментальные шрифты с десятками осей (например, Roboto Flex с 10 осями), которые открывают новые приёмы в типографической анимации. В каталоге FontHub мы следим за развитием форматов и добавляем новые возможности по мере их стандартизации.

«Веб-типографика — это история о том, как индустрия догоняла печать за 30 лет.» — Джон Худсон

История типографики в вебе — это история о том, как сообщество решало сложную инженерную задачу: дать дизайнерам свободу выбора шрифтов, сохранив производительность и совместимость. От системных шрифтов через sIFR и Cufón к @font-face, от TTF через WOFF к WOFF2, от статических начертаний к переменным шрифтам. Каждый шаг открывал новые возможности, и сегодня веб-типографика — одна из самых развитых областей веб-разработки. В каталоге FontHub мы используем все эти достижения, чтобы дать вам доступ к качественной типографике без необходимости разбираться в тонкостях каждого формата.