De evolutie van typografie met variabele lettertypen: een inleiding

Dun, dik en alles daartussenin: FF Meta Variable van Monotype

Woorden hebben kracht en typografie is hun stem

Eeuwenlang was type de manier waarop we 'horen' wat we lezen. Het is ook algemeen bekend dat lettertypen en typografie een kernelement zijn van branding, van expressie, van vocale bereik. Geweldige typografie beïnvloedt begrip, stemming en betekenis op talloze manieren en is een essentieel onderdeel van het ontwerp. Helaas konden we vele jaren na de komst van het web niet alles behalve het meest elementaire typografische ontwerp toepassen op online inhoud. Met de mogelijkheid om echte lettertypen en OpenType-functies te gebruiken - zoals ligaturen, specifieke cijfersets, breuken en echte kerning - verbeterde het typografische landschap enorm. Maar de realiteit van het bekijken van inhoud op internet dicteert dat snelheid het belangrijkste aspect van ontwerp is - dus hebben we typografisch ‘vocaal bereik’ geruild voor paginasnelheid. Dat betekent minder lettertypegewichten en verminderde merkbetrouwbaarheid en stem.

Van velen één (paradigma: verschoven)

Een variabel lettertype is een enkel lettertype dat evenveel werkt
- John Hudson

De komst van variabele lettertypen verandert die hele dynamiek. Zoals beschreven door John Hudson, is een variabel lettertype een enkel lettertype dat evenveel fungeert: alle variaties in breedte en gewicht, inslag en zelfs cursief kunnen worden opgenomen in een enkel, zeer efficiënt en comprimeerbaar lettertypebestand. Wat meer is: het formaat (dat technisch onderdeel is van de OpenType 1.8-specificatie) is volledig uitbreidbaar. De typeontwerper heeft volledige controle over welke assen worden gebruikt, hun reeksen en zelfs de definitie van nieuwe assen. Er zijn momenteel 5 ‘geregistreerde’ assen (breedte, gewicht, schuine lijn, cursief en optische grootte), maar de ontwerper kan elke as die hij kiest variëren. Enkele voorbeelden zijn de hoogte van de stijgers en dalingen, tekstkwaliteit, zelfs serif-vorm. De mogelijkheden zijn bijna onbeperkt. Door de prestatiebarrière weg te nemen, openen we de deur voor een interessanter en dynamisch ontwerp en een veel groter vermogen om de ware stem van het merk uit te drukken. Dit alles met behoud van de trouw aan het lettertype zelf: alleen assen die worden blootgesteld door de typeontwerper kunnen worden gevarieerd. Geen kunstmatige vervorming toegestaan.

Webdesign, opnieuw uitgevonden

Hoewel de technologie nog steeds volwassen wordt en typeontwerpers werken om deze nieuwe manier van werken vloeiender te maken, is de belofte voor ontwerp op het web baanbrekend. Het typische scenario zou zijn om een ​​bepaald ontwerp te beperken tot 3-5 verschillende lettertypen om elk aspect van de ontwerptaal en stem van een site weer te geven - inclusief elke permutatie voor body copy en koppen. Bij de eenvoudigste implementatie zouden variabele lettertypen ons de vrijheid geven om verschillende gewichten te gebruiken voor elk kopniveau - waardoor de duidelijkheid en leesbaarheid aanzienlijk toenemen.

Ampersands van 100 tot 900 gewichten

Je zou ook iets smallere karakterbreedtes kunnen gebruiken voor koppen of op gegevensverzadigde weergave van informatie. In feite zou het volledige typografische systeem proportioneel kunnen worden ontworpen: gewicht en breedte kunnen vermenigvuldigers worden op de standaard body copy-instellingen. Als u dit doet, kunnen deze aspecten gemakkelijk samen met de bodycopy worden geschaald als de instellingen worden gewijzigd op basis van de schermgrootte of de voorkeur van de gebruiker. Dit alles met een bijbehorende prestatieverhoging als gevolg van minder HTTP-aanvragen (minder lettertypebestanden) en een totale besparing van gegevens om te downloaden (hoewel dat per lettertype en gebruikte compressie zal variëren).

Maar hoewel deze vrijheden ons in staat stellen expressiever te zijn, zullen enkele van de echt interessante mogelijkheden de leeservaring zelf helpen transformeren. Deze pagina (nou ja, de eigenlijke demopagina zelf) is ingesteld met een nieuwe versie met variabel lettertype van FF Meta, het klassieke schreefloze ontwerp van Erik Spiekermann voor het eerst uitgebracht in 1991. Zelfs met slechts één variatieas (gewicht) van beide Romeinse en cursieve varianten, een prachtig stembereik kan worden bereikt met enorme prestatieverbeteringen: 18 bestanden en meer dan 288k vervangen door een enkel bestand van slechts 84k.

Opnieuw uitgevonden lezen op het scherm

[Meta] moet meer doen dan er mooi uitzien: het moet behoorlijk hard werken
—Erik Spiekermann

Enkele van de grootste uitdagingen bij het creëren van een goede leeservaring hangen samen met het gebrek aan finesse in verhouding en fijne details. De combinatie van moderne CSS- en OpenType-functies en variaties vormt een krachtige combinatie. Functies zoals ligaturen en woordafbreking kunnen instellen op basis van taal, woordafbreking in- en uitschakelen op basis van schermgrootte en zelfs de tekenbreedte op de kleinste schermen aanpassen om meer tekens per regel te passen zonder de lettergrootte te verkleinen, kan dramatische verbeteringen in de soepelheid en het comfort van de leeservaring.

Klaar voor een close-up

18e-eeuwse snit van Garamond gesneden in optische maten. De eerste afbeelding heeft een grootte van 6pt, de tweede is op 72. Let op het verschil in lijncontrast. Het is veel verfijnder in het grotere formaat.

Een ander kenmerk dat gebruikelijk was bij het metaaltype, maar verloren ging bij de vertaling naar foto-zetwerk en digitaal, was optische dimensionering (nou ja, sommige ontwerpers maken nog steeds afzonderlijke optische formaten voor verschillende bereiken, maar het is zeldzaam en enigszins beperkt). Niet zo vaak te vinden op schreefloze ontwerpen, maar in decennia verleden (in waarheid, eeuwenlang), was het vrij gebruikelijk dat de fysiek kleinere afmetingen van een lettertype werden gesneden met iets zwaardere lijnen, meer open kommen en tellers, en in in sommige gevallen zelfs grotere openingen om de leesbaarheid te behouden. Vooral kranten vonden dit van cruciaal belang om ervoor te zorgen dat lijnen niet verloren gingen of brieven niet te veel last hadden van inktwinst.

Optische dimensionering is terug in variabele lettertypen en kan automatisch worden toegepast waar beschikbaar, of expliciet worden ingesteld door de webdesigner of ontwikkelaar. Zoals gezegd, komt het niet zo vaak voor in schreefloze lettertypen zoals deze, maar kan het worden gebruikt voor een behoorlijk dramatisch effect in serif-ontwerpen met een hoger slagcontrast.

Pools en evenwichtig

Met de reeds besproken voordelen is de reden voor variabele lettertypen behoorlijk aantrekkelijk. Maar goede typografie is niet alles wat een geweldig ontwerp is. Het bereik van assen zoals breedte en gewicht geeft ons een enorme vrijheid om meer redactioneel ontwerp op het web te omarmen zonder een exorbitant aantal bestandsmiddelen te hoeven laden. En omdat we al die paar vereiste variabele lettertypen hebben, is de mogelijkheid om ze bloot te stellen voor gebruik door inhouduitgevers zelf. Stel je een rol voor ontwerpers voor binnen het Content Management Systeem (of CMS) waar de website zich bevindt. Die ontwerper zou enkele eenvoudige besturingselementen kunnen gebruiken die in het CMS zijn ingebouwd, waarmee ze specifieke koppen of pull-quotes kunnen zetten, waardoor een geheel nieuw ontwerpniveau mogelijk wordt, net als wat we in druk hebben, zonder elke keer aangepaste code te hoeven schrijven.

We staan ​​misschien nog aan het begin van dit nieuwe tijdperk, maar de toekomst ziet er zeker rooskleurig uit

Vanaf mei 2018 ondersteunen 3 van de 4 grote webbrowsers al variabele lettertypen, naast beide dominante mobiele platforms (check ondersteuning op caniuse.com). Met dat in gedachten zijn we klaar om vandaag het web op te lichten.

Hier is de volledige pagina op CodePen. Bekijk het allemaal samen en neem een ​​kijkje in de CSS die ervoor zorgt. Dit omvat een schaalbaar typografisch systeem dat ik heb gemaakt op basis van enkele ideeën die ik heb geleerd van Jen Simmons en Tim Brown, met behulp van viewport-eenheden, aangepaste CSS-eigenschappen (aka variabelen) en veel berekeningen. U kunt het rechtstreeks op CodePen bekijken of het hieronder ingesloten bekijken.

Enkele gedachten over het lettertype en het project

Ik ben altijd een fan geweest van het werk van Erik Spiekermann en ik denk dat de chronologie en geschiedenis van Meta, Officina en Fira echt interessant zijn en voor mij de afgelopen 25 jaar een zeer belangrijk onderdeel vormen van digitaal ontwerp. De kans om een ​​lettertype te nemen met dat soort geschiedenis en impact in de ontwerpwereld en ermee te werken in de context van een geheel nieuwe technologie was echt opwindend. Ik waardeerde vooral dat ik met zowel gewicht als cursief als onderdeel van hetzelfde bestand kon werken: het toont de waarde van het variabele lettertype-formaat echt goed.

Ik besloot om niet eens te beginnen met het ontwerpen van de pagina totdat ik het artikel zelf schreef. Ik wilde een goede inleiding schrijven voor ontwerpers en merkeigenaren om hen kennis te laten maken met de voordelen van variabele lettertypen in termen die resoneren met hun zorgen: ontwerptaal en merkuitdrukking. Toen ik eenmaal het idee had dat ik een goed ontwerp had, voegde ik een beetje specifieker toe aan het lettertype zelf en de plaats ervan in ons ontwerplexicon. Dit gaf me enkele ideeën over hoe ik zowel het lettertype als de geschiedenis kon laten zien.

Bij het nadenken over de basiszet, ging ik voor schaal: ik wilde met de uitersten van gewicht en grootte spelen op een manier die je niet zo vaak op internet ziet omdat de meeste ontwerpen meer beperkt zijn in de gebruikte gewichten. In dit geval heb ik een hele reeks gewichten van 100 tot 900 in zowel Romeins als cursief gebruikt. Toen ik eenmaal een lay-out begon te krijgen die ik leuk vond, bedacht ik me dat in plaats van het maken van afbeeldingen om de mogelijkheden te illustreren, het interessanter zou zijn om illustraties van het type te maken: citaten trekken en een beetje lettertype-gegevens in 'infographic' stijl.

De laatste aanraking van het en-teken bovenaan is eigenlijk geïnspireerd door de pagina met het type specimen op de FontFont-site: er is een glyph-sampler die alle gewichten van een en-teken op elkaar toont. Ik had ze oorspronkelijk allemaal op dezelfde manier gestapeld, met animatie in een lus - maar dat was een beetje veel voor sommige browsers die nog steeds variabele lettertypen en keyframe-animaties implementeren. Toen ik op de overlappende lay-out klikte met een optie voor afspelen / pauzeren, vond ik het leuk hoe ze er verspreid uitzagen (vooral op mobiel). Dus ik draaide het om en liet het statisch beginnen, en vervolgens de animatie eenmaal afspelen en teruggaan naar de lay-out met gespreide / gelaagde lagen.

Al met al ben ik erg blij met zowel de inhoud als het ontwerp, en hou ik ook van hoe het beweegt en evolueert over verschillende schermformaten. Ik hoop dat het ook als inspiratie en instructie voor anderen dient.

[Monotype heeft me onlangs betrokken bij het schrijven en ontwerpen van een demonstratiepagina met een nieuwe versie van het variabele lettertype van het klassieke Erik Spiekermann-ontwerp FF Meta. Dit is de tekst van die pagina en enkele visuals. De volledige live-pagina wordt gehost op CodePen en hierboven ingesloten. Het staat open voor iedereen, dus voel je vrij om een ​​kopie te maken en er zelf mee te spelen. Je kunt ook hun introductie tot de technologie zien.]

Originele inhoud op mijn blog geplaatst