Вариативные шрифты
Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом OpenType 1.8. На самом деле, работы в этом направлении велись ещё в 90-х, но только широкое использование шрифтов в вебе дало этой идее вторую жизнь и бурное развитие.
На момент написания статьи вариативные шрифты уже достаточно хорошо поддерживаются приложениями (Photoshop, Illustrator) и браузерами (Chrome, Edge, Safari, в Firefox пока за флагом и только на MacOS), а кроме того, выложено несколько свободно распространяемых демо-версий, следовательно, уже можно заняться изучением возможностей таких шрифтов и подготовиться к их использованию в реальной жизни.
Возможности нового формата решают сразу две проблемы: во-первых, снимаются ограничения на количество доступных начертаний: они больше не требуют отдельных файлов, а количество сочетаний ограничивается только настройками шрифта и фантазией разработчика. Во-вторых, для получения любого количества разных начертаний на страницу достаточно будет подключить всего один файл, что позволит сэкономить трафик и быстрее показывать страницы пользователю.
Настройками шрифта можно управлять с помощью CSS.
Высокоуровневые и низкоуровневые CSS-свойства
Высокоуровневые свойства удобнее, но поддержка браузерами оставляет желать лучшего, в то время как низкоуровневыми уже вполне можно пользоваться.
Для каждого низкоуровневого свойства есть наборы предопределённых настроек, но при создании шрифта есть возможность добавить свои, что позволяет автору добавить в шрифт любое количество кастомных вариаций и фич.
Доступные настройки шрифта можно воспринимать как API: можно управлять только теми, которые предопределил разработчик. Если какие-то настройки не предусмотрены, ими управлять нельзя. Следовательно, чтобы полноценно пользоваться шрифтом, нужно точно знать какие возможности в нём есть. Для определения свойств шрифта удобно использовать вот эти сервисы:
Для экспериментов можно воспользоваться шрифтами, выложенными в открытый доступ:
font-variation-settings
В значении свойства через запятую перечисляются названия вариаций и значения для них. Названия вариаций в кавычках, названия кастомных вариаций пишутся капсом.
Авторы шрифтов сами определяют диапазон доступных значений. Если задать непредусмотренное значение, оно округлится до ближайшего подходящего.
Значение по умолчанию: normal (шрифт выглядит как обычно, настройки не применяются).
opsz — оптический размер.
Параметр управляет толщиной тонких линий, их отображение может быть критически важным для читабельности при малых размерах шрифта:
Здесь хорошо видно, что для обычного текста лучше задавать значение opsz поменьше, а для заголовков можно задать и побольше, потому что на крупных размерах шрифта тонкие линии будут видны в любом случае.
В отличие от простой трансформации, при изменении ширины вертикальные линии сохраняют свою толщину, соотношения линий остаются прежними, и шрифт не выглядит искажённым:
Управление шириной глифа доступно во многих шрифтах.
Ещё одна настройка, которая встречается во многих шрифтах. Она позволяет не только обойтись одним файлом для любых вариантов жирности, но также гибко управлять её значением.
Полный список предопределённых вариаций можно найти в спецификации OpenType, там же есть подробное описание каждой из них.
Как уже упоминалось выше, при разработке шрифта авторам не обязательно ограничиваться только вариациями из спецификации, они могут добавлять свои, что позволяет делать много интересного.
Например, у шрифта Decovar есть целых 15 настроек, из которых только одна стандартная — управление весом линий, в итоге из одного шрифта можно извлечь огромное количество вариантов:
В этом случае каждый отдельный стиль текста может задаваться набором значений:
Обратите внимание, что названия кастомных меток пишутся капсом.
А у Slovic — всего одна настройка, но она позволяет плавно переключаться между предустановленными стилями:
Значения вариаций можно анимировать.
font-feature-settings
Эта настройка позволяет включить или выключить некоторые возможности шрифта, например, лигатуры или отображение цифр в старом стиле:
Если фичу нужно включить, достаточно её имени, например:
Хотя запись типа «smcp» on помогает лучше понять что происходит в коде.
Если же нужно выключить, обязательно добавлять off :
Некоторые фичи включены по умолчанию, например, разные виды лигатур: clig, liga и rlig. Подробнее можно почитать в спецификации.
Здесь приведено лишь небольшое количество возможностей, полный список с подробными описаниями есть в спецификации OpenType.
Много примеров с кодом можно найти здесь: OpenType features in CSS.
Как уже говорилось выше, font-feature-settings — это низкоуровневая настройка. Спецификация рекомендует, по возможности, использовать высокоуровневые варианты, например:
Больше вариантов можно найти в разделе спецификации Font Feature Properties.
font-feature-settings может использоваться для получения более или менее радикального варианта шрифта:
Ещё интереснее распорядился фичами автор шрифта dT Jakob Variable Concept: он сделал не только вариативный шрифт, но и слоёный, и стиль для каждого из слоёв включается с помощью лигатур:
Не уверена, что это правильное использование лигатур, но вариант, безусловно, интересный.
Использование в реальной жизни
В данный момент не все браузеры поддерживают управление вариативными шрифтами, поэтому помимо настраиваемого шрифта на страницу придётся подключать обычные. Это предлагается делать следующим образом:
Затем с помощью @supports определяется поддержка настроек браузерами и задаётся нужный шрифт:
Настраиваемые шрифты — тема богатая, и заниматься ею можно до бесконечности. По моим ощущениям, описанные в статье вопросы — только верхушка айсберга.
Я совсем недавно начала погружаться в тему, так что могла допустить ошибки и неточности. Сообщите мне о них, пожалуйста, если найдутся.
CSS Анимация с вариативным шрифтом
В процессе изучения некоторых супер-способностей CSS, моё внимание привлекли вариативные шрифты. В этой статье я покажу как их можно использовать для анимации начертания шрифта и дам краткий обзор последних дополнений CSS.
Некоторые из этих дополнений будут вам знакомы, а другие могут показаться свежими:
вариативные шрифты, подробнее об этом позже в статье.
@supports (“feature queries”) аналогичен media queries и позволяет прописать дополнительный функционал для более современных браузеров.
gap, row-gap, и column-gap расширяют возможности создания макетов с использованием Grid и Flexbox.
content-visibility или «ленивая загрузка» для HTML-элементов.
:is и :where псевдоклассы помогут снизить повторяемость.
Хотите узнать больше?
Вариативные шрифты
Это эволюция спецификации шрифтов OpenType, которая позволяет включать несколько вариантов гарнитуры (font-family) в один файл вместо того, чтобы иметь отдельный шрифт-файл для каждого отдельного начертания (ширины, веса или курсива).
Теперь можно получить доступ ко всем вариантам, содержащимся в одном шрифт-файле, через @font-face CSS ссылку:
Оси вариативности
Существуют 5 зарегистрированных осей, с четырех буквенными аббревиатурами:
Вес (wght)
Ширина (wdth)
Курсивность (ital)
Угол наклона (slnt)
Оптический размер (opsz)
и настраиваемые оси, открывающие дополнительные возможности для дизайна шрифтов.
Примечание: не все вариативные шрифты поддерживают 5 зарегистрированных осей, многие из них ограничены лишь несколькими. Поэтому, необходимо проверять спецификацию каждого шрифта перед использованием.
Доступ к зарегистрированным осям можно получить через свойство font-variation-settings, но также следует указать значение font-weight по-умолчанию чтобы обеспечить поддержку старых браузеров:
Если вы хотите узнать о преимуществах производительности и/или анатомической структуре вариативных шрифтов, проверьте эти ссылки:
Анимация с вариативным шрифтом
Немножко дизайнерской магии
Еще одна светлая сторона вариативных шрифтов заключается в том, что они предоставляют возможность дизайнерам, как Дэвид Берлоу, анимировать персонажей (в данном случае emoji):
Надеюсь, мне удалось разжечь в вас искру интереса. Я буду рада увидеть ваши анимации или другие варианты использования вариативных шрифтов.
Новая типографика для веба. Microsoft демонстрирует возможности OpenType
Microsoft опубликовала демо-страницу улучшенной типографики для формата OpenType. Это альтернативные глифы, лигатуры, кернинг, дроби, малые прописные и минускульные цифры. Эффекты видны, если наводить на текст мышкой. Демо хорошо работает только в браузерах с поддержкой OpenType, сама Microsoft рекомендует IE10+ и Firefox 8+. В других браузерах могут проявиться не все эффекты, это ещё зависит от операционной системы.
Альтернативные глифы и малые прописные
С Microsoft можно согласиться — OpenType действительно поднимает оформление текста в вебе на новый уровень, близкий к типографскому. Возможности этого формата явно превосходят @font-face.
Для каждого эффекта приводится фрагмент кода, как это реализуется в OpenType.
Малые прописные
Текст, написанный прописными буквами, сразу привлекает внимание но он очень плохо смотрится в окружении обычного текста. В этом случае можно использовать малые прописные.
Лигатуры
Лигатура — соединение двух и более букв. В типографике их можно применять для улучшения читаемости и/или структуры текста, устранения лишних промежутков, экономии места.
Цифры
Обычные маюскульные цифры лучше подходят для табличной вёрстки, а вот в тексте в эстетических целях можно использовать минускулы.
Кернинг
Избирательное изменение интервала между буквами в зависимости от их формы создаёт более читаемый, сбалансированный текст.
Дроби
Если включить эту опцию в коде, то все комбинации типа «2/3» будут автоматически сконвертированы в дроби правильного вида.
Альтернативные глифы
Дополнительные глифы можно использовать в тексте в некоторых ситуациях для визуального эффекта.
Компания Microsoft считает OpenType революционным форматом и надеется на широкую его поддержку всеми браузерами. Нужно добавить, что OpenType — формат, разработанный Microsoft и Adobe, представляет собой усовершенствованную версию формата TrueType, а срок действия патентов на TrueType недавно закончился.
Шрифты в вебе, обзор от 2016 года
Предисловие
Вступление
Загрузка
Статья была бы неполной без таблички разного поведения браузеров во время загрузки шрифтов, но я не могу себе позволить её вставить — она так часто встречается, что уже, вероятно, вызывает нервный тик.
FOIT — flash of invisible text. Сначала отрисовывается страница без текста, затем — сразу с нужным шрифтом.
FOUT — flash of unstyled text. Сначала используется один шрифт, затем — загруженный.
FOFT — некоторые выделяют такой подтип проблем, но встречается реже.
Очень хорошо описаны различные стратегии загрузки шрифтов в недавней статье от Zach Leatherman (русская версия), каждая со своими плюсами и минусами. Я же попробую дать упрощённый обзор различных вариантов: если понадобится изучить, набор ссылок будет под рукой.
@font-face без дополнительных ухищрений
Встречается часто, можно оставить всё как есть на откуп браузеру. Также плюс в том, что пользователи, скорее всего, уже привыкли к такому поведению и не замечают проблем. Минусы: разное поведение в разных браузерах, спорное поведение в некоторых случаях. В сафари и некоторых других браузерах в случае проблем загрузки шрифта может вообще ничего не отображаться длительное время..
Библиотека для определения загрузки шрифта
Общая идея: используем стандартный шрифт до загрузки, после загрузки переключаем класс на body и на всей странице включаются новые шрифты. Это похоже на стандартное поведение Internet Explorer и Edge.
Кодирование шрифта в base64
Самый разнообразный способ. Можно инлайнить шрифт прямо в основной файл стилей, грузить их асинхронно или вовсе складывать в localStorage. Для кого-то окажется неожиданным то, что после gzip размер отличается от бинарного файла совсем немного.
font-display
Новое css-свойство, которое позволяет контролировать отображение шрифтов во время загрузки. Плюсы-минусы очевидны: простота в использовании и слабая поддержка (скорее, никакая).
Это не совсем способ загрузки, а некоторая оптимизация. С помощью preload можно сократить время до окончания загрузки веб-шрифтов, попутно уменьшить вероятность foit. Браузеры на основе Blink начинают загружать шрифты только после того, как найдут текст на странице с соответствующим шрифтом, а это сильно откладывает окончательный показ страницы: нужно загрузить css, распарсить её, применить к дом-дереву и найти нужный элемент. preload указывает браузеру, что указанный ресурс стоит грузить прямо сейчас. Требуются атрибуты as, type и crossorigin.
Всё остальное
Есть ещё несколько вариаций всего перечисленного, а также вариант через JS (об этом ниже). Например, можно загрузить только одно начертание шрифта, а все остальные использовать при повторных заходах. Или сильно урезать набор используемых символов шрифта (до 5-10 кб) и положить всё это в base64. А может, на первом заходе вообще не использовать на первом заходе нестандартные шрифты, а только загружать их? Также можно не использовать шрифты, если текста почти нет: для логотипов вполне подойдёт SVG. Что выбрать? Каждый решает сам для себя, на основе дизайна, шрифта(-ов) и аудитории.
FontFace
Новое js-api позволяет загружать и использовать шрифты, не используя объявление @font-face вообще. Несколько примеров, чтобы было понятно, о чём речь:
Троеточие — не часть кода.
Проблема в том, что понять, какой формат поддерживается, напрямую нельзя. Поддержка браузерами тоже не полная, но к ней добавится Safari 10. FontFace может быть полезен при отрисовке текста через canvas, так как не придётся создавать невидимые элементы с текстом.
CSS-свойства
font-weight и font-style
font-weight — достаточно известное свойство. Часто можно увидеть bold, реже — что-то со значением в числах. Стоит отметить то, что веб всё чаще выбирается из bold/italic/bold-italic, сейчас можно увидеть всевозможные thin, light, medium (таких ключевых слов нет, но для них как раз используются числовые значения). Другой интересный вопрос — что делают браузеры, если нужного начертания нет в наличии? В случае жирного/курсивного начертания они пытаются сгенерировать глифы на основе обычной вариации шрифта.
unicode-range
Данное свойство позволяет указать список символов, которые должны быть отображены шрифтом. Это может быть полезно в качестве оптимизации — если на странице не будет символов из этого списка, шрифт не будет загружен вовсе. Также unicode-range можно использовать для стилизации отдельных символов, например, кавычек или для отображения символа рубля. Проблема может быть в поддержке этого свойства браузерами, и хотя она постепенно уходит, всё равно нужно думать: «а что, если бы unicode-range не было».
font-variant и font-feature-settings
font-variant — несколько обновлённый вариант font-feature-settings. Эти свойства позволяют задействиовать дополнительные возможности, включённые в шрифт. Например, кернинг, диагональные дроби, лигатуры и различные варианты иероглифов.
text-rendering
Свойство задумывалось как обобщённый регулятор скорости отрисовки шрифта, влияя одновременно на кернинг и лигатуры. Несмотря на свою мощность, свойство не получило значительного распространения и заслужило славу бажного и тормозного. В настоящее время имеет смысл воспользоваться font-variant и font-kerning, они дают больше контроля (если не так важна поддержка браузерами, а иначе — font-feature-settings). На самом деле, text-rendering является свойством SVG и не описано ни в одной спецификации CSS.
font-kerning
font-kerning контролирует работу кернинга (отступы между отдельными сочетаниями букв). Для включения требуется информация о кернинге внутри самого шрифта. Является более современной заменой части функционала font-feature-settings.
font-stretch
Редкоиспользуемое свойство с тяжёлой судьбой. Введённое в CSS 2 и поддержанное в Firefox 9 с Internet Explorer 9, оно было удално из CSS 2.1 и забыто до CSS 3, а не так давно было добавлено в Chrome 48. Оно позволяет использовать альтренативные начертания шрифта, более узкие или широкие.
Использование встроенных шрифтов
В OS X и iOS очень интересная ситуация с системными шрифтами. Недавно там были представлен San Francisco в качестве основного шрифта интерфейса системы. И если Helvitica Neue можно было указать прямо в font-family (хоть порой в сложном варианте), то с San Francisco такой способ был намеренно затруднён. По новой логике, чтобы разработчики не затачивались на какой-то конкретный шрифт, в таких случаях нужно использовать ключевые слова «-apple-system-*», которые поддерживаются с iOS 7. Как аналог, в десктопном хроме недавно добавили значение BlinkMacSystemFont.
В Android есть шрифт Roboto, который недоступен по своему имени. Однако можно использовать простые sans-serif, sans-serif-light, sans-serif-medium и другие.
Из-за лицензии, в общем случае нельзя просто взять и положить на свой сервер чьи-то системные шрифты. Допускается только указание их в css, так как тогда заботы о лицензии установленных в систему шрифтов ложатся на плечи пользователя.
Оптимизация
Самое простое — использовать оптимальный формат. Появившийся не так давно woff2 некоторые оценивают как лучший вариант для шрифтов, из-за примерно 30% уменьшения размера файла по сравнению с woff. Судя по caniuse — woff2 скоро будет поддерживаться в Edge и должен быть в новом Safari 10.
Другой способ — убрать неиспользуемую информацию из самого шрифта, например, лигатуры или наборы символов из неиспользуемых языков. Также есть возможность упростить сами векторные кривые символов — иногда в них слишком много точек и их можно задать проще.
Определение текущего шрифта элемента
Иногда стоит задача определения текущего шрифта элемента. В случае разработки могут помочь Chromium Developer Tools и недавно вернувшаяся панелька Fonts из Firefox. В ином случае остаётся только считать размер элемента и сравнивать его после смены значения font-family. Примерно этим занимаются FontFaceOnload и FontFaceObserver, если в браузере недоступен js-интерфейс FontFace. Почему браузеры не предоставляют для этого внятного апи? Дело в том, что отдельные символы внутри одного элемента могут быть отрисованы разными шрифтами, которые перечислен в font-family. На это может влиять упомянутый выше unicode-range и сам набор глифов шрифта.
Кросс-браузерные веб-шрифты, часть 3: дефисы, рендеринг текста и настройки шрифтов
Широкая поддержка браузером @font-face сделала чудеса для веб-типографики, позволив нам свободно использовать пользовательские шрифты везде, где мы хотим. Но разные шрифты — это еще не вся история с веб-типографикой. Есть и другие вещи, в которых Интернет уже давно слаб, например, правильная расстановка переносов длинных слов и использование функций шрифтов открытого типа, таких как лигатура и стилистические штрихи, которые часто блокируются внутри файлов шрифтов и никогда не видны при свете дня.
В этой статье мы рассмотрим некоторые из этих новых функций шрифтов CSS.
перенос
Этот раздел также можно было бы назвать как-то вроде «решение проблемы оправданного текста / длинных слов, выглядящих ужасно в текстовых столбцах»… но это тоже звучало бы действительно ужасно, поэтому я просто придерживался плана А. Короче говоря, проблема заключается в том, что что в течение многих лет не было никакого достойного способа использовать text-align: justify без того, чтобы это выглядело ужасно.
К счастью, теперь есть способы решения этой проблемы, которые работают в большинстве браузеров, которые могут быть в вашей матрице поддержки. Лучшим из них является свойство hyphens CSS3, которое добавляет, где это необходимо, типографски подходящие дефисы, давая хорошую визуальную подсказку о том, что слово продолжается на следующей строке. Это также делает попытку разбить слова, которые не совсем охватывают всю ширину столбца, эффективно уменьшая эффект рек белого пространства. Код выглядит так:
Есть и другие значения для свойства hyphens : none не отключит дефисы, если они уже были установлены где-то еще, а manual разбиение слов приведет к разрыву слов только в том случае, если в словах были установлены дефисы, использующие ‐ или персонажи.
Ниже приведена демонстрация, которую вы должны просмотреть в поддерживающем браузере :
текст-рендеринг
Свойство text-rendering предоставляет информацию движку рендеринга браузера, чтобы указать, что оптимизировать при рендеринге текста. Возможные значения:
Эти функции поддерживаются в Firefox, Chrome и Safari с перечисленными выше предостережениями.
-функция-настройка шрифта
font-feature-settings — это отличное новое свойство, которое позволяет вам контролировать использование классных альтернативных глифов, находящихся внутри ваших файлов шрифтов открытого типа (некоторые из них, так или иначе), таких как лигатуры и стилистические черты, которые в противном случае не увидели бы дневной свет
Как узнать, какие функции шрифтов доступны?
Firefox и IE11 больше не нуждаются в префиксной версии, но я оставил их в интересах старых старых версий, которые могут. Браузерам Blink и WebKit по-прежнему нужен префикс, как и IE10.
Давайте посмотрим на различные параметры, доступные в настройках шрифтов.
Лигатуры и дискреционные лигатуры
Они принимают форму стилистических соединений между соответствующими буквенными куплетами, такими как «oo» и «th».
Цифры, дроби и порядковые числа
Существует ряд различных функций открытого шрифта, которые изменяют представление чисел многими выгодными способами. Например:
Опять же, используя наш шрифт Monarcha из Fontdeck, давайте рассмотрим несколько интересных вариантов чисел.
По моему опыту, табличные цифры ( tnum ) и пропорциональные цифры ( pnum ) имеют тенденцию выглядеть очень похожими, и предполагаемый эффект очень похож. Предполагается, что табличные цифры оптимизированы для табличного отображения, что означает равномерное, разборчивое и равномерное расстояние, а пропорциональные цифры должны быть пропорционального размера.
