Utviklingen av typografi med variable skrifter: en introduksjon

Tynn, tykk og alt derimellom: FF Meta Variabel fra monotype

Ord har makt, og typografi er deres stemme

I århundrer har typen vært hvordan vi ‘hører’ det vi leser. Det er også generelt forstått at skrifttyper og typografi er et kjerneelement i merkevarebygging, uttrykk og vokalområde. Stor typografi påvirker forståelse, humør og mening på utallige måter og er en essensiell del av design. Dessverre klarte vi, i mange år etter at nettet kom, ikke å bruke alt annet enn det mest grunnleggende innen typografisk design på online innhold. Med muligheten til å bruke ekte skrifter og OpenType-funksjoner - som ligaturer, spesifikke figursett, brøk og ekte kerning - forbedret det typografiske landskapet seg enormt. Men virkeligheten av å se innhold på nettet tilsier at hastighet er det mest kritiske aspektet ved design - så vi har handlet typografisk ‘vokal range’ for sidehastighet. Det betyr færre fontvekter og redusert merkevare tro og stemme.

Fra mange, ett (paradigme: forskjøvet)

En variabel font er en enkelt skrift som fungerer som mange
- John Hudson

Ankomsten av variable skrifter endrer hele dynamikken. Som beskrevet av John Hudson, er en variabel font en enkelt skrifttype som fungerer som mange: alle variasjonene av bredde og vekt, skrå og til og med kursiv kan være inneholdt i en enkelt, svært effektiv og komprimerbar fontfil. Hva mer: formatet (som teknisk sett er en del av OpenType 1.8-spesifikasjonen) er helt utvidbart. Typedesigneren har full kontroll over hvilke akser som brukes, rekkevidden deres og til og med definisjonen av nye akser. Det er for øyeblikket 5 ‘registrerte’ akser (bredde, vekt, skrå, kursiv og optisk dimensjonering), men designeren kan variere hvilken som helst akse de velger. Noen eksempler inkluderer høyden på oppstigere og etterkommere, tekstklasse, til og med serifform. Mulighetene er nesten ubegrensede. Ved å fjerne ytelsesbarrieren, åpner vi døren for mer interessant og dynamisk design og langt større evne til å uttrykke merkets sanne stemme. Alt dette samtidig som man opprettholder troskap mot selve skriften: bare økser som er eksponert av typedesigneren, kan varieres. Ingen kunstig forvrengning tillatt.

Nettdesign, oppfunnet på nytt

Mens teknologien fortsatt modnes og typedesignere jobber for å bli flytende i denne nye måten å jobbe på, er løftet for design på nettet banebrytende. Det typiske scenariet vil være å begrense en gitt design til 3–5 forskjellige skrifter for å representere alle aspekter av nettstedets designspråk og stemme - inkludert enhver permutasjon for kroppskopiering og overskrifter. Med sin enkleste implementering vil variable skrifter gi oss friheten til å bruke forskjellige vekter for hvert nivå av overskriften - noe som øker deres klarhet og lesbarhet.

Forsterker fra 100 til 900 vekter

Man kan også bruke litt smalere karakterbredder til overskrifter eller på datatette visninger av informasjon. Faktisk kan hele det typografiske systemet være utformet for å være proporsjonalt: vekt og bredde kan bli multiplikatorer på standard innstillinger for kroppskopi. Hvis du gjør det, kan disse aspektene enkelt skaleres sammen med hovedkopien, hvis innstillingene endres basert på skjermstørrelse eller brukerpreferanser. Alt dette med en tilhørende økning i ytelse på grunn av færre HTTP-forespørsler (færre fontfiler) og en samlet besparelse av data du kan laste ned (selv om det vil variere etter skrift og komprimering som brukes).

Men selv om disse frihetene tillater oss å være mer uttrykksfulle, vil noen av de virkelig interessante egenskapene bidra til å transformere leseopplevelsen i seg selv. Denne siden (vel, selve demosiden) er satt med en ny variabel fontversjon av FF Meta, det klassiske sans-serif-designet av Erik Spiekermann først utgitt i 1991. Selv med bare en variasjonsakse (vekt) av begge romerske og kursive varianter, et fantastisk utvalg av stemmer kan oppnås med enorme ytelsesgevinster: 18 filer og over 288 000 erstattet av en enkelt fil på bare 84 000.

Gjenoppfunnet lesing på skjermen

[Meta] må gjøre mer enn å se pen ut: den må jobbe ganske hardt
—Erik Spiekermann

Noen av de største utfordringene med å skape en god leseopplevelse er knyttet til mangelen på finesse i forhold og fine detaljer. Kombinasjonen av moderne CSS- og OpenType-funksjoner og varianter gir en kraftig kombinasjon. Å kunne stille inn funksjoner som ligaturer og bindestrekning basert på språk, slå av og på bindestrekning basert på skjermstørrelse, og til og med skreddersy tegnbredden på de minste skjermbildene for å få plass til flere tegn per linje uten å redusere skriftstørrelsen, kan gjøre dramatiske forbedringer i glattheten og komforten i leseopplevelsen.

Klar for en nærbilde

1700-talls kutt av Garamond kuttet i optiske størrelser. Det første bildet er på 6pt størrelse, det andre på 72. Legg merke til forskjellen i slagkontrast. Det er mye mer raffinert i større størrelse.

En annen funksjon som var vanlig i metalltype, men som gikk tapt i oversettelse til fototypeinnstilling og digital, var optisk dimensjonering (vel, noen designere lager fremdeles separate optiske størrelser for forskjellige områder, men det er sjelden og litt begrenset). Ikke så ofte funnet på sans-serif-design, men i flere tiår (i sannhet i århundrer), var det ganske vanlig at de fysisk mindre størrelsene på et skrifttype ble kuttet med litt tyngre slag, mer åpne skåler og skranker, og i i noen tilfeller enda større åpninger for å bevare lesbarheten. Spesielt aviser syntes dette var avgjørende for å sikre at linjer ikke gikk tapt eller bokstaver ikke led for mye av blekkforsterkning.

Optisk dimensjonering har gitt retur i variable skrifter, og kan automatisk brukes der det er tilgjengelig, eller angitt eksplisitt av webdesigner eller utvikler. Som nevnt er det ikke så hyppig funksjon i sans-serif-skrifttyper som dette, men kan brukes til ganske dramatisk effekt i serif-design med høyere slag.

Polsk og staselig

Med fordelene som allerede er diskutert, er saken for varierende skrifter ganske overbevisende. Men god typografi er ikke alt det som er for flott design. Utvalget av økser som bredde og vekt gir oss en enorm frihet til å omfatte mer redaksjonell design på nettet uten å måtte laste inn et ublu antall filformue. Og siden vi allerede har de få påkrevde variabler som er på plass, er muligheten til å eksponere dem for bruk av innholdsutgivere selv. Se for deg en rolle for designere i Content Management System (eller CMS) der nettstedet ligger. Den designeren kunne bruke noen enkle kontroller innebygd i CMS som gjør at de kan angi spesifikke overskrifter eller trekksitater, noe som muliggjør et helt nytt designnivå omtrent som det vi har på trykk, uten å måtte skrive tilpasset kode hver gang.

Det kan hende vi fortsatt er med begynnelsen av denne nye epoken, men fremtiden er absolutt lys

Fra mai 2018 støtter 3 av 4 store nettlesere allerede variable skrifter, i tillegg til begge dominerende mobilplattformene (sjekk support på caniuse.com). Med det i tankene er vi klare til å begynne å lyse opp nettet i dag.

Her er hele siden på CodePen. Se på det hele sammen, og se på CSS som driver det. Dette inkluderer et skalerings-typografisk system som jeg opprettet basert på noen ideer jeg lærte fra Jen Simmons og Tim Brown, ved å bruke visningsenheter, CSS-tilpassede egenskaper (aka variabler) og mange beregninger. Du kan se den direkte på CodePen eller faktisk sjekke den innebygd nedenfor.

Noen tanker om skrifttypen og prosjektet

Jeg har alltid vært tilhenger av Erik Spiekermanns arbeid, og jeg synes at kronologien og historien til Meta, Officina og Fira er virkelig interessant, og veldig mye av stoffet med digital design for meg de siste 25 årene. Sjansen for å ta et skrifttype med den slags historie og innvirkning i designverdenen og jobbe med det i sammenheng med en helt ny teknologi var virkelig spennende. Jeg satte spesielt stor pris på å kunne jobbe med både vekt og kursiv som en del av den samme filen: den viser verdien av variabelt skriftformat veldig bra.

Jeg bestemte meg for å ikke engang begynne å designe siden før jeg skrev selve artikkelen. Jeg ønsket å skrive en god introduksjon rettet mot designere og merkeeiere for å introdusere dem for fordelene med variable skrifter i termer som ville resonere med deres bekymringer: designspråk og merkeuttrykk. Når jeg følte at jeg hadde et bra utkast, la jeg litt mer spesifikt til skrifttypen og plassen i designleksikonet vårt. Dette ga meg noen ideer om hvordan jeg kan vise frem både skrifttypen og historien.

Når jeg tenkte på den grunnleggende typesettingen, gikk jeg etter målestokk: Jeg ønsket å leke med ytterpunktene vekt og størrelse på måter som du ikke ser så ofte på nettet, fordi de fleste design er mer begrenset i vektene du bruker. I dette tilfellet har jeg brukt en hel rekke vekter fra 100 til 900 på både romersk og kursiv. Når jeg begynte å få en layout jeg likte, falt det meg opp at i stedet for å lage grafikk for å illustrere funksjonene, ville det være mer interessant å lage illustrasjoner av typen: trekksitater og litt ‘infografisk’ stil fontdata.

Den siste berøringen av ampersand up-toppen ble faktisk inspirert av siden med typeprøver på FontFont-siden: det er en glyph-sampler som viser alle vektene til en ampersand lagvis oppå hverandre. Jeg hadde opprinnelig fått dem alle stablet på samme måte, med å animere i en loop - men det var litt mye for noen nettlesere som fremdeles implementerer variabelt fonter og keyframe-animasjon. Da jeg traff på det overlappende oppsettet med et alternativ for avspilling / pause, likte jeg måten de så spredt ut på (spesielt på mobil). Så jeg snudd den rundt og fikk den til å starte statisk, og deretter spille av animasjonen en gang og gå tilbake til spredt / lagdelte oppsett.

Alt i alt er jeg veldig fornøyd med både innholdet og designet, og liker hvordan det beveger seg og utvikler seg på tvers av forskjellige skjermstørrelser. Jeg håper det fungerer som inspirasjon og instruksjon også for andre.

[Monotype engasjerte meg nylig til å skrive og designe en demonstrasjonsside for å inneholde en ny variabel fontutgivelse av det klassiske Erik Spiekermann-designet FF Meta. Dette er teksten på den siden og noen av bildene. Hele live-siden er vert på CodePen og innebygd ovenfor. Det er åpent for alle, så ta gjerne en kopi og leke med den selv. Du kan se deres introduksjon til teknologien også.]

Originalt innhold lagt ut på bloggen min