• Главная
  • Карта сайта
Не найдено

Вариативные шрифты (variable fonts)

Опубликовано: 01.09.2018

видео Вариативные шрифты (variable fonts)

Работаем с параметрами шрифтов в HTML. Изучаем шрифты и работу с ними.

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



В сентябре 2016 года на конференции ATypI была представлена новая версия формата OpenType под названием «ОпенТайп Вариативность» ( OpenType Font Variables , или OT1.8), открывающая новую эпоху цифрового шрифта. Если вкратце, это технология, благодаря которой один-единственный шрифтовой файл ведет себя как бесконечное множество начертаний. То есть файл один, а информации в нём на целое шрифтовое семейство, каким бы сложным оно ни было, — главное, чтобы всё интерполировалось. Осей интерполяции при этом может быть сколько угодно — насыщенность, пропорции, контраст, изменение размера строчных/выносных, анимация, наконец, — дизайн всего шрифта может видоизменяться бесконечно.


Выпуск №126

Axis-Praxis это онлайн визуализатор возможностей вариативных шрифтов. Проект Лоренса Пиннея (Laurence Penney)

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


Создание вариативного товара в WooCommerce

Zeitung — проект голландской студии Underware, предоставляющей своим покупателям специальный экстеншн к программам Адобе, позволяющий управлять вариативностью шрифта Zeitung

Огромная вариативность одного-единственного шрифтового файла — это не только удобство, но и экономия — размеров и времени. Допустим, ваш сайт использовал три начертания шрифта — теперь вам понадобится всего один файл. На уровне запросов к серверу это тоже приводит к экономии — всего один запрос там, где раньше было три. Шрифтовые дизайнеры, знакомые с интерполяцией давно, понимают, что две оси интерполяции — это 1000 на 1000 вариантов, то есть миллион вариантов, к примеру, насыщенности и пропорции. Дополнительная ось превращает миллион в миллиарды и так далее. И всё в одном файле. Раньше шрифтовым дизайнерам приходилось строить файлы для десятков начертаний, теперь будет один файл. В этом бесконечном пространстве интерполяционных возможностей шрифтовой дизайнер сможет указать, какие позиции (named instances) какими начертаниями считать.

В спецификации «ОпенТайп-вариативностей» пять самых распространённых осей заложены в четырёхбуквенные тэги (следующие примеры взяты из статьи Ричарда Руттера (Richard Rutter) «Get started with variable fonts»): насыщенность — wght , пропорция — wdth , курсивность — ital , наклон — slnt и оптические размеры — opsz . Эти шрифтовые вариативности могут быть включены с помощью font-weight- , font-stretch- и font-style- свойств. CSS4 также обновился с новыми значениями для поддержки «ОпенТайп-вариативности»:

font-weight — это любое целое число в диапазоне от 1 до 999 (вместо 100 в стандарте CSS3).

font-stretch использует процент, где 100% — это нормальная пропорция, 50% — узкие начертания, а 200% — сверхширокие.

font-style использует угол наклона между oblique –90deg и oblique 90deg.

font-optical-sizing — новая опция, с синтаксисом либо auto, либо none,включающая ось оптических компенсаций, если она заложена в шрифте.

Шрифтовые дизайнеры могут использовать и свои собственные четырёхбуквенные тэги — это позволяет им закладывать в шрифт бесконечную вариативность: контраст, размер строчных и выносных элементов, форму засечек, фактуры, небольшие детали, росчерки. Используя синтакс, подобный font-feature-settings , кастомизированные оси, так же как и созданные заранее, доступные через font-variation-settings -свойства. Вот пример того, как это выглядело бы в случае очень широкого начертания, лёгкого по насыщенности и оптимизированного под 48-й кегль:

h2 { font-variation-settings: “wdth” 600, “wght” 200, “opsz” 48; }

Как и обычный OpenType-шрифт, новый вариативный шрифт может быть использован как веб-шрифт (ttf) или компактный веб-шрифт (woff). Так же как и с обычными веб-шрифтами, тут вам потребуется конструкция @font-face,в которой вы зададите format или woff-variations или ttf-variations. Для браузеров, которые не поддерживают вариативные шрифты, вы можете прописать вот такие инструкции:

@font-face { font-family: ‘Nicefont’; src: url (‘nicefont_var.woff2’) format (‘woff-variations’); src: url (‘nicefont_regular.woff2’) format (‘woff2’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘Nicefont’; src: url (‘nicefont_var.woff2’) format (‘woff-variations’); src: url (‘nicefont_black.woff2’) format (‘woff2’); font-weight: 800; font-style: normal; }

Эта новая технология теоретически способна перевернуть мир дизайна. Но есть ряд обстоятельств, от которых это будущее зависит. Самая главная проблема — поддержка нового формата операционными системами, браузерами и софтом. Поводом для оптимизма может служить то, что OT1.8 стал результатом сотрудничества Apple, Microsoft, Adobe и Google, которые пообещали уже в начале 2018 года внедрить техническую поддержку формата в свои продукты. С другой стороны, неясно, насколько эта технология заинтересует графических и веб-дизайнеров. Всё же управление вариативным шрифтом требует чуть больших знаний в области шрифтового дизайна, да и многотысячная вариативность, возможно, не каждому дизайнеру понравится — количество последователей Массимо Виньелли и его принципиального самоограничения в шрифтовой палитре достаточно велико.

Красивая визуализация принципов Массимо Виньелли с беханс-страницы Каран Патель (Karan Patel)

Но и с точки зрения шрифтовой индустрии предстоит продумать многое: от инструментария до ценовой политики. До сих пор на рынке присутствовали два вида шрифтовых продуктов: отдельные начертания (в среднем по 50–150 долларов) и полные шрифтовые семейства (в среднем 500–750 долларов за семью). И по какой цене теперь продавать вариативный шрифт? По цене семейства или по цене самостоятельного начертания? Многое ещё неясно, но можно с уверенностью сказать, что так или иначе шрифтовая революция случилась, готовы мы к ней или нет.

Так выглядит вариативная покупка, созданная нами для шрифта BigCity Grotesque Pro

Для тех, кто хотел бы узнать больше:

— OpenType 1.8.1 Announcement — статья Джона Хадсона (John Hudson, дизайнер шрифта, Tiro Typeworks),

— вот здесь полная спецификация OpenType 1.8.1 Specification,

— а это полный рассказ Тома Рикнера (Tom Rickner, супервайзер появления формата TrueType в компании Apple) о том, какой путь технология проделала от TrueType GX до Variable Fonts:

Part 1: from TrueType GX to Variable Fonts by Tom Rickner

Part 2: from TrueType GX to Variable Fonts by Tom Rickner

— Вот тут недавний рассказ технического директора Monotype Боба Тейлора (Bob Taylor).

— Вот здесь в твиттере известный веб-дизайнер Ник Шерман (Nick Sherman) собирает все упоминания и новости о формате.

— Пошаговая инструкция для шрифтовых дизайнеров по созданию вариативных шрифтов.

Источник

Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.сетях через сервис ниже.

Похожие материалы:

Автор публикации

не в сети 2 дня

admin

создание сайтов, seo, smm

Комментарии: 50 Публикации: 491 Регистрация: 06-11-2011
Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss