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

Тънки, дебели и всичко между тях: FF Meta Variable от Monotype

Думите имат сила, а типографията е техният глас

От векове пишете как „чуваме“ това, което четем. По принцип се разбира, че шрифтовете и типографията са основен елемент на брандиране, изразяване и диапазон на гласа. Страхотната типография влияе на разбирането, настроението и смисъла по безброй начини и е съществена част от дизайна. За съжаление, дълги години след появата на мрежата не успяхме да приложим всичко, освен най-основното от типографския дизайн, към онлайн съдържанието. С възможността да се използват реални шрифтове и функции на OpenType - като лигатури, конкретни фигурни набори, дроби и истинско кернинг - типографският пейзаж се подобри значително. Но реалността да гледате съдържание в мрежата диктува, че скоростта е най-критичният аспект на дизайна - така че сме търгували типографски „вокален диапазон“ за скорост на страницата. Това означава по-малко тегло на шрифта и намалена вярност на марката и глас.

От много, една (парадигма: изместен)

Променливият шрифт е единичен шрифт, който действа като много
- Джон Хъдсън

Появата на променливи шрифтове променя цялата тази динамика. Както е описано от Джон Хъдсън, променливият шрифт е един-единствен шрифт, който действа толкова много: всички вариации на ширина и тегло, наклон и дори курсив могат да се съдържат в един, много ефективен и сгъваем шрифт. Нещо повече: форматът (който технически е част от спецификацията на OpenType 1.8) е напълно разширим. Типовият дизайнер има пълен контрол над това, какви оси се използват, техните диапазони и дори определянето на новите оси. В момента има 5 „регистрирани“ оси (ширина, тегло, наклон, курсив и оптично оразмеряване), но дизайнерът може да варира всяка избрана ос. Някои примери включват височината на изкачванията и спусканията, текстовата степен, дори серифната форма. Възможностите са почти неограничени. Премахвайки бариерата на производителността, ние отваряме вратата за по-интересен и динамичен дизайн и далеч по-голяма способност за изразяване на истинския глас на марката. Всичко това, като същевременно поддържате вярност на самия шрифт: само осите, изложени от дизайнера на типа, могат да бъдат разнообразни. Не се допуска изкуствено изкривяване.

Уеб дизайн, преоткрит

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

Ampersands от 100 до 900 тежести

Човек би могъл също така да използва малко по-тесни ширини от символи за заглавия или за данни с плътни данни. Всъщност цялата типографска система може да бъде проектирана така, че да бъде пропорционална: теглото и ширината могат да станат множители на стандартните настройки за копиране на тялото. Това би позволило на тези аспекти да се мащабират лесно заедно с тялото копие, ако настройките му се променят в зависимост от размера на екрана или предпочитанията на потребителя. Всичко това с придружаващо увеличаване на производителността поради по-малко HTTP заявки (по-малко файлове с шрифтове) и цялостна икономия на данни за изтегляне (макар че това ще варира според използвания шрифт и компресия).

Но докато тези свободи ни позволяват да бъдем по-изразителни, някои от наистина интересните възможности ще помогнат да трансформираме самото четене. Тази страница (добре, самата демонстрационна страница) е зададена с нова версия с променлив шрифт на FF Meta, класическият дизайн на sans-serif от Ерик Шпикерман, пуснат за първи път през 1991 г. Дори само с една ос на вариация (тегло) и на двете римски и курсивни варианти, може да се постигне чудесен диапазон на глас с огромни печалби в производителността: 18 файла и над 288k заменени с един файл само 84k.

Повторно четене на екрана

[Meta] трябва да направи повече от да изглежда доста: трябва да работи доста усилено
- Ерик Шпикерман

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

Готов за близък план

Изрезка от 18-ти век на Garamond, изрязана в оптични размери. Първото изображение е с размер 6pt, второто е на 72. Забележете разликата в контраста на удара. Много по-рафиниран е в по-големия размер.

Друга характеристика, която беше често срещана в металния тип, но изгубена при превод на фототип и цифрови, беше оптичното оразмеряване (добре, че някои дизайнери все още създават отделни оптични размери за различни диапазони, но това е рядко и малко ограничено). Не толкова често се среща на дизайни без серифи, но през последните десетилетия (в действителност, от векове), беше доста обичайно физически по-малките размери на шрифта да бъдат изрязани с малко по-тежки удари, по-отворени купи и плотове и в в някои случаи дори по-широки отвори, за да се запази четливостта. По-специално вестниците намериха това за изключително важно, за да се гарантира, че линиите не са се изгубили или буквите не са страдали твърде много от печалбата с мастило.

Оптичното оразмеряване доведе до възвръщаемост на променливите шрифтове и може да се прилага автоматично, когато е налично, или да бъде изрично зададено от уеб дизайнера или разработчика. Както бе споменато, тя не е толкова честа характеристика в шрифтове на sans-serif като този, но може да се използва за доста драматичен ефект при по-висок такт на контраст на серифите.

Полски и поази

С вече обсъжданите ползи случаят с променливите шрифтове е доста завладяващ. Но добрата типография не е всичко, което може да се направи на страхотен дизайн. Обхватът на оси като ширина и тегло ни дава огромна свобода да приемем повече редакторски дизайн в интернет, без да се налага да зареждаме прекомерен брой файлови активи. И тъй като вече разполагаме с тези няколко задължителни шрифта с променлива, възможността е да ги изложим за използване от самите издатели на съдържание. Представете си роля на дизайнерите в системата за управление на съдържанието (или CMS), където се намира уебсайтът. Този дизайнер може да използва някои прости контроли, вградени в CMS, които да им позволят да въвеждат специфични заглавия или кавички, което позволява изцяло ново ниво на дизайн, подобно на това, което имаме в печат, без да се налага всеки път да пише персонализиран код.

Може още да сме в зората на тази нова ера, но бъдещето й със сигурност е светло

Към май 2018 г. 3 от 4 основни уеб браузъри вече поддържат променливи шрифтове, в допълнение към двете доминиращи мобилни платформи (проверете поддръжката на caniuse.com). Имайки това предвид, днес сме готови да започнем да осветяваме мрежата.

Ето пълната страница в CodePen. Погледнете цялото нещо заедно и хвърлете поглед към CSS, който го управлява. Това включва мащабираща типографска система, която създадох въз основа на някои идеи, които научих от Джен Симънс и Тим Браун, използвайки единици за оглед, потребителски свойства на CSS (известни още като променливи) и много изчисления. Можете да го видите директно на CodePen или всъщност да го проверите вграден по-долу.

Някои мисли за шрифта и проекта

Винаги съм почитател на работата на Ерик Шпикерман и мисля, че хронологията и историята на Meta, Officina и Fira са наистина интересни и са много част от тъканта на дигиталния дизайн за мен през последните 25 години. Шансът да вземете шрифт с този вид история и въздействие в света на дизайна и да работите с него в контекста на съвсем нова технология беше наистина вълнуващ. Особено ценя, че мога да работя както с тегло, така и с курсив като част от един и същ файл: той показва стойността на формата на променливия шрифт наистина добре.

Реших дори да не започвам да проектирам страницата, докато не напиша самата статия. Исках да напиша едно добро въведение, насочено към дизайнерите и собствениците на търговски марки, за да ги запозная с предимствата на променливите шрифтове по отношение, които да отговарят на техните притеснения: дизайн език и израз на марката. След като усетих, че имам добра чернова, добавих малко по-специфична за самия шрифт и мястото му в нашия дизайнерски лексикон. Това ми даде няколко идеи как да покажа както шрифта, така и историята.

Размишлявайки за основния набор, аз се спрях на мащаба: Исках да играя с крайно тегло и размер по начини, които не виждате толкова често в интернет, тъй като повечето дизайни са по-ограничени в използваните тегла. В този случай използвах цяла гама от тежести от 100 до 900 както в римски, така и в курсив. След като започнах да получавам оформление, което харесвах, ми хрумна, че вместо да правя графики, които да илюстрират възможностите, ще бъде по-интересно да направя илюстрации от типа: издърпайте кавички и малко данни за шрифтове в стил „инфографики“.

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

Като цяло съм наистина доволен както от съдържанието, така и от дизайна и харесвам как се движи и развива в различни размери на екрана. Надявам се да служи като вдъхновение и инструкция и за другите.

[Monotype наскоро ме ангажира да напиша и проектирам демонстрационна страница, за да представя нова версия на шрифта с променлив шрифт на класическия дизайн на Erik Spiekermann FF Meta. Това е текстът на тази страница и някои от визуалните изображения. Пълната страница на живо се хоства на CodePen и е вградена по-горе. Той е отворен за всички, така че не се колебайте сами да си направите копие и да играете с него. Можете да видите и тяхното запознаване с технологията.]

Оригинално съдържание, публикувано в моя блог