Еволюція типографії зі змінними шрифтами: вступ

Тонкі, товсті, і все між ними: FF Meta Variable від Monotype

Слова мають силу, а типографія - це їхній голос

Протягом століть друкуйте, як ми чуємо те, що читаємо. Також загальновідомо, що шрифти та типографія є основним елементом брендингу, вираження, діапазону голосу. Велика типографія незмінно впливає на розуміння, настрій та сенс і є важливою частиною дизайну. На жаль, протягом багатьох років після появи в Інтернеті нам не вдалося застосувати до онлайнового контенту все, крім самого основного типографічного дизайну. Завдяки можливості використовувати реальні шрифти та функції OpenType - наприклад, лігатури, конкретні набори фігур, дроби та справжнє кернінг - типографічний пейзаж надзвичайно покращився. Але реальність перегляду вмісту в Інтернеті диктує, що швидкість є найважливішим аспектом дизайну - тому ми торгуємо типографічним "вокальним діапазоном" для швидкості сторінки. Це означає меншу вагу шрифту та зменшення чіткості та голосу бренду.

З багатьох, одна (парадигма: зміщена)

Змінна шрифт - це єдиний шрифт, який діє як багато
- Джон Хадсон

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

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

Хоча технологія все ще дозріває і дизайнери типів працюють над тим, щоб стати більш вільним у новому способі роботи, обіцянка щодо дизайну в Інтернеті є першочерговою. Типовим сценарієм буде обмеження будь-якого даного дизайну 3–5 різними шрифтами, щоб представити кожен аспект мови дизайну та голосу сайту, включаючи кожну перестановку для копії та заголовків. При його найпростішому застосуванні змінні шрифти дають нам свободу використовувати різні ваги для кожного рівня заголовка - значно збільшуючи їх чіткість і читабельність.

Амперсанди від 100 до 900 ваг

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

Але хоча ці свободи дозволяють нам бути більш виразними, деякі справді цікаві можливості допоможуть трансформувати сам досвід читання. Ця сторінка (ну сама фактична демонстраційна сторінка) була встановлена ​​новою версією змінної шрифта FF Meta, класичний дизайн sans-serif Еріка Шпікермана вперше випущений у 1991 році. Навіть із лише однією віссю зміни (ваги) обох Романський і курсивний варіанти, чудовий діапазон голосу може бути досягнутий з величезним збільшенням продуктивності: 18 файлів і понад 288k замінено на один файл лише 84k.

Повторне читання на екрані

[Meta] має зробити більше, ніж виглядати красиво: він повинен працювати досить важко
—Ерік Шпікерман

Деякі з найбільших проблем у створенні гарного досвіду читання пов'язані з відсутністю тонкості пропорційно та тонких деталей. Поєднання сучасних функцій та варіантів CSS та OpenType представляє потужне поєднання. Можливість встановити такі функції, як лігатури та переноси на основі мови, увімкнути чи вимкнути переноси залежно від розміру екрана та навіть адаптувати ширину символів на найменших екранах, щоб розмістити більше символів на рядок, не зменшуючи розмір шрифту, можна зробити суттєві покращення в плавність і комфортність читання.

Готові до великого плану

Розріз 18-го століття Гарамонда вирізав оптичними розмірами. Перше зображення має розмір 6pt, друге - 72. Зверніть увагу на різницю контрастності обведення. Він значно вишуканіший у великих розмірах.

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

Оптичний розмір призвів до повернення змінних шрифтів і може бути автоматично застосований, якщо є, або встановити явно веб-дизайнером або розробником. Як уже згадувалося, вона не є такою частою особливістю у шрифтах типу "sans-serif", як цей, але вона може бути використана для досить драматичного ефекту в конструкціях із зависокою контрастністю з високим обведенням.

Польська і пуас

Оскільки переваги вже обговорювалися, випадок змінних шрифтів є досить переконливим. Але хороша типографія - це не все, що стосується чудового дизайну. Діапазон осей, таких як ширина і вага, дають нам величезну свободу вживати більше редакційного дизайну в Інтернеті, не потребуючи завантаження непомірної кількості файлових ресурсів. А оскільки у нас уже є декілька необхідних змінних шрифтів, є можливість викрити їх для використання самими видавцями вмісту. Уявіть собі роль дизайнерів у системі управління вмістом (або CMS), де розміщений веб-сайт. Цей дизайнер міг би використовувати кілька простих елементів управління, вбудованих в CMS, які дозволять їм набирати конкретні заголовки або витяги, що дозволяє абсолютно новий рівень дизайну, як і те, що ми маємо в друку, без необхідності писати спеціальний код кожен раз.

Ми все ще можемо бути на світанку цієї нової ери, але це майбутнє, безумовно, світле

Станом на травень 2018 року 3 з 4 основних веб-браузерів вже підтримують змінні шрифти, крім обох домінуючих мобільних платформ (перевірити підтримку на caniuse.com). Зважаючи на це, ми готові розпочати освітлення Інтернету вже сьогодні.

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

Деякі думки щодо шрифту та проекту

Я завжди був шанувальником роботи Еріка Шпікермана, і я вважаю, що хронологія та історія "Мета", "Офішини" та "Фіри" - справді цікава, і дуже важлива частина тканини цифрового дизайну для мене за останні 25 років. Шанс взяти шрифт з такою історією та впливом у світі дизайну та попрацювати з ним у контексті абсолютно нової технології був справді захоплюючим. Я особливо вдячний за те, що можна працювати з вагою та курсивом як частина одного файлу: він дуже добре демонструє значення змінного формату шрифту.

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

Розмірковуючи про основний набір тексту, я пішов на масштаб: я хотів грати з крайністю ваги та розміру способами, які ви не бачите так часто в Інтернеті, оскільки більшість конструкцій більш обмежені у використанні ваг. У цьому випадку я використав цілу гаму ваг від 100 до 900 як в римській, так і в курсивній формі. Як тільки я почав отримувати вподобаний макет, мені спало на думку, що замість того, щоб робити графіку для ілюстрації можливостей, було б цікавіше зробити ілюстрації нетиповими: витягнути цитати та трохи даних шрифту в стилі «інфографіки».

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

В цілому я дуже задоволений як вмістом, так і дизайном, і мені подобається, як він рухається і розвивається в різних розмірах екрана. Я сподіваюсь, що це послужить натхненням та настановою і для інших.

[Нещодавно Monotype змусив мене написати та розробити демонстраційну сторінку, щоб представити нову версію шрифту змінної класичного дизайну Еріка Шпікермана FF Meta. Це текст цієї сторінки та деякі образи. Повна сторінка в реальному часі розміщується на CodePen та вбудовується вище. Він відкритий для всіх, тому сміливо робіть копію та грайте з нею самостійно. Ви також можете ознайомитись із їх впровадженням у технологію.]

Оригінальний вміст, розміщений у моєму блозі