Эволюция типографики с переменными шрифтами: введение

Тонкий, толстый и все что между: FF Meta Variable от Monotype

Слова имеют силу, а типография - их голос

На протяжении веков шрифтом было то, как мы «слышим» то, что читаем. Также общепризнанно, что гарнитуры и типографика являются ключевым элементом брендинга, выражения, вокального диапазона. Великолепная типография влияет на понимание, настроение и смысл бесчисленными способами и является неотъемлемой частью дизайна. К сожалению, в течение многих лет после появления Интернета мы не могли применить все, кроме самого базового типографского дизайна, к онлайн-контенту. Благодаря возможности использовать реальные шрифты и функции OpenType, такие как лигатуры, конкретные наборы фигур, дроби и настоящий кернинг, типографский ландшафт значительно улучшился. Но реальность просмотра контента в Интернете диктует, что скорость является наиболее важным аспектом дизайна - поэтому мы поменялись типографским «голосовым диапазоном» для скорости страницы. Это означает меньший вес шрифта и снижение точности и качества бренда.

Из многих один (парадигма: смещен)

Переменный шрифт - это один шрифт, который действует как много
Джон Хадсон

Появление переменных шрифтов изменяет всю эту динамику. Как описывает Джон Хадсон, переменный шрифт - это один шрифт, который действует столько же: все вариации ширины и веса, уклона и даже курсива могут содержаться в одном, очень эффективном и сжимаемом файле шрифта. Более того: формат (который технически является частью спецификации OpenType 1.8) полностью расширяем. Дизайнер типов имеет полный контроль над тем, какие оси используются, их диапазоны и даже определения новых осей. В настоящее время существует 5 «зарегистрированных» осей (ширина, вес, наклон, курсив и оптический размер), но дизайнер может изменять любую ось по своему выбору. Некоторые примеры включают в себя высоту по возрастанию и спуску, текстовую оценку, даже форму засечек. Возможности практически безграничны. Удаляя барьер производительности, мы открываем дверь для более интересного и динамичного дизайна и гораздо большей способности выразить истинный голос бренда. Все это при сохранении точности самой гарнитуры: можно изменять только оси, отображаемые конструктором шрифтов. Не допускается искусственное искажение.

Веб-дизайн, заново изобретенный

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

Амперсанды от 100 до 900 гирь

Можно также использовать несколько более узкую ширину символов для заголовков или для отображения информации с высокой плотностью данных. Фактически вся типографская система может быть спроектирована пропорциональной: вес и ширина могут стать множителями при стандартных настройках основного текста. Это позволит легко масштабировать эти аспекты вместе с основной копией, если ее настройки изменяются в зависимости от размера экрана или предпочтений пользователя. Все это с сопутствующим увеличением производительности из-за меньшего количества HTTP-запросов (меньше файлов шрифтов) и общей экономии данных для загрузки (хотя это будет зависеть от используемого шрифта и сжатия).

Но хотя эти свободы позволяют нам быть более выразительными, некоторые из действительно интересных возможностей помогут трансформировать сам процесс чтения. Эта страница (ну, фактически, сама демонстрационная страница) была установлена ​​с новой версией переменного шрифта FF Meta, классического дизайна без засечек Эрика Шпикерманна, впервые выпущенного в 1991 году. Даже с единственной осью вариации (веса) обоих В романском и курсивном вариантах можно добиться замечательного диапазона голоса с огромным приростом производительности: 18 файлов и более 288 КБ заменены одним файлом размером всего 84 КБ.

Изобретенное чтение на экране

[Мета] должен делать больше, чем выглядеть красиво: он должен работать довольно усердно
Эрик Шпикерманн

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

Готов к крупным планом

Срез Garamond 18-го века в оптических размерах. Первое изображение имеет размер 6pt, второе - 72. Обратите внимание на разницу в контрасте штрихов. Это гораздо более изысканный в большем размере.

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

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

Польский и уравновешенный

С уже обсуждаемыми преимуществами дело в переменных шрифтах довольно убедительно. Но хорошая типография - это еще не все, что нужно для отличного дизайна. Диапазон осей, таких как ширина и вес, дает нам огромную свободу для использования более редакторского дизайна в сети без необходимости загружать огромное количество файловых ресурсов. А поскольку у нас уже есть эти несколько обязательных переменных шрифтов, мы можем предоставить их самим издателям контента. Представьте себе роль дизайнеров в Системе управления контентом (или CMS), где размещен веб-сайт. Этот конструктор мог бы использовать некоторые простые элементы управления, встроенные в CMS, которые позволили бы им набирать определенные заголовки или извлекать кавычки, позволяя создать совершенно новый уровень дизайна, очень похожий на то, что мы имеем в печати, без необходимости каждый раз писать собственный код.

Мы все еще можем быть на заре этой новой эры, но ее будущее, безусловно, светлое

По состоянию на май 2018 года 3 из 4 основных веб-браузеров уже поддерживают переменные шрифты, в дополнение к обеим доминирующим мобильным платформам (проверьте поддержку на caniuse.com). Имея это в виду, мы готовы начать освещать сеть сегодня.

Вот полная страница на CodePen. Взгляните на все это вместе и взгляните на CSS, который управляет им. Это включает в себя масштабируемую типографскую систему, которую я создал на основе некоторых идей, которые я узнал от Джен Симмонс и Тима Брауна, используя единицы просмотра, пользовательские свойства CSS (переменные) и множество вычислений. Вы можете просмотреть его прямо на CodePen или проверить его, встроенный ниже.

Некоторые мысли по поводу гарнитуры и проекта

Я всегда был поклонником работ Эрика Шпикерманна, и я думаю, что хронология и история Meta, Officina и Fira действительно интересны и являются для меня частью ткани цифрового дизайна за последние 25 лет. Шанс взять шрифт с такой историей и влиянием в мире дизайна и работать с ним в контексте совершенно новой технологии был действительно захватывающим. Я особенно ценил способность работать как с весом, так и курсивом как часть одного и того же файла: он действительно хорошо демонстрирует значение переменного формата шрифта.

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

Размышляя об основах набора текста, я пошел на шкалу: я хотел поиграть с крайними значениями веса и размера так, чтобы вы не видели их так часто в Интернете, поскольку большинство дизайнов более ограничены в используемых весах. В этом случае я использовал весь диапазон весов от 100 до 900 как на римском, так и на курсиве. Как только я начал получать макет, который мне понравился, мне пришло в голову, что вместо создания графики для иллюстрации возможностей было бы более интересно делать иллюстрации не типичными: выдвигать кавычки и немного данных шрифта в стиле «инфографики».

Последнее прикосновение амперсанда вверху на самом деле было вдохновлено страницей с образцами типов на сайте FontFont: есть образец глифа, который показывает все веса амперсанда, наложенного друг на друга. Первоначально у меня все они были сложены одинаково, с анимацией в цикле, но это было немного для некоторых браузеров, которые все еще используют переменные шрифты и анимацию ключевых кадров. Когда я нажал на перекрывающийся макет с опцией воспроизведения / паузы, мне понравилось, как они выглядят распростертыми (особенно на мобильных устройствах). Таким образом, я перевернул его и заставил начать статично, а затем проиграть анимацию один раз и вернуться к макету распространения / слоистости.

В целом, я действительно доволен как содержанием, так и дизайном, а также тем, как он движется и развивается на экранах разных размеров. Я надеюсь, что это послужит вдохновением и инструкцией для других.

[Monotype недавно привлекла меня к написанию и дизайну демонстрационной страницы для новой версии шрифта с переменным шрифтом классического дизайна Erik Spiekermann FF Meta. Это текст этой страницы и некоторые визуальные эффекты. Полная живая страница размещена на CodePen и встроена выше. Он открыт для всех, поэтому не стесняйтесь делать копию и играть с ней самостоятельно. Вы также можете увидеть их введение в технологию.]

Оригинальный контент размещен в моем блоге