Еволуција типографије са променљивим фонтовима: увод

Танка, густа и све између тога: ФФ Мета Вариабле од Монотип

Речи имају моћ, а типографија је њихов глас

Вековима се уписује начин на који „чујемо“ оно што читамо. Такође се опште разуме да су типографија и типографија основни елемент брендирања, изражавања, распона гласа. Сјајна типографија на безброј начина утиче на разумевање, расположење и значење и битан је део дизајна. Нажалост, дуги низ година након појаве веба, нисмо били у могућности да применимо све, осим најосновније, типографског дизајна на мрежни садржај. Уз могућност коришћења стварних фонтова и ОпенТипе функција - попут лигатура, специфичних скупова фигура, фракција и истинског кернинга - типографски пејзаж се изузетно побољшао. Али стварност гледања садржаја на вебу диктира да је брзина најважнији аспект дизајна - тако да смо трговали типографским „распоном гласа“ за брзину странице. То значи мању тежину фонта и смањену вјерност и глас.

Од многих, један (парадигма: смењен)

Променљиви фонт је један фонт који делује подједнако
- Јохн Худсон

Појава променљивих фонтова мења ту целу динамику. Као што је описао Јохн Худсон, варијабилни фонт је један фонт који делује толико: све варијације ширине и тежине, нагиба, па чак и курзив могу бити садржане у једној датотеци фонта, високог степена ефикасности и стисљивости. Штавише: формат (који је технички део спецификације ОпенТипе 1.8) је у потпуности проширив. Дизајнер типова има потпуну контролу над кориштеним осовинама, њиховим дометима, па чак и дефиницијом нових осе. Тренутно постоји 5 'регистрованих' осовина (ширина, тежина, нагиб, кос и оптичка величина), али дизајнер може да мења било коју осовину коју одабере. Неки примери укључују висину успона и силаза, текстуални степен, чак и серифни облик. Могућности су готово неограничене. Уклањањем препрека за перформансе отварамо врата за занимљивији и динамичнији дизајн и далеко већу способност изражавања правог гласа марке. Све то уз одржавање верности самом типографском слоју: могу се мењати само осе које је изложио дизајнер типа. Није дозвољено вештачко изобличење.

Веб дизајн, поново осмишљен

Иако технологија још увек сазрева и дизајнери типа раде на томе да постану течнији у овом новом начину рада, обећања за дизајн на вебу су револуционарна. Типичан сценарио био би ограничити сваки дани дизајн на 3–5 различитих фонтова који представљају сваки аспект дизајнерског језика и гласа сајта - укључујући сваку пермутацију за копију тела и заглавља. У својој најједноставнијој примени, променљиви фонтови дали би нам слободу да користимо различите пондере за сваки ниво наслова - значајно повећавајући њихову јасноћу и читљивост.

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

Могло би се користити и мало ужа ширина знакова за наслове или на приказима података који обилују подацима. У ствари, цео типографски систем могао би бити пројектован тако да буде пропорционалан: тежина и ширина могу постати мултипликатори у стандардним подешавањима копије на кућишту. То би омогућило да се ти аспекти лако скалирају заједно са копијом тела ако се његове поставке промијене на основу величине екрана или корисничких преференција. Све то уз пратеће повећање перформанси због мање ХТТП захтева (мањи број фонт датотека) и свеукупне уштеде података за преузимање (мада ће то варирати у зависности од коришћења фонта и компресије).

Но, иако нам ове слободе омогућавају да будемо изражајнији, неке од заиста занимљивих могућности помоћи ће трансформацији самог искуства читања. Ова страница (добро, стварна демо страница) је постављена новом верзијом варијабилног фонта ФФ Мета, класични санс-сериф дизајн Ерика Спиекерманна, први пут објављен 1991. Чак и са само једном осе варијације (тежине) обе римске и курзивне варијанте, предиван распон гласа може се постићи огромним добитком перформанси: 18 датотека и више од 288к замењено је једном датотеком од само 84к.

Обновљено читање на екрану

[Мета] мора више него што изгледа лепо: мора се прилично радити
—Ерик Спиекерманн

Неки од највећих изазова у стварању доброг искуства читања вежу се уз недостатак прецизности у сразмери и финих детаља. Комбинација модерних ЦСС и ОпенТипе функција и варијација представља моћну комбинацију. Ако будете могли да постављате функције као што су лигатуре и цртице на основу језика, укључивање и искључивање хифенације на основу величине екрана, па чак и прилагођавање ширине знакова на најмањим екранима како би се уклопило више знакова по линији без смањења величине фонта може се драматично побољшати у глаткоћа и удобност искуства читања.

Спремни за крупни план

Гарамондови рез из 18. века у оптичким величинама. Прва слика је величине 6пт, друга 72. Имајте на уму разлику контраста хода. У великој је величини много рафинираније.

Друга карактеристика која је била уобичајена у металном типу, али која се изгубила у преводу на фото-подешавање и дигитално, било је оптичко димензионирање (добро, неки дизајнери и даље стварају одвојене оптичке величине за различите домете, али то је ретко и донекле ограничено). Не тако често на санс-сериф дизајну, али у деценијама прошлости (истина, вековима), прилично је уобичајено да се физички мање величине слоја за писаче сече са мало тежим потезима, отворенијим посудама и шалтерима и У неким случајевима су и шири отвори како би се сачувала читљивост. Новине су нарочито сматрале ово критичним како би се осигурало да се линије не изгубе или слова не претрпе превише од појачања мастила.

Оптичка величина донијела је поврат у промјењивим фонтима и може се аутоматски примијенити тамо гдје је то доступно или их експлицитно поставити веб дизајнер или програмер. Као што је већ поменуто, она није тако честа карактеристика у санс-сериф типовима попут овог, али се може користити за прилично драматичан ефекат у дизајном серифи са високим ходом.

Пољски и дрвени

Уз предности које смо већ расправљали, случај променљивих фонтова прилично је упечатљив. Али добра типографија није све што је од сјајног дизајна. Распон оси попут ширине и тежине дају нам огромну слободу да пригрлимо више уредничког дизајна на вебу без потребе за учитавањем претјерано великог броја датотека. А пошто већ имамо тих неколико потребних променљивих фонтова, прилика је да их изложимо на употребу сами издавачи садржаја. Замислите улогу дизајнера унутар система за управљање садржајем (или ЦМС) у коме је веб локација смештена. Тај дизајнер могао би користити неке једноставне контроле уграђене у ЦМС које би им омогућиле да упишу одређене наслове или потешкоће, омогућавајући потпуно нови ниво дизајна сличан ономе што имамо у испису, без потребе да сваки пут напишу прилагођени код.

Можда смо још у зору ове нове ере, али будућност је свакако светла

Од маја 2018. године 3 од 4 главна веб претраживача већ подржавају променљиве фонтове, поред обе доминантне мобилне платформе (проверите подршку на цаниусе.цом). Имајући то у виду, данас смо спремни да започнемо осветљавање интернета.

Ево пуне странице на ЦодеПен-у. Погледајте целу ствар заједно и погледајте ЦСС који га покреће. Ово укључује типографски систем скалирања који сам створио на основу неких идеја које сам научио од Јен Симмонс и Тима Бровн-а, користећи јединице прегледа, ЦСС прилагођене особине (ака променљиве) и пуно прорачуна. Можете га директно погледати на ЦодеПен-у или га заиста угледати у доњем делу.

Неке мисли о писаном облику и пројекту

Одувек сам био љубитељ дела Ерика Спиекерманна и мислим да су хронологија и историја Мета, Оффицине и Фира заиста занимљиви, и веома је део тканине дигиталног дизајна за мене у последњих 25 година. Шанса да се унесе дизајн са таквом историјом и утицајем у свету дизајна и да се с њим сарађује у контексту потпуно нове технологије била је заиста узбудљива. Посебно сам ценио то што могу да радим и са тежином и са пошевницом као у истој датотеци: она заиста добро показује вредност формата варијабилног фонта.

Одлучио сам да не кренем ни у дизајнирање странице док не напишем чланак. Желео сам да напишем добар увод усмерен на дизајнере и власнике брендова како бих их упознао са предностима променљивих фонтова у смислу који ће одговарати њиховим проблемима: дизајнерском језику и изразу бренда. Једном када сам осетио да имам добру скицу, додао сам мало прецизнији сам фонт и његово место у нашем лексикону о дизајну. Ово ми је дало неколико идеја о томе како приказати и фонт и историју.

Размишљајући о основном подешавању текста, кренуо сам у скале: Желео сам да се играм са екстремним тежинама и величинама на начине које не виђате често на вебу, јер је већина дизајна ограничена у тежини која се користи. У овом случају користио сам читав низ утега од 100 до 900 како у римском тако и у курзиву. Једном када сам почео да добијам изглед који ми се допао, пало ми је на памет да би уместо прављења графике за илустрацију могућности било занимљивије направити илустрације необичне: повуци цитате и мало података о фонту стила „инфографског“.

Последњи додир ампера и врха заправо је инспирисан страницом са примерцима типа на веб локацији ФонтФонт: постоји узорак за испитивање глифа који показује сву тежину ампера и слојевитог слоја један на другог. Првобитно сам их све слагао на исти начин, са анимацијом у петљи - али то је било помало за неке прегледаче који још увек примењују променљиве фонтове и анимацију кључних оквира. Кад сам ударио у преклапајући изглед с опцијом репродукције / паузе, свидио ми се начин на који су изгледали раширени (посебно на мобилном уређају). Па сам га преокренуо и натерао да почне статички, а затим једном репродуцирам анимацију и вратим се на распоређени / слојевити изглед.

Све у свему заиста сам задовољан и садржајем и дизајном и волим како се креће и развија у различитим величинама екрана. Надам се да ће послужити као инспирација и поука и другима.

[Монотип ме недавно ангажовао да напишем и дизајнирам демонстрацијску страницу која ће представити ново издање варијабле фонта класичног Ерик Спиекерманн дизајна ФФ Мета. Ово је текст те странице и неки од визуала. Комплетна страница уживо се налази на ЦодеПен-у и уграђује се изнад. Отворен је за све, па слободно направите копију и играјте се сами. Можете видети и њихово упознавање са технологијом.]

Оригинални садржај објављен на мом блогу