• Usability & design
    wordt gesponsord door

Terug in de tijd met typografie en responsive design bij SXSW

Terug in de tijd met typografie en responsive design bij SXSW

Met de toename van het belang van responsive design om onze websites geschikt te maken voor allerlei formaten beeldschermen, neemt ook het belang van goede typografie sterk toe. Tijdens SXSW wordt er in een flink aantal panels aandacht besteed aan responsive design. Van beginner tot die-hard front-ender kom je aan je trekken. Je kunt echt niet meer om responsive design heen. Des te opvallender is het dat er een stuk minder aandacht wordt besteed aan het belang van goede typografie.

Typografie is volgens mij altijd erg belangrijk geweest voor online look and feel en zeker één van de hoekstenen van een goed ontworpen website. Toch schieten regelmatig de tranen in je ogen bij het aanschouwen van websites, zelfs van de grote merken der aarde. Te vaak blijkt de typografie het kind van de rekening. En dan heb ik het dus nog niet eens over responsive websites.

Responsive websites

Wanneer je je website responsive maakt of laat maken, krijg je automatisch minder invloed op de exacte manier waarop jouw verhaal aan de bezoeker van je website wordt getoond. De breedte van een tekstkolom verandert bijvoorbeeld, wat invloed heeft op de leesbaarheid. Te breed, dus lange zinnen, is niet optimaal. Hetzelfde geldt voor smalle tekstkolommen op een klein scherm. Als je echt wat te vertellen hebt en je verhaal is langer dan een paar regels, wordt het nog veel belangrijker om rekening te houden met de manier waarop je tekst op die verschillende schermformaten wordt weergegeven. Zorg er dus voor dat de leeservaring zo goed mogelijk wordt.

Goede typografie draagt bij aan een goede stemming

Het gevoel dat iets klopt, dat bijvoorbeeld de gekozen fonts passen bij het verhaal dat verteld wordt, heeft nogal wat invloed op hoe we een verhaal ervaren. Onderzoek, onder andere door typograaf Robert Bringhurst, heeft dit uitgewezen. In zijn boek The elements of typographic style komen veel onderwerpen aan de orde die stuk voor stuk zeer gedetailleerd zijn, maar wel zorgen voor een samenhang die echt voor beter resultaat zorgt.

Richard Rutter van Fontdeck.com geeft een aantal goede startpunten tijdens het panel op SXSW, waarvan de belangrijkste het maken van een modulaire schaal en een prototype voor het fontgebruik zijn. Hij is duidelijk; er zijn geen excuses meer voor verkeerd gebruik van fonts. Helaas is dat verhaal zeker nog lang niet bij alle andere sprekers in de SXSW panels over responsive design doorgedrongen.

Modulaire schaal

Om evenwicht te krijgen in de tekst op je website, is het belangrijk om een modulaire schaal van lettergroottes te bepalen. Deze schaal bepaalt welke fonts, groottes, regelafstanden maar ook welke tekensets (kleinkapitalen, proportionele oude stijl cijfers) je gebruikt in je tekst en legt hun onderlinge verhouding vast. Of je nu zelf ontwerpt of dat laat doen, zorg ervoor dat je een prototype ontwikkelt van de verschillende fonts, karaktersets en groottes, zodat je hier een duidelijk beeld van krijgt. Vervolgens kun je met het prototype aan de slag om tot een optimale samenhang te komen. En uiteraard doe je dit voor lopende tekt en voor kopteksten.

Op www.modularscale.com kun je zo'n modulaire schaal samenstellen.

Cross-browserdrama's

Front end developers gebruiken media queries – CSS3 modules die een aantal vastgestelde waarden bevatten voor het ontwerp en interactie van een webpagina – om te bepalen welke fonts wanneer gebruikt worden bij responsive websites. Andere CSS code wordt gebruikt om karaktersets te definiëren en regelafstand vast te leggen. En zoals altijd zijn deze queries en CSS code niet voor alle browsers geschikt. Internet explorer, Firefox, Webkit, ze gaan er allemaal anders mee om. Hierdoor kan een responsive ontwerp voor al deze browsers op een andere manier werken. Toch mag dit geen excuus zijn om, in die browsers die het wel ondersteunen, het gebruik van lettertypen zo goed mogelijk toe te passen.

Typografie als stabiele factor

De manier waarop we websites ontwerpen verandert door de jaren heen. Technieken zoals html5 en CSS3 bieden nieuwe mogelijkheden. Maar ze laten ons ook in zien dat meer niet altijd beter is. Undesign met user centered design als basis krijgt de overhand, getuige ook het flink aantal panels op SXSW over dit onderwerp. Het zorgt ervoor dat je merk ‘echter’ en persoonlijker blijft.

En in al die tijd is er één vaste factor geweest en dat is typografie, zo blijkt ook dit jaar weer op SXSW. De hierboven genoemde ontwikkelingen zorgen ervoor dat lettertypes weer gebruikt kunnen worden zoals ze echt bedoeld zijn. We kunnen eindelijk weer copy schrijven en die met aandacht voor kleine details zo optimaal mogelijk weergeven. Terug in de tijd, alsof we aan de letterbak staan om met de hand, letter voor letter, ons verhaal te vertellen.

De investering in het kiezen en inzetten van lettertypes die bij je merk passen en bij het verhaal wat bij je merkt hoort, staat in geen enkele verhouding tot de investeringen die merken vaak doen in hun online aanwezigheid. Richard Rutter concludeert dan ook dat je  op de hoogte moeten zijn van de mogelijkheden en de regels van typografie. Ik kan dit alleen maar onderschrijven. Als je als marketeer de toegevoegde waarde ervan leert kennen, kun je zelf concluderen hoe een kleine investering kan zorgen voor een groot verschil!

Credits afbeeldingen: poolie & tarale (CC)


Delen

0
0


Er zijn 4 reacties op dit artikel

  • Jij schijft het en ik dacht het al langer. Typografie is wat mij betreft een van de belangrijkste factoren binnen een design. Voor print heel normaal en geaccepteerd, maar voor online is het altijd een ondergeschoven kindje geweest. En nu met responsive inderdaad nóg belangrijker.

    Goed artikel, bedankt!
    (Ps doe theo de groeten van me ;)

    geplaatst op
  • Prima artikel. Typografie is natuurlijk (zoals Martijn ook zegt) altijd een erg belangrijk onderdeel van een design geweest.

    Ik zou alleen niet willen zeggen dat het een ondergeschoven kindje is geweest. Probleem was dat er niet echt goede oplossingen waren in het verleden.

    Nu met iets als typekit.com etc. is dat veel makkelijker geworden. Zie ook nog regelmatig sites die commerciële fonts op de server hebben en gebruiken via @font-face. Terwijl dat zelden legaal is.

    geplaatst op
  • Ik heb het artikel met volle interesse gelezen. Ik werk zelf als typograaf in de drukkerij van mijn Vader en heb Graphic Design gestudeerd, dus ik kon hier natuurlijk niet om heen! Topgrafie is als je het mij vraagt altijd het belangrijkste onderdeel van design geweest en het is dat nu ook nog steeds! Groeten, Edo Lucas

    geplaatst op
  • Het belangrijkste onderdeel... daar zal niet iedereen het mee eens zijn Edo. ;-) Maar wel een belangrijk onderdeel!

    Mooi vak iig: typograaf!

    geplaatst op

Plaats zelf een reactie

Log in zodat je (in het vervolg) nóg sneller kunt reageren

Vul jouw naam in.
Vul jouw e-mailadres in. Vul een geldig e-mailadres in.
Vul jouw reactie in.

Herhaal de tekens die je ziet in de afbeelding hieronder


Let op: je reactie blijft voor altijd staan. We verwijderen deze dus later niet als je op zoek bent naar een nieuwe werkgever (of schoonmoeder). Reacties die beledigend zijn of zelfpromotioneel daarentegen, verwijderen we maar al te graag. Door te reageren ga je akkoord met onze voorwaarden.