Udviklingen af ​​typografi med variable skrifttyper: en introduktion

Tynd, tyk og alt derimellem: FF Meta Variabel fra monotype

Ord har magt, og typografi er deres stemme

I århundreder har typen været, hvordan vi 'hører' det, vi læser. Det er også generelt forstået, at skrifttyper og typografi er et kerneelement i branding, udtryk og vokalområde. Stor typografi påvirker forståelse, stemning og mening på utallige måder og er en væsentlig del af design. Desværre var vi i mange år efter fremkomsten af ​​nettet ikke i stand til at anvende alt undtagen det mest basale i typografisk design til onlineindhold. Med muligheden for at bruge ægte skrifttyper og OpenType-funktioner - som ligaturer, specifikke figurer, fraktioner og ægte kerning - forbedrede det typografiske landskab sig enormt. Men virkeligheden med at se indhold på nettet dikterer, at hastighed er det mest kritiske aspekt ved design - så vi har handlet typografisk 'vokal range' til sidehastighed. Det betyder færre fontvægte og reduceret varemærkes troværdighed og stemme.

Fra mange, én (paradigme: skiftet)

En variabel skrifttype er en enkelt skrifttype, der fungerer som mange
- John Hudson

Fremkomsten af ​​variable skrifttyper ændrer hele dynamikken. Som beskrevet af John Hudson er en variabel skrifttype en enkelt skrifttype, der fungerer så mange: alle variationerne i bredde og vægt, skrå og endda kursiv kan indeholde i en enkelt, meget effektiv og komprimerbar fontfil. Hvad mere er: formatet (som teknisk set er en del af OpenType 1.8-specifikationen) er fuldt udvideligt. Typedesigneren har fuld kontrol over hvilke akser der bruges, deres rækkevidde og endda definitionen af ​​nye akser. Der er i øjeblikket 5 'registrerede' akser (bredde, vægt, skrå, kursiv og optisk størrelse), men designeren kan variere enhver akse, de vælger. Nogle eksempler inkluderer højden på ascendenter og efterkommere, tekstklasse, endda serif form. Mulighederne er næsten ubegrænsede. Ved at fjerne ydelsesbarrieren åbner vi døren for mere interessant og dynamisk design og langt større evne til at udtrykke mærkets sande stemme. Alt dette, samtidig med at man opretholder trofasthed over for selve skrifttypen: kun akser, der er udsat af typedesigneren, kan varieres. Ingen kunstig forvrængning tilladt.

Webdesign, genopfundet

Mens teknologien stadig modnes, og typedesignere arbejder på at blive mere flydende i denne nye måde at arbejde på, er løftet om design på nettet banebrydende. Det typiske scenarie ville være at begrænse ethvert givet design til 3–5 forskellige skrifttyper til at repræsentere ethvert aspekt af et websteds designsprog og stemme - inklusive enhver permutation til body copy og overskrifter. Ved sin enkleste implementering ville variable skrifttyper give os friheden til at bruge forskellige vægte til hvert niveau af overskrift - hvilket i høj grad øger deres klarhed og læsbarhed.

Forstærker fra 100 til 900 vægte

Man kunne også bruge lidt smalere karakterbredder til overskrifter eller til datatætte visninger af information. Faktisk kunne hele det typografiske system designes til at være proportionalt: vægt og bredde kunne blive multiplikatorer på standardindstillingerne for kropskopi. Dette gør det muligt for disse aspekter let at skalere sammen med kropskopien, hvis dens indstillinger ændres baseret på skærmstørrelse eller brugerpræference. Alt dette med en ledsagende stigning i ydelsen på grund af færre HTTP-anmodninger (færre fontfiler) og en samlet besparelse af data, der skal downloades (dog vil det variere afhængigt af hvilken font og komprimering der bruges).

Men selvom disse friheder tillader os at være mere udtryksfulde, vil nogle af de virkelig interessante evner hjælpe med at omdanne læsevirksomheden i sig selv. Denne side (ja, selve den faktiske demoside) er indstillet med en ny variabel fontversion af FF Meta, det klassiske sans-serif-design af Erik Spiekermann, der først blev frigivet i 1991. Selv med kun en variation af aksen (vægt) af begge romerske og kursive varianter, en vidunderlig række af stemmer kan opnås med massive gevinster i ydelsen: 18 filer og over 288k erstattet med en enkelt fil på kun 84k.

Genfundet læsning på skærmen

[Meta] skal gøre mere end at se smuk ud: det skal arbejde temmelig hårdt
—Erik Spiekermann

Nogle af de største udfordringer med at skabe en god læseoplevelse er knyttet til manglen på finesse i forhold og fine detaljer. Kombinationen af ​​moderne CSS- og OpenType-funktioner og variationer giver en kraftfuld kombination. At være i stand til at indstille funktioner som ligaturer og bindestreg baseret på sprog, slå ordlyd til og fra baseret på skærmstørrelse og endda skræddersy karakterbredden på de mindste skærme for at passe til flere tegn pr. Linje uden at reducere skriftstørrelse kan gøre dramatiske forbedringer i glatheden og komforten i læseoplevelsen.

Klar til en nærbillede

1700-talsnit af Garamond skåret i optiske størrelser. Det første billede er på 6pt størrelse, det andet er på 72. Bemærk forskellen i slagkontrast. Det er meget mere raffineret i den større størrelse.

En anden funktion, der var almindelig i metalltype, men mistet i oversættelse til fototypetætning og digital var optisk størrelse (godt, nogle designere opretter stadig separate optiske størrelser til forskellige intervaller, men det er sjældent og lidt begrænset). Ikke så ofte findes på sans-serif-design, men i årtier tidligere (i sandhed, i århundreder), var det ret almindeligt, at de fysisk mindre størrelser af et skrifttype blev skåret med lidt tungere slag, mere åbne skåle og tællere og i nogle tilfælde endda bredere åbninger for at bevare læsbarheden. Især afiser fandt dette vigtigt for at sikre, at linjer ikke gik tabt, eller bogstaver ikke led for meget af blækforøgelse.

Optisk dimensionering har returneret i variable skrifttyper og kan automatisk anvendes, hvor det er tilgængeligt, eller indstilles eksplicit af webdesigneren eller udvikleren. Som nævnt er det ikke så hyppigt en funktion i sans-serif-skrifttyper som denne, men det kan bruges til en ganske dramatisk effekt i serif-design med højere slag.

Polsk og poise

Med de fordele, der allerede er diskuteret, er sagen for variable skrifttyper temmelig overbevisende. Men god typografi er ikke alt, hvad der er for stort design. Udvalget af akser som bredde og vægt giver os en enorm frihed til at omfavne mere redaktionelt design på nettet uden at skulle indlæse et ublu antallet af filaktiver. Og da vi allerede har de få påkrævede variable skrifttyper på plads, er muligheden for at udsætte dem for brug af indholdsudgivere selv. Forestil dig en rolle for designere i Content Management System (eller CMS), hvor webstedet ligger. Den designer kunne bruge nogle enkle kontroller indbygget i CMS, der giver dem mulighed for at indstille specifikke overskrifter eller pull-citater, hvilket muliggør et helt nyt designniveau, meget som det, vi har på tryk, uden at skulle skrive tilpasset kode hver gang.

Vi er muligvis stadig ved daggry af denne nye æra, men fremtiden er bestemt lys

Fra maj 2018 understøtter 3 ud af 4 store webbrowsere allerede variable skrifttyper ud over begge dominerende mobile platforme (se support på caniuse.com). Med det i tankerne er vi klar til at begynde at lyse op i dag.

Her er den fulde side på CodePen. Se på det hele sammen, og kig på CSS, der driver det. Dette inkluderer et skalerings-typografisk system, som jeg oprettede, baseret på nogle ideer, jeg lærte fra Jen Simmons og Tim Brown, ved hjælp af visningsenheder, CSS-brugerdefinerede egenskaber (alias variabler) og masser af beregninger. Du kan se det direkte på CodePen eller faktisk tjekke det indlejret nedenfor.

Nogle tanker om skrifttypen og projektet

Jeg har altid været tilhænger af Erik Spiekermanns arbejde, og jeg synes, at kronologien og historien om Meta, Officina og Fira er virkelig interessant, og meget del af stoffet med digital design for mig i løbet af de sidste 25 år. Muligheden for at tage et skrifttype med den slags historie og indflydelse i designverdenen og arbejde med det i sammenhæng med en helt ny teknologi var virkelig spændende. Jeg satte især pris på at være i stand til at arbejde med både vægt og kursiv som en del af den samme fil: det viser værdien af ​​den variable fontformat rigtig godt.

Jeg besluttede ikke engang at begynde at designe siden, før jeg skrev selve artiklen. Jeg ønskede at skrive en god introduktion rettet mod designere og brandejere for at introducere dem til fordelene ved variable skrifttyper i termer, der ville resonere med deres bekymringer: designsprog og brand expression. Når jeg følte, at jeg havde et godt udkast, tilføjede jeg lidt mere specifikt til selve skrifttypen og dens plads i vores designleksikon. Dette gav mig nogle ideer om, hvordan man viser både skrifttypen og historien.

Når jeg tænkte på den grundlæggende indstilling, gik jeg efter målestok: Jeg ville lege med ekstreme vægt og størrelse på måder, som du ikke ser så ofte på nettet, fordi de fleste designs er mere begrænset i de anvendte vægte. I dette tilfælde har jeg brugt en hel række vægte fra 100 til 900 på både romersk og kursiv. Når jeg begyndte at få et layout, jeg kunne lide, forekom det mig, at i stedet for at lave grafik for at illustrere kapaciteterne, ville det være mere interessant at lave illustrationer af typen: trækcitater og en smule 'infografiske' stilskriftsdata.

Det sidste strejf af ampersand up-toppen blev faktisk inspireret af siden med typeprøver på FontFont-webstedet: der er en glyph sampler, der viser alle vægtene af en ampersand, der er lagret oven på hinanden. Jeg havde oprindeligt haft dem alle sammen stablet på samme måde, med at animere i en løkke - men det var lidt meget for nogle browsere, der stadig implementerer variable skrifttyper og keyframe-animation. Da jeg ramte det overlappende layout med en play / pause-indstilling, kunne jeg godt lide den måde, de så ud på (især på mobil). Så jeg vendte den rundt og fik den til at starte statisk, og derefter afspille animationen en gang og gå tilbage til det spredte / lagdelte layout.

Alt i alt er jeg virkelig tilfreds med både indholdet og designet og kan godt lide, hvordan det bevæger sig og udvikler sig på tværs af forskellige skærmstørrelser. Jeg håber, at det også fungerer som inspiration og instruktion for andre.

[Monotype engagerede mig for nylig til at skrive og designe en demonstrationsside til at indeholde en ny variabel fontudgivelse af det klassiske Erik Spiekermann-design FF Meta. Dette er teksten på denne side og nogle af de visuelle. Den fulde live side er hostet på CodePen og indlejret ovenfor. Det er åbent for alle, så tag gerne en kopi og leg med den selv. Du kan også se deres introduktion til teknologien.]

Originalt indhold lagt ud på min blog