2019

Digitale Typografie

Typografie is het structureren en vormgeven van tekstuele informatie om een boodschap of informatie op een effectieve en efficiënte wijze over te dragen. Het gaat om dat je kunt vinden wat je zoekt, je begrijpt wat er staat, de tekst prettig leesbaar is en de functie van de tekst duidelijk is.

De meeste mensen scannen pagina’s (lezen eerst de koppen) en lezen pas verder als een artikel interessant is. Het gaat dus om:

– Dat je kunt vinden wat je zoekt – Dat je begrijpt wat er staat – Dat de tekst prettig leesbaar is – Dat de functie van de tekst duidelijk is

Toepassingen van typografie

Doelstellling: van functioneel (strak, zakelijk) tot expressief (speels, chaotisch)
Informatie: van complex tot eenvoudig

01. Analyseer de tekst

 Wat voor soort tekst is het?

Interview, artikel, nieuwsbericht?

Uit wat voor soorten informatie bestaat de tekst?

Titel, introductie (korte samenvatting/teaser), voorbeelden, vragen en antwoorden (interviews), quotes, stukken code (HTML, PHP), unsorted lists (met bullets), sorted lists (met cijfers), koppen, subkoppen, subsubkoppen, labels,…

Welk lettertype ga je gebruiken voor titels en copy tekst?

Anatomie van een letter
De x-hoogte bepaalt de grootte van de onderkast letters. De maat is gelijk aan de afstand van de basislijn tot de middenlijn. Grootte x-hoogte zorgt voor betere leesbaarheid bij kleine letters op het web.

Letters kiezen

Benaming en classificatie: letterfontein.nl/classificatie.html

02. Organiseer de informatie

Iets belangrijk maken (Hiërarchie)

Orden de verschillende lagen informatie in een ontwerp. Dat wat belangrijk is valt meer op.
Zorg dat de elementen in de opmaak niet onderling concurreren. Ze moeten duidelijk van elkaar verschillen in vorm en functie.
Als de hiërarchie van een tekst niet in één oogopslag duidelijk is, zorg dan voor meer contrast tussen de verschillende soorten koppen en hoofdtekst. Bijvoorbeeld door een sterker verschil in tekstgrootte, kleur, lettertype, of lettersoort (bold, regular, etc.).
Test (b.v. eye-tracking)

Maak iets belangrijk door parameters te veranderen: Corps (grootte van de tekst), fonts (verschillende fonts gebruiken), gewicht (normal, bold, heavy), stijl (regular, italic, underlined), kapitalen gebruiken, kleur veranderen, typografische elementen gebruiken (block, lijnen), wit ruimte. Combinaties van verschillende parameters en elementen werken vaak goed!

Contrast

Met een lekker tempo langs de koppen scannen.
Check of er voldoende contrast in je tekst zit. Kijk door je oogharen.
Denk ook na over hoe je hyperlinks subtiel kunt aangeven in een tekst. Geen underline om accenten aan te brengen in je tekst. Gebruikers denken dan al snel dat het een hyperlink is.
Schermlettertypen zijn ontworpen voor zwart op wit, donkere achtergronden zijn vaak moeilijk, maar kunnen werken als ze goed worden uitgevoerd. Het werkt meestal niet voor lange teksten, wel voor titels. Bij moderne schermen met hoog contrast is een donkergrijs tekst of een lichtgrijs voor de achtergrond, in plaats van een harde zwart op wit een betere keuze.

Consistentie

Om de eenheid te behouden, houd typografische keuzes consistent. Gebruik slechts één of twee fonts, een beperkt aantal groottes (ongeveer drie) en niet teveel verschillende stijlen.

Witruimte

Zorg dat er wat ruimte is tussen je tekst en een vlak. Veel witregels gaan ten koste van de verticale ruimte.

03. Maak het leesbaar

Fonts en leesbaarheid

Sommige lettertypes zijn niet geschikt voor lange teksten. Ook vermindert een te brede of te smalle x-hoogte de leesbaarheid. Leesbaarheid is onder andere afhankelijk van de verhouding tussen hoofdletters en kleine letters. Houd rekening met schaal en grootte van een toepassing bij het kiezen van een font.
De ontworpen tekens van een letterfamilie onderscheiden zich voldoende van elkaar: Bijvoorbeeld een 6 van een G, een 1 van een l, een O van een 0.
Op een beeldscherm schijnt licht door letters heen. Daar moet je rekening mee houden. Neem The New York Times. Die krant is zo verstandig om online een veel bredere tekstletter te gebruiken dan op papier (Gerard Unger).

Elementen uitlijnen

Zorg voor ritme, rust en overzicht in je ontwerp. Dat doe je door uit te lijnen en door voldoende witruimte toe te passen. De onderdelen die een relatie hebben met elkaar (die bij elkaar horen) zijn uitgelijnd.

Spatieer

Er vallen geen gaten in de woorden, er vallen geen gaten in de zinnen. Teksten uitvullen kan lelijke gaten veroorzaken in je tekstbeeld. Je moet dit aanpassen.

Gecentreerd teksten

Bij lange gecentreerde teksten heeft je oog moeite met het vinden van de volgende regel.

Regellengte

Teveel letters op één regel maakt het lastiger om geconcentreerd te blijven. Om de regellengte aan te passen aan het scherm, verander je marge en corps voor een betere leesbaarheid. 45-75 karakters per regel zijn het best leesbaar, variërend naar lettergrootte.
Kies eerst het font voordat je de regellengte bepaalt.

Interlinie / Regelafstand

Teveel of te weinig ruimte tussen de regels, maakt het lastiger om te lezen. Omdat een mobieltje dichterbij wordt gehouden en een kleinere scherm heeft, kan de lijnhoogte kleiner zijn. Kleine schermen hebben minder regelafstand nodig. Het past dan ook meer tekst op een scherm. 140% van de lettergrootte is een goede maatstaf, maar het hangt natuurlijk af van het lettertype dat je gebruikt en hoe breed de content is.

Lettergrootte / Corps (grootte van de tekst)

Te klein is onleesbaar maar groot betekent niet dat het daardoor leesbaarder is.
Omdat een computer verder weg staat dan een boek moeten de letters groter zijn. De grootte van een lettertype moet zich aanpassen aan de grootte van het scherm dat je op dat moment gebruikt. Je kunt het beste via media-queries per type scherm instellen wat de website moet laten zien.

Kleurcontrast

Zorg voor voldoende contrast, maar voorkom vloekende kleuren.

Schreef / Schreefloos

Voor beeldschermen waren tot nu toe schreefloze fonts het meest geschikt,. Omdat er nu goed resolutie schermen zijn is dit niet meer van toepassing en kan je ook heel goed schreefletters op het scherm gebruiken . Voor drukwerk (met name lange teksten) zijn schreef fonts meer geschikt, omdat ze zorgen voor een horizontale en stabiele basis. Een soort houvast voor het oog.

Kapitalen

Kapitalen geven het begin van een zin aan, of naam. Ze zijn geschikt voor korte krachtige statements, maar een verschrikking voor lange teksten. Er is weinig onderscheid tussen letters indien een woord volledig uit kapitalen bestaat.

Afbreken

Eventueel moet je titels op kleine schermen (of andersom) aanpassen. Afbreken wordt op kleine schermen belangrijk. Het past dan meer tekst op een scherm.
Een weeskind is de eerste regel van een alinea die onderaan de vorige tekstkolom valt. Voor een mooie bladspiegel is het belangrijk om wezen te vermijden, en de meeste software heeft daar tegenwoordig allerlei trucjes voor.
Het omgekeerde van een weeskind is een hoerenjong. Een hoerenjong (of weduwe) duikt op wanneer de laatste regel van de onderste alinea naar de volgende kolom wipt.

Testen

Test op verschillende schermen: Bepaal belangrijke keuzes op representatieve schermen. Ontwerp voor extremen.

Responsive Typografie en Variable Font

Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface. Statische lay-outs en systeem lettertypen worden dynamische lay-outs en custom web lettertypen. Corpsgrootte en .stijlen moeten oneindig variabel zijn, variabele lettertypen moeten zich automatisch aanpassen aan de omgeving. Bijvoorbeeld in horloges (kleinste gebieden), interfaces in auto’s (verschillende lichtomstandigheden) of digitale displays van wasmachines (verschillende talen).

Toekomstvisie is dat typografie niet alleen responsief moet zijn, maar ook moet leven. Het idee van responsieve lettertypen is dat het lettertype er altijd hetzelfde uitziet en hetzelfde aanvoelt.

Oefening: KRANT TYPOGRAFEREN

Onderzoek en schets de layout van één krant. Onderzoek deze op verschillende schermformaten, op desktop en mobiel formaat. Hoe veranderd de hiërarchie van de verschillende modules?

Veranderd typografie (fonts, corpsgrootte, regellengte, ..)? Is alles nog goed leesbaar?

Telegraaf, Volkskrant, The Guardian

Oefening: RESPONSIVE TYPOGRAFEREN

Kies één interview, reportage of nieuwsartikel. Maak een layout voor mobiele telefoon en een voor desktopscherm. Maak tekst leesbaar op alle schermen.

Oefening: PAGINA TYPOGRAFEREN

Ontwerp een magazine spread of onepager (b.v. voor je product)

2-3 Afbeeldingen
Min. twee verschillende lettertypes
Min. 200 woorden voor de “dummy” body copy, approx. 8/10
Titel, foto bijschrift, credits, opsomming, quote

Oefening: WEBFONTS TESTEN

Test je lettertypes om te zien welke bij jouw project past en welke niet. Maak een specimen om te zien hoe het font in gebruik eruit gaat zien. Online fonts testen met bijvoorbeeld Web Font Specimen van Tim Brown.

Google Fonts, Typekit

Test met https://crossbrowsertesting.com/