7 eenvoudige regels voor mobiele typografie
Je hebt waarschijnlijk gehoord dat goede typografie onzichtbaar is, maar het is juister om te zeggen dat een goede typografie het lezen moeiteloos maakt.
Wanneer het oog langs een tekstlijn beweegt, gebeurt dit in sprongen, saccades genaamd; je leest geen letters, of zelfs woorden, je leest snapshots van delen van woorden en je hersens vult in wat het verwacht te vinden. Als de hersenen verrast zijn, stuurt het de ogen terug om te controleren of de veronderstelling correct was. Goede typografie minimaliseert het werk dat uw ogen moeten doen door een vloeiende lijn langs de lijn te creëren.
Mobiele apparaten hebben inherente uitdagingen voor elke typograaf: de ruimte is beperkt en het omgevingslicht is vaak slecht. Maar door eenvoudige aanpassingen aan de technieken die we al gebruiken voor het web, kunnen we de leesbaarheid op mobiele apparaten verbeteren.
1. Geef jezelf ruimte
In tegenstelling tot wat vaak wordt gedacht, gaat typografie niet over het rangschikken van kleine kronkelige lijnen op een scherm; typografie gaat grotendeels over de ruimte binnen en rondom hen.
Typografie is veel minder te danken aan lettervormen zelf, dan aan de ruimte die ze inlijsten
Om dit te begrijpen, helpt het om te begrijpen waar lettertypen vandaan komen: het gat in het midden van een 'o' (en een 'b', 'c', 'p', etc.) wordt een 'teller' genoemd. werden uit metaal gehakt voor gebruik in de originele drukpersen, die tellers werden gecreëerd door een metalen stoot die was gegraveerd en vervolgens in een plaat werd gedreven. De eerste typeontwerpers werkten eigenlijk met de vormen die niet zouden worden afgedrukt. Typografie is veel minder te danken aan lettervormen zelf, dan aan de ruimte die ze inlijsten.
Als we het hebben over hiërarchie, bedoelen we meestal
door naar
, en mogelijk door naar
. Maar er is een extra hiërarchie die van invloed is op de stroom van een regel of alinea, en dat is de ruimtelijke hiërarchie: de ruimte tussen letters is kleiner dan de afstand tussen woorden, de afstand tussen woorden is kleiner dan de afstand tussen de regels en weer.
Voor een optimale leesbaarheid op mobiele apparaten, let vooral op de ruimtelijke hiërarchie, de gestalt-stijl groepering van tekens in woorden, lijnen en paragrafen is des te belangrijker in natuurlijk licht.
2. Verkrijg de maat
Measure is de lengte van een regel tekst. Of, nauwkeuriger gezegd, het is de ideale lengte voor een regel tekst, aangezien het zeldzaam is dat elke regel precies past.
De algemeen geaccepteerde, ideale maat voor comfortabel lezen is ongeveer 65 tekens. De fysieke lengte van de meting is afhankelijk van het ontwerp van het lettertype, de tracking (zie hieronder) en de exacte tekst die u gebruikt. De eerste 65 tekens van dit artikel, ingesteld in PT Serif, zijn 26.875em breed, in Open Sans, 28.4375em, in Ubuntu, 27.3125em; als ik cursivering, kleine letters of een tiental andere typografische details had toegevoegd, zou dit verder variëren.
Het komt zelden voor dat 65 tekens zich uitstrekken tot de rand van een desktopbrowser, maar op de meeste mobiele apparaten strekken 65 tekens (indien groot genoeg weergegeven om leesbaar te zijn) zich uit over de grenzen van de browser heen. Bijgevolg moet u voor mobiele apparaten uw maat verkleinen.
Er is geen algemeen aanvaarde standaard voor meten op een mobiel scherm, hoewel traditioneel smalle tekstkolommen in kranten of tijdschriften naar 39 tekens streven. Omdat deze ideale maatregel al eeuwenlang is getest, kan hij ons goed dienen voor mobiele typografie.
3. Maak los en leid dan aan
Leiden is de ruimte tussen de lijnen en wanneer deze te strak wordt ingesteld, springt de saccade van het einde van de ene regel naar het begin van de volgende moeilijk te volgen lijn. Wanneer te losjes ingesteld, zullen de spleten tussen de woorden in lijn beginnen te komen, waardoor wat gewoonlijk rivieren worden genoemd, wordt gecreëerd , waardoor de vloeiende stroomlijn wordt onderbroken.
l-r: ideale leiding, te strak, te los.
De gebruikelijke norm voor leidinggeven is ongeveer 1,4 miljoen, maar in mijn ervaring is dat te krap voor schermen: een van de belangrijkste kenmerken van een lettertype dat goed op het scherm werkt, is groot en grote tellers hebben een beetje extra nodig om de ruimtelijke hiërarchie te behouden. .
Om die regel om te keren, vereist een kortere maat minder leiden. Dus terwijl je waarschijnlijk je leiding een beetje losser maakt voor bureaubladstijlen, vergeet dan niet om het voor mobiele schermen aan te scherpen.
4. Zoek de goede plek
Alle lettertypen hebben ten minste één sweet spot; een combinatie van de grootte waarmee ze zich het best op het scherm reproduceren en het punt waarop de anti-aliasing die in de browser wordt toegepast, het ontwerp van het lettertype zo min mogelijk vervormt.
De sweetspot is meestal het punt waarop de meeste lijnen overeenkomen met het pixelraster - pixellettertypen, als je ze onthoudt, werkten ze alleen als ze waren afgestemd op hun sweet spot.
Het instellen van een lettertype op de sweet spot resulteert in een groter contrast. Contrast is met name van belang bij het ontwerpen voor mobiel vanwege het mogelijk storende licht buiten uw subtiel verlichte apparaatlaboratorium.
Je zult zien dat kleine aanpassingen in het leiden lijnen uit hele pixels zullen duwen en trekken. Naar mijn mening overtreft het contrast voor mobiele schermen, dus als je compromissen moet sluiten om lijnen op hele pixels te houden, doe dat dan.
De standaardaanpak voor ontwerpers is om het type uit te leggen met behulp van een basislijnraster, maar voor mobiel moeten we de x-hoogte gebruiken (de x-hoogte is letterlijk de hoogte van de kleine letter 'x'). We weten uit leesbaarheidsstudies dat de hersenen de top van woorden herkennen, niet de onderkant, dus om een grotere saccadestroom te bereiken, moeten we ervoor zorgen dat de top van onze personages het dichtst bij pixels ligt.
5. Verlies je vod niet
Een vod is de rand van een tekstblok. Het meeste van wat je leest is links uitgelijnd (tenminste voor latin-gebaseerde talen), wat resulteert in een rafelige rechterrand .
Wanneer je ogen van het ene uiteinde van een lijn naar het volgende springen, is het brein beter in staat om de hoek en afstand van de volgende sprong te beoordelen, als alle sprongen consistent zijn - denk eraan dat je over springstokken loopt, het is veel sneller als ze consistent zijn verdeeld. Om deze reden moet de linkerrand van uw tekst plat zijn, waarbij elke regel op dezelfde plaats begint (precies het tegenovergestelde geldt voor talen die van rechts naar links lezen).
Als gevolg hiervan moet u nooit meer dan twee of drie regels tekst uitlijnen.
Tekst is vaak gerechtvaardigd, wat betekent dat de woorden op de regel gelijk verdeeld zijn zodat er geen vod aan beide zijden is. (Ik vermoed dat gerechtvaardigde tekst in de mode is omdat responsief ontwerp ontwerpers heeft geleerd om in blokken te denken.) Uitgevulde tekst resulteert in inconsistente witruimten en leidt in het ergste geval tot een paar woorden op een regel, die behoorlijk schokkend zijn. Het probleem met gerechtvaardigde tekst wordt nog verergerd door kortere meetwaarden, dus gematigde tekst kan onleesbaar zijn op mobiele apparaten.
l-r: links uitgelijnd, gecentreerd uitgelijnd, uitgelijnd.
Als netheid echt belangrijk voor u is, koppelt u de tekst af om de vod te verzachten, maar maak nooit tekst op mobiel rechtvaardig.
Ragged right-tekst heeft een extra voordeel op mobiel: tekst wordt vaak gelezen in afleidende situaties en lezers kijken vaak weg van tekst - om de naam van een station te controleren of om een oproep te beantwoorden. Een vod creëert een willekeurige vorm in de rechterkolom die het oog helpt zijn laatste positie te verplaatsen, met minimale herlezing.
6. Verminder het contrast
Hoewel we het contrast tussen tekst en achtergrond willen stimuleren, willen we het verminderen tussen verschillende typen niveaus.
Op mobiel is aanzienlijk minder tekst zichtbaar en dus wordt het contrast overdreven
De reden hiervoor is dat ons brein het belang beoordeelt op basis van context. Uw koppen kunnen twee of zelfs drie keer zo groot zijn als uw lichaamstekst op uw bureaublad, en dat werkt omdat er meer tekst op het scherm staat. Op mobiel is aanzienlijk minder tekst zichtbaar en dus wordt het contrast overdreven.
De meeste ontwerpers gebruiken een Fibonacci-reeks van een of andere soort om tekst op maat te maken. Voor mobiel, draai de verhoudingen omhoog om het contrast van de typeformaten te verminderen. Als u bijvoorbeeld de gulden snede gebruikt om de maat te vergroten, vermenigvuldigt u zich met 1,618. Neem voor mobiel de kleinere verhouding en vermenigvuldig in plaats daarvan met 1,382.
Desktopschermen tolereren meer extreme typografische schalen dan mobiele schermen.
7. Pas tracking aan schaal aan
Wanneer we onze lettergroottes voor mobiel aanpassen, moeten we ons bewust zijn van de noodzakelijke wijzigingen in het bijhouden.
(Laat ik dit vooraf stellen door te zeggen dat je kerning niet zou moeten aanpassen., Kerning is de spatiëring van twee letterparen, zodat de ruimte ertussen optisch consistent is met de ruimte tussen de andere karakters Kerning werd toegevoegd aan het lettertype toen het werd gebouwd , en het duurde waarschijnlijk maanden. Als je een professioneel gebouwd lettertype hebt gekozen, is het correct gedaan en als je denkt dat het niet goed is gedaan, zoek dan een ander lettertype.)
Volgen is geen kerning. Tracking is de letterafstand die wordt toegepast op alle tekens in het lettertype. U moet de tracking normaal gesproken ook niet aanpassen.
De uitzonderingen op die regel zijn voor grote tekst, zoals koppen en kleine tekst, zoals voetnoten. Grotere tekst vereist minder tracking en kleinere tekst vereist meer tracking. De eerste is te wijten aan groepering, en de laatste is het voordeel van het contrast. Als u wijzigingen in de koppen hebt aangebracht of als u een displaylettertype gebruikt dat doorgaans een strakkere tracking heeft, moet u mogelijk de tracking een beetje losser maken naarmate u de kolom naar beneden schuift.
Overzicht
Typografie is een ambacht dat ontwerpers een leven lang slijten, juist omdat elke tekst, elk lettertype en elke technologie nieuwe uitdagingen met zich meebrengt. Er zijn geen harde en snelle regels die altijd in elke situatie zullen werken.
Wanneer u streeft naar leesbaarheid, zijn er drie principes waar u rekening mee moet houden: een vloeiende lijn langs lijnen, een duidelijke ruimtelijke hiërarchie en voldoende contrast. Dit geldt met name voor het mobiele internet.
Er is geen regel die niet kan worden overruled op het bewijs van uw eigen ogen, maar de richtlijnen hier zullen dienen als een ideaal startpunt voor prachtig aangelegde tekst op mobiele apparaten.