Typografian kehitys muuttuvilla kirjasimilla: johdanto

Ohut, paksu ja kaikki väliin jäävä: FF Meta Variable monotypestä

Sanoilla on voimaa, ja typografia on heidän äänensä

Tyyppi on vuosisatojen ajan ollut sitä, kuinka "kuulemme" lukemiamme. Yleisesti ymmärretään myös, että kirjasintyypit ja typografia ovat brändäyksen, ilmaisun ja laulualueen ydinosa. Suuri typografia vaikuttaa ymmärrykseen, tunnelmaan ja merkitykseen lukemattomilla tavoilla ja on olennainen osa suunnittelua. Valitettavasti monien vuosien ajan verkon tulon jälkeen emme pystyneet soveltamaan kaikkea muuta kuin tyypillistä muotoilua paitsi kaikkein perusteellisinta online-sisältöön. Mahdollisuus käyttää oikeita fontteja ja OpenType-ominaisuuksia - kuten ligatuurit, erityiset kuvasarjat, fraktiot ja todellinen kerning - typografinen maisema parani huomattavasti. Mutta tosiasia, että web-sisällön katselu määrää, että nopeus on suunnittelun kriittisin osa - joten olemme vaihtaneet sivunopeudelle typografista ”äänirataa”. Tämä tarkoittaa vähemmän fonttipainoja ja vähentää brändin uskollisuutta ja ääntä.

Monista yksi (paradigma: siirretty)

Muuttuva fontti on yksi fontti, joka toimii yhtä monta
- John Hudson

Muuttuvien kirjasinten tulo muuttaa koko dynaamisen. Kuten John Hudson on kuvaillut, muuttuva fontti on yksi fontti, joka toimii niin monta: kaikki leveyden ja painon variaatiot, viistot ja jopa kursivoidut voivat sisältyä yhteen, erittäin tehokkaaseen ja pakattavaan fonttitiedostoon. Lisäksi: muoto (joka on teknisesti osa OpenType 1.8 -määritystä) on täysin laajennettavissa. Tyyppisuunnittelijalla on täysi hallinto käytettävistä akseleista, niiden alueista ja jopa uusien akseleiden määrittelystä. Tällä hetkellä on 5 rekisteröityä akselia (leveys, paino, vino, kursivoitu ja optinen koko), mutta suunnittelija voi muuttaa mitä tahansa akselia. Joitakin esimerkkejä ovat nousevien ja laskeutuvien korkeus, tekstiluokka, jopa serifin muoto. Mahdollisuudet ovat lähes rajattomat. Poistamalla suorituskyvyn este avaamme oven mielenkiintoisemmalle ja dynaamisemmalle suunnittelulle ja huomattavasti paremmalle kyvylle ilmaista brändin todellinen ääni. Kaikki tämä säilyttäen uskollisuuden itse kirjasintyypille: vain tyyppisuunnittelijan paljastamat akselit voivat vaihdella. Keinotekoisia vääristymiä ei sallita.

Verkkosuunnittelu, keksitty uudelleen

Vaikka tekniikka on vielä kypsymässä ja tyyppisuunnittelijat työskentelevät tullakseen sujuvammaksi tällä uudella työskentelytavalla, verkkosivujen suunnittelulupaus on uraauurtava. Tyypillinen skenaario olisi rajoittaa kaikki annetut mallit 3–5 kirjasimeen, jotta ne edustavat sivuston suunnittelukielen ja äänen kaikkia näkökohtia - mukaan lukien jokainen permutaatio kappalekappaleista ja otsikoista. Yksinkertaisimmalla toteutuksellaan muuttuvat fontit antaisivat meille vapauden käyttää erilaisia ​​painoja jokaiselle otsikkotasolle - lisäämällä selkeyttä ja luettavuutta huomattavasti.

Voidaan käyttää 100–900 painoa

Otsikoissa tai datatiheisissä tietojen näytöissä voitaisiin käyttää myös hieman kapeampaa merkkileveyttä. Itse asiassa koko typografinen järjestelmä voitaisiin suunnitella suhteelliseksi: painosta ja leveydestä voi tulla kertoimia normaaleissa kappalekopioissa. Näin toimimalla nämä näkökohdat voidaan skaalata helposti kappaleen mukana, jos sen asetukset muuttuvat näytön koon tai käyttäjän mieltymysten perusteella. Kaikki tämä ja siihen liittyvä suorituskyvyn lisääntyminen johtuen vähemmän HTTP-pyynnöistä (vähemmän fonttitiedostoja) ja ladattavien tietojen kokonaissäästöistä (tosin tämä vaihtelee fontin ja käytetyn pakkauksen mukaan).

Mutta vaikka nämä vapaudet antavat meille mahdollisuuden olla ilmaisullisempia, jotkut todella mielenkiintoisista ominaisuuksista auttavat muuttamaan itse lukemiskokemusta. Tämä sivu (hyvin, itse demosivu) on asetettu uudella muuttuvalla fonttiversiolla FF Meta, Erik Spiekermannin klassinen sans-serif-muotoilu, joka julkaistiin ensimmäisen kerran vuonna 1991. Vaikka kummallakin vain yksi variaatioakseli (paino) roomalaisista ja kursivoiduista vaihtoehdoista voidaan saavuttaa upea äänivalikoima massiivisilla suorituskyvyn parannuksilla: 18 tiedostoa ja yli 288 kt korvataan yhdellä vain 84 kt tiedostolla.

Uudelleen keksitty lukeminen näytöllä

[Meta] on tehtävä enemmän kuin näyttää kauniilta: sen on toimittava melko kovasti
—Erik Spiekermann

Jotkut suurimmista haasteista hyvän lukemiskokemuksen luomisessa liittyvät hienoisuuden puutteeseen suhteellisuudessa ja hienoihin yksityiskohtiin. Modernien CSS- ja OpenType-ominaisuuksien ja muunnelmien yhdistelmä tarjoaa tehokkaan yhdistelmän. Kyky asettaa piirteitä, kuten ligatuurit ja tavutukset kielen perusteella, kytkeä tavutus päälle ja pois näytön koon perusteella ja räätälöidä jopa merkkien leveys pienimmissä näytöissä, jotta mahtuu enemmän merkkejä riviä kohden pienentämättä fonttikokoa, voi tehdä dramaattisia parannuksia lukukokemuksen sujuvuus ja mukavuus.

Valmis lähikuvaan

1700-luvun Garamond-leikkaus optisessa koossa. Ensimmäinen kuva on kooltaan 6pt, toinen on 72. Huomaa ero iskun kontrastissa. Suurempi koko on hienostunut.

Toinen ominaisuus, joka oli yleinen metallityypissä, mutta joka hävisi käännöksessä valokuvasisällöksi ja digitaaliseksi, oli optinen koonmuutos (hyvin, jotkut suunnittelijat luovat silti erillisiä optisia kokoja eri alueille, mutta se on harvinaista ja hieman rajoitettua). Ei niin usein kuin sans-serif-malleissa, mutta vuosikymmenien aikana (totuus, vuosisatojen ajan) oli melko yleistä, että kirjasimen fyysisesti pienemmät koot leikattiin hieman raskaammilla iskuilla, avoimemmilla kulhoilla ja tiskillä, ja Joissakin tapauksissa jopa laajemmat aukot luettavuuden säilyttämiseksi. Erityisesti sanomalehdet pitivät tätä kriittisenä varmistaakseen, että linjat eivät eksy tai kirjeet eivät kärsi liian suuresti musteen lisäyksestä.

Optinen koko on palauttanut muuttuvat fontit, ja niitä voidaan käyttää automaattisesti, jos käytettävissä, tai asettaa Web-suunnittelija tai kehittäjä nimenomaisesti. Kuten mainittiin, se ei ole yhtä yleinen ominaisuus sans-serif-kirjasintyypeissä, kuten tämä, mutta sitä voidaan käyttää melko dramaattisessa vaikutuksessa korkeamman vetokontrastiisen serif-mallissa.

Puolalainen ja kohtelias

Jo etukäteen keskusteltujen etujen vuoksi muuttuvien kirjasinten tapaus on melko pakottava. Mutta hyvä typografia ei ole vain hienoa suunnittelua. Akselivalikoima, kuten leveys ja paino, antaa meille valtavan vapauden omaksua enemmän toimituksellista suunnittelua verkossa joutumatta lataamaan kohtuuttoman määrää tiedostovarastoja. Ja koska nämä harvat vaadittavat muuttuvat fontit ovat jo käytössä, mahdollisuus on paljastaa ne sisällön kustantajien käyttöön. Kuvittele suunnittelijoiden rooli sisällönhallintajärjestelmän (tai CMS) sisällä, jossa verkkosivusto sijaitsee. Suunnittelija voisi käyttää joitain yksinkertaisia ​​hallintalaitteita, jotka on rakennettu CMS: ään, jonka avulla he voivat kirjoittaa tiettyjä otsikoita tai lainausmerkkejä, mikä mahdollistaa aivan uuden suunnittelutason samalla tavalla kuin mitä meillä on painettu, joutumatta kirjoittamaan mukautettuja koodeja joka kerta.

Saatamme olla vielä tämän uuden aikakauden kynnyksellä, mutta sen tulevaisuus on varmasti valoisa

Toukokuusta 2018 alkaen 3 neljästä suurimmasta selaimesta tukee jo muuttuvia fontteja kummankin hallitsevan mobiiliympäristön lisäksi (tarkista tuki sivustolla caniuse.com). Tämän mielessä olemme valmiita aloittamaan verkkojen valaistamisen tänään.

Tässä on koko sivu CodePenissä. Katso koko asia yhdessä ja kurkista sitä ajavaa CSS: ää. Tähän sisältyy skaalaustyyppinen typografinen järjestelmä, jonka olen luonut joidenkin Jen Simmonsilta ja Tim Brownilta opittujen ideoiden perusteella, hyödyntäen näyttöporttiyksiköitä, CSS-mukautettuja ominaisuuksia (aka muuttujia) ja paljon laskelmia. Voit tarkastella sitä suoraan CodePenissä tai tarkistaa sen alla upotettuna.

Jotkut ajatukset kirjasimesta ja projektista

Olen aina ollut fani Erik Spiekermannin työstä ja uskon, että Meta, Officina ja Fira ovat kronologiaa ja historiaa todella mielenkiintoisia ja muodostavat minulle suuren osan digitaalisen suunnittelun kankaasta viimeisen 25 vuoden aikana. Mahdollisuus ottaa kirjasin, jolla on tällainen historia ja vaikutus muotoilumaailmaan, ja työskennellä sen kanssa aivan uuden tekniikan yhteydessä oli todella jännittävä. Pidän erityisen arvokkaana sitä, että pystyin työskentelemään sekä painon että kursivoinnin kanssa samaan tiedostoon: se näyttää muuttuvan fonttimuodon arvon todella hyvin.

Päätin edes aloittaa sivun suunnittelun vasta, kun olen itse kirjoittanut artikkelin. Halusin kirjoittaa hyvän johdannon suunnittelijoille ja tuotemerkkien omistajille, jotta he voisivat esitellä heille muuttuvien fonttien edut termeillä, jotka vastaavat heidän huolenaiheitaan: suunnittelukieli ja tuotemerkin ilme. Kun tunsin olevani hyvä luonnokseni, lisäsin hiukan tarkemmin itse kirjasinta ja sen sijaa suunnittelusanakirjamme. Tämä antoi minulle ideoita, kuinka esitellä sekä kirjasintyyppi että historia.

Ajatellessani peruskokoonpanoa menin mittakaavaan: halusin leikkiä painon ja koon ääripäillä tavalla, jota et näe niin usein verkossa, koska suurin osa malleista on rajoitettuja käytettyihin painoihin. Tässä tapauksessa olen käyttänyt kokonaista painoaluetta 100: sta 900: een sekä roomaksi että kursivoituna. Kun aloin saada haluamani asettelun, minusta kävi mielessä, että sen sijaan, että tekisimme grafiikoita ominaisuuksien havainnollistamiseksi, olisi mielenkiintoista tehdä piirroksia tyypillisimmin: vedä lainausmerkkejä ja vähän 'infografisen' tyylin kirjasintietoja.

Yläosan yläreunan viimeinen kosketus on todella inspiroinut FontFont-sivuston tyyppinäytesivua: siellä on glyfinäytteenottaja, joka näyttää kaikki päällekkäin asetetun ampersandin painot. Minulla oli alun perin ollut niiden pinottu kaikki samalla tavalla, kun he animoivat silmukassa - mutta se oli hiukan paljon joillekin selaimille, jotka käyttivät edelleen muuttuvia fontteja ja avainkehyksen animaatioita. Kun löysin päällekkäistä asettelua toisto / tauko-vaihtoehdolla, pidin siitä, miltä ne näyttivät hajaantuneen (etenkin mobiililaitteissa). Joten kääritin sen ympäri ja jos se alkoi staattiselta, toistan kerran animaation ja palaa takaisin hajautettuun / kerrostettuun asetteluun.

Kaiken kaikkiaan olen todella tyytyväinen sekä sisältöön että suunnitteluun, ja pidän siitä, kuinka se liikkuu ja kehittyy myös erilaisten näyttöruutujen välillä. Toivon, että se toimii inspiraationa ja ohjeena myös muille.

[Monotyyppi sitoutui äskettäin minua kirjoittamaan ja suunnittelemaan esittelysivun esittelemään klassisen Erik Spiekermann -muotoisen FF Meta -standardin uuden muuttuvan fontin julkaisun. Tämä on sivun teksti ja osa visuaaleista. Koko live-sivu isännöidään CodePenissä ja upotetaan yllä. Se on avoin kaikille, joten voit vapaasti tehdä kopion ja pelata sen kanssa itse. Voit nähdä myös heidän esittelynsä tekniikkaan.]

Alkuperäinen sisältö lähetetty blogiini