Share
Wanneer u typografie op internet gebruikt, zijn er veel dingen waarmee u rekening moet houden om een pagina te maken die duidelijke toegang tot de inhoud biedt en op een leesbare manier presenteert. Meestal kan dit worden opgesplitst in twee buckets: Leesbaarheid en Leesbaarheid. Leesbaarheid verwijst naar de manier waarop woorden en blokken van het type op een pagina worden gerangschikt. De leesbaarheid verwijst naar hoe een lettertype is ontworpen en hoe goed een individueel personage kan worden onderscheiden van een ander. In het belang van dit artikel, zal ik een beetje over beide praten, wat enkele specifieke technieken suggereert om je typografie te verbeteren.
Laten we eerst de leesbaarheid bespreken. Het is belangrijk om te begrijpen wat het ene lettertype beter leesbaar maakt dan het andere. Bij het kiezen van een lettertype hangt het er allemaal vanaf hoe je het wilt gebruiken. Stel jezelf wat basisvragen: op welke maat wordt de tekst gebruikt? Zal het verschijnen als een kopie of een kop? Moet het een werkpaard zijn of wordt het meer gebruikt als eye-candy? Wordt het gekoppeld aan een ander lettertype? Past het uiterlijk van het lettertype bij het onderwerp??
Het is ook belangrijk om te onthouden dat verschillende lettertypen zijn ontworpen voor verschillende doeleinden. De originele Garamond is bijvoorbeeld ontworpen om goed leesbaar te zijn wanneer deze in een grote hoeveelheid tekst wordt afgedrukt. Sommigen zeggen ook dat dit het meest milieuvriendelijke lettertype van zijn tijd was, waardoor het inktverbruik werd bespaard. Bell Centennial is een lettertype in opdracht van AT & T in de jaren 1970, ontworpen om te worden gebruikt in telefoongidsen. Deze mappen zijn gemaakt van goedkoop papier en om deze reden is Bell Centennial zo ontworpen dat er tijdens het drukproces inkt wordt verspreid. Aan de digitale kant zijn er lettertypen die speciaal voor het scherm zijn ontworpen, zoals Georgië en Verdana. Azura is een relatief recent lettertype dat speciaal is ontworpen voor het lezen van tekst op het scherm.
Kortom, het helpt om de beoogde context te kennen van het lettertype dat u overweegt te gebruiken. Sommige lettertypen zijn inderdaad vrij flexibel, bevatten verschillende gewichten en ze kunnen op verschillende manieren worden gebruikt. Anderen zijn meer beperkt, ontworpen om heel specifiek te worden gebruikt.
Dit leidt ons naar de eerste van een paar dingen om te onthouden over de leesbaarheid van een lettertype:
Sommige lettertypen zijn ontworpen om groot te worden gebruikt, zoals in krantenkoppen. Meestal zijn deze lettertypen minder leesbaar in kleinere formaten en mogen ze niet worden gebruikt voor body-copy. Deze worden genoemd gezichten weergeven. Het lettertype hieronder, Knock-out, is een van mijn favoriete display-gezichten.
Andere lettertypen zijn specifiek ontworpen om te worden gebruikt in grote delen met een kleinere body-kopie. Dit worden tekst of lichaamsgezichten genoemd.
Er zijn veel variaties tussen. Typisch, wat ik doe is een gezicht vinden dat volgens mij geschikt is voor de taak, in gedachten houdend dat ik van plan ben het met een ander lettertype te combineren, en het uit te proberen. Ik heb al alle lettertypen gefilterd die volgens mij niet geschikt zijn voor de taak, maar als je net begint, kan het een kwestie van vallen en opstaan zijn.
Dus wat is leesbaarder: serif of sans-serif-lettertypen? De geschiedenis vertelt ons dat schreefgelingen altijd als leesbaarder werden beschouwd, omdat ze bijna altijd in druk werden gebruikt voor grote tekstpassages. De serif gezichten laten het oog gemakkelijker over de tekst stromen, waardoor de leessnelheid verbetert en oogvermoeidheid vermindert.
Dat gezegd hebbende, er zijn veel leesbare schreefloze gezichten. Online lijkt het alsof schreefloze gezichten meer voor lichaamstekst worden gebruikt dan ooit tevoren. Ik denk dat hier verschillende redenen voor zijn. De eenvoudigere lettervormen lijken beter te werken met de huidige designtrends en kunnen moderner aanvoelen. Ook lezen we meestal geen grote tekstpassages op een website, dus sans-serif-lettertypen doen het prima in kortere brokken kopie.
Opgemerkt moet worden dat er discussie over dit onderwerp is - een gezichtspunt is dat serif gezichten niet verminderen goed op het scherm in wezen de leesbaarheid verminderen. Anderen geloven dat er geen verschil is. De positie die ik altijd neem is, voelt het goed? Zou ik een gedeelte van het type lezen zoals ik het heb ontworpen??
Een ander kenmerk om op te merken is x-hoogte. Dit is meestal van toepassing op het gebruik van teksttypen op hoofdtekst. De x-hoogte is, nou ja, de maat van de hoogte van de kleine letter "x" in een bepaald lettertype. Er wordt geen rekening gehouden met de hoogte van de stijgers of daalders. Je zult er misschien versteld van staan hoeveel verschil er is in x-hoogte van het ene gezicht naar het andere. Bij gebruik van kleine lettertypen zijn lettertypen met grotere x-hoogten meestal beter leesbaar.
Leesbaarheid gaat over het zodanig rangschikken van woorden en groepen woorden dat de lezer het oog gemakkelijk en op een logische manier toegang heeft tot de inhoud. Het is echt een kunstvorm die na verloop van tijd wordt aangescherpt als er succesvolle combinaties worden gevonden.
In mijn ervaring is dit een van de moeilijkste concepten om te begrijpen voor beginnende ontwikkelaars en ontwerpers. Zelfs doorgewinterde ontwerpers worstelen soms met hoe je typografie het best kunt indelen in een lay-out. Nu die twee benamingen beginnen te versmelten als het gaat om webdesign, is het belangrijk om het begrip leesbaarheid te gaan begrijpen. Hier zijn een paar dingen om in gedachten te houden:
Een van de meest voorkomende typografische 'fouten' die ik vandaag op het web zie, is een onjuiste spatiëring van het type. Waar ik het hier over heb, zijn gevallen waarbij een bloktekst niet voldoende marge, subkoppen en gecorreleerde hoofdtekst bevat die niet visueel zijn gegroepeerd, enzovoort. Met de juiste spatiëring (gecombineerd met hiërarchie) kan de lezer de tekst scannen en op de gewenste punten openen.
Het is geen vaste regel, maar het lijkt mij dat de relatie tussen de alinea-tussenruimte (extra ruimte vóór of na een alinea), de ruimte rond een blok van het type en de afstand tussen letters evenredig aan de regel kan worden gerelateerd hoogte van een alinea. Lijnhoogte wordt gedefinieerd als de verticale afstand tussen tekstregels. Dus bijvoorbeeld, als de regelhoogte van één alinea is ingesteld op 2em en een alinea met dezelfde tekstgrootte is ingesteld op 1.5em, vereist de eerste alinea meer alinea-tussenruimte en waarschijnlijk meer marge eromheen.
Veel hiervan gebeurt met het oog in plaats van met een exacte formule, maar ik gebruik wel een goede vuistregel als het gaat om de relatie tussen alinea-tussenruimte en lijnhoogte. Ik maak meestal mijn alinea-tussenruimte (die op het web wordt vertaald naar marge of opvulling bovenaan of onderaan een alinea geplaatst) ongeveer de helft van de regelhoogte. Dit heeft de neiging om passages van tekst "bij elkaar houden" te helpen in plaats van een volledige harde return tussen elke alinea te gebruiken, waardoor grote hoeveelheden ruimte tussen paragrafen worden gecreëerd.
Uiteraard moet ervoor worden gezorgd dat de tekst niet te klein wordt gepresenteerd. Het is ook belangrijk om te onthouden dat de leeftijd van uw publiek kan variëren, vandaar de kwaliteit van hun gezichtsvermogen. Over het algemeen is het goed om rond 13px of .813em op zijn kleinst te blijven. Momenteel, met de bredere implementatie van responsieve websites, is er een tendens richting grotere body-copy. In RWD is het ook belangrijk om in gedachten te houden dat verschillende tekstgroottes voor verschillende apparaten mogelijk zinvol zijn. Het kan bijvoorbeeld logisch zijn om de kopieercapaciteit op de breedte van een mobiele telefoon te vergroten in plaats van de breedte van een bureaublad.
Een andere veel voorkomende praktijk die de leesbaarheid van het type belemmert, is dat de horizontale regels van het type op een pagina te breed worden. Deze afstand wordt maat genoemd (soms ook lijnlengte). Als een regel van het type te lang is, is het een vervelend lezen en een rek voor het oog van de lezer om terug te keren naar de linkerrand van het tekstblok voor de volgende regel. Het is ook intimiderend om een tekstblok op deze manier te ordenen en sommige lezers proberen het misschien zelfs niet te lezen.
Dus wat is de maximale breedte die een tekstblok moet hebben? Nou, het hangt allemaal af van de grootte van de tekst. Hoe groter de tekst, hoe langer de regel kan zijn (dat hele proportie ding opnieuw). Naar mijn mening is in het algemeen ongeveer 70 tekens zo lang als je wilt zijn. Gemiddeld probeer ik voor tekst met tekst van het hoofdgedeelte van het bericht binnen de 45ems te blijven.
Letterafstand (ook wel tracking genoemd) is de consistente toename of afname van de afstand tussen de lettervormen in een woord of tekstblok. Het moet niet worden verward met kerning, wat verwijst naar het aanpassen van de afstand tussen individuele karakters. Letterafstand kan worden gebruikt om de dichtheid van een tekstblok of een afzonderlijke kop of subkop aan te passen.
Het is duidelijk dat de spatiëring van letters invloed heeft op de leesbaarheid van tekst. Te veel of te weinig en leesbaarheid wordt aangetast. Er zijn echter tijden dat, naar mijn mening, letterspatiëring nodig is. Zoals je in de afbeelding hieronder kunt zien, vind ik het leuk om royale letterafstand toe te voegen aan subkoppen of frases van hoofdletters. Ik vind het gemakkelijker om tekst in hoofdletters te lezen wanneer de tekens wat extra ruimte om hen heen hebben. Ook, afhankelijk van het gebruikte lettertype, wil ik de letterspatiëring enigszins in de body copy vergroten.
Het klinkt misschien voor de hand liggend dat een goed type contrast essentieel is voor de leesbaarheid. Feit is dat ontwerpers (inclusief ikzelf) altijd de grenzen van contrast verleggen. Het kan zijn dat we willen dat een bepaald tekstgedeelte minder prominent is, of dat we "lagen" van hiërarchie in ons ontwerp creëren. Hoe dan ook, houd er rekening mee dat schermcontrast, vooral als het gaat om kleine, fijne vormen, zoals lichaamstekst, sterk kan verschillen van scherm tot scherm. Het is het beste om een beetje "te veel" contrast aan de kant te zetten.
Zoals we al in deze reeks hebben besproken, speelt hiërarchie een grote rol bij de leesbaarheid van inhoud. Een succesvolle hiërarchie organiseert de inhoud in verteerbare delen en laat de lezer eenvoudig scannen en toegang krijgen tot de tekst.
Begin na te denken over het gebruik van deze leesbaarheids- en leesbaarheidsconcepten in uw projecten. Hoe meer je het doet, hoe beter je wordt.
Accentsconagua