7 enkle regler for mobil typografi
Du har sikkert hørt, at god typografi er usynlig, men det er mere præcist at sige, at god typografi gør læsningen unødig.
Når øjet rejser langs en tekstlinje, gør det det i hoppe, kaldet saccades; du læser ikke bogstaver, eller endda ord, du læser snapshots af dele af ord og din hjerne udfylder det, det forventer at finde. Hvis hjernen er overrasket, sender den øjnene tilbage for at kontrollere, om dens antagelse var korrekt. God typografi minimerer det arbejde, dine øjne skal gøre ved at skabe en jævn strømning langs linjen.
Mobile enheder har iboende udfordringer for enhver typograf: Rum er begrænset, og omgivende lys er ofte dårlig. Men ved at foretage enkle justeringer af de teknikker, vi allerede bruger til internettet, kan vi forbedre læsbarheden på mobile enheder.
1. Giv dig selv plads
I modsætning til den populære trosretning handler typografi ikke om arrangementet af små squiggly linjer på en skærm; Typografi handler stort set om rummet i og omkring dem.
Typografi skylder langt mindre til brevformularer selv end til det rum, de rammer
For at forstå dette hjælper det med at forstå, hvor skrifttyper kommer fra: hullet midt i en 'o' (og en 'b', 'c', 'p' osv.) Kaldes en "tæller". Når skrifttyper blev udskåret af metal til brug i de originale trykpresser, disse tællere blev skabt af en metalstans, der blev udskåret og derefter kørt ind i en plade. De første type designere arbejdede faktisk med de former, der ikke ville udskrive. Typografi skylder langt mindre til brevformularer selv end til det rum, de rammer.
Når vi taler om hierarki, mener vi normalt
gennem til
, og muligvis videre til
. Men der er et ekstra hierarki, der påvirker strømmen af en linje eller et afsnit, og det er det rumlige hierarki: mellemrummet mellem bogstaver er mindre end mellemrummet mellem ord, mellemrummet mellem ord er mindre end mellemrummet mellem linjer og frem.
For optimal læsbarhed på mobilen skal du være særlig opmærksom på det rumlige hierarki. Strukturering af tegn i ord, linjer og afsnit er desto mere afgørende i naturligt lys.
2. Få foranstaltningen
Mål er længden af en tekstlinje. Eller mere præcist er det den ideelle længde for en tekstlinje, da det er sjældent, at hver linje passer nøjagtigt.
Det almindeligt accepterede, ideelle mål for komfortabel læsning er omkring 65 tegn. Målets fysiske længde afhænger af skrifttypens design, sporingen (se nedenfor) og den nøjagtige tekst, du bruger. De første 65 tegn i denne artikel, der er angivet i PT Serif, er 26.875 bredt, i Open Sans, 28.4375em, i Ubuntu, 27.3125em; hvis jeg havde tilføjet kursiv, små hætter eller et dusin andre typografiske detaljer ville det variere yderligere.
Det er sjældent, at 65 tegn strækker sig til kanten af en desktop-browser, men på de fleste mobile enheder strækker 65 tegn (hvis den er vist stor nok til at være læselig) ud over grænserne for browseren. Derfor er du nødt til at reducere din måling for mobile enheder.
Der er ingen almindeligt accepteret standard til måling på en mobil skærm, men traditionelt er smalle kolonner af tekst i aviser eller magasiner stræb efter 39 tegn. Da denne ideelle foranstaltning er blevet testet gennem århundreder, tjener den os godt til mobil typografi.
3. Løsn, og stram derefter ledningen
Ledende er mellemrummet mellem linjer, og når det er sat for stramt, gør saccadehoppet fra enden af en linje til starten af den næste svære at følge. Når der vælges for løst, vil huller mellem ord begynde at lineere op, hvilket skaber det, der normalt kaldes floder, og afbryder den glatte strøm af linjen.
l-r: Ideel leder, for tæt, for løs.
Den sædvanlige standard for ledende er omkring 1,4 em, men i min erfaring er det for stramt til skærmbilleder: Et af de vigtigste karakteristika ved et skrifttype, der fungerer godt på skærmen, er store tællere, og store tællere kræver lidt ekstra, der fører til at opretholde det rumlige hierarki .
Omvendt denne regel kræver en kortere foranstaltning mindre ledende. Så selvom du sandsynligvis vil sætte din ledende lidt løstere til desktop stilarter, skal du huske at stramme den til mobile skærme.
4. Find den søde plet
Alle skrifttyper har mindst et sødt sted; en kombination af størrelsen, som de reproducerer bedst på skærmen, og det punkt, hvor anti-aliasing anvendt i browseren forvrider skrifttypens design så lidt som muligt.
Den søde plet er normalt det punkt, hvor de fleste streger stikker op med pixelgitteret - pixel skrifttyper, hvis du husker dem, kun har arbejdet, når de er dimensioneret til deres søde plet.
Indstilling af en skrifttype til sit søde sted resulterer i større kontrast. Kontrast er særlig vigtig, når du designer til mobil på grund af muligheden for distraherende blænding uden for dit subtly litede enhedslab.
Du finder, at mindre justeringer af ledende vil skubbe og trække linjer ud af hele pixels. Efter min mening er der kontrasttromler, der fører til mobile skærme, så hvis du er nødt til at gå på kompromis med at føre linjer på hele pixels, så gør du det.
Standardmetoden for designere er at lægge type ud ved hjælp af et basislinje, men for mobil skal vi bruge x-højden i stedet (x-højden er bogstaveligt højden af små bogstaver 'x'). Vi ved fra læsbarhedsundersøgelser, at hjernen genkender toppen af ordene, ikke bunden, for at opnå en større saccadestrøm, skal vi sikre, at toppen af vores figurer er nærmest justeret til pixels.
5. Mist ikke din klud
En klud er kanten af en tekstblok. Det meste af det du læser er justeret til venstre (i hvert fald for latinbaserede sprog), hvilket resulterer i en ragged højre kant.
Når dine øjne hopper fra den ene ende af en linje til den næste, er hjernen bedre i stand til at bedømme vinklen og afstanden til det næste hoppe, hvis alle hoppene er konsekvente - tænk på det som løber over stepping stones, det er meget hurtigere, hvis de er indbyrdes adskilt. Af den grund skal den venstre kant af din tekst være flad, hvor hver linje starter på samme sted (det modsatte gælder for sprog, der læser højre mod venstre).
Som følge heraf bør du aldrig centrere mere end to eller tre linjer tekst.
Tekst er ofte begrundet, hvilket betyder, at ordene på linjen er fordelt ligeligt, så der ikke er nogen lap på begge sider. (Jeg formoder, at berettiget tekst er moderigtigt, fordi lydhørigt design har lært designere at tænke i blokke.) Retfærdig tekst resulterer i inkonsekvent hvide rum og i værste fald fører til et par ord på en linje, der er alvorligt ødelæggende. Problemet med berettiget tekst forværres med kortere mål, så berettiget tekst kan være ulæselig på mobilen.
l-r: venstrejusteret, centerjusteret, berettiget.
Hvis nethed er virkelig vigtigt for dig, skal du hænge i teksten for at blødgøre kluden, men retfærdiggør aldrig tekst på mobilen.
Ragged right text har en ekstra fordel på mobil: tekst læser ofte i distraherende situationer, og læsere kigger ofte væk fra tekst - for at kontrollere et stationsnavn eller besvare et opkald. En klud skaber en tilfældig form nedad i højre kolonne, der hjælper øjet med at flytte sin sidste position, med minimal genlæsning.
6. Reducer kontrast
Selvom vi ønsker at tilskynde til kontrast mellem tekst og baggrund, ønsker vi at reducere det mellem forskellige niveauer af typen.
På mobil er væsentlig mindre tekst synlig, og så bliver kontrast overdrevet
Årsagen til dette er, at vores hjerner dømmer betydning på baggrund af kontekst. Dine overskrifter kan være to eller endog tre gange størrelsen på din krops tekst på skrivebordet, og det virker, fordi der er mere tekst på skærmen. På mobil er væsentlig mindre tekst synlig, og så bliver kontrast overdrevet.
De fleste designere bruger en Fibonacci-sekvens af en slags formateringsstørrelse. Til mobilen skal du stramme forholdene op for at reducere kontrast af typestørrelser. Hvis du for eksempel bruger den gyldne ratio for at øge størrelsen, multipliceres du med 1.618. Til mobil tager du den mindre andel og multiplicerer med 1.382 i stedet.
Skærmbilleder tåler mere ekstreme typografiske skalaer end mobile skærme.
7. Juster sporing til skala
Når vi justerer vores skriftstørrelser til mobil, skal vi være opmærksomme på de nødvendige ændringer i sporing.
(Lad mig forord dette ved at sige at du ikke bør justere kerning. Kerning er afstanden mellem to bogstavpar, så at mellemrummet mellem dem er optisk i overensstemmelse med mellemrummet mellem de andre tegn. Kerning blev føjet til skrifttypen, da den blev bygget , og det har sikkert taget måneder. Hvis du har valgt en professionelt bygget skrifttype, er det blevet gjort korrekt, og hvis du mener, at det ikke er gjort korrekt, skal du finde en anden skrifttype.)
Sporing er ikke kerning. Sporing er bogstavafstanden på alle tegn i skrifttypen. Du bør normalt ikke justere sporing enten.
Undtagelserne fra denne regel gælder for stor tekst, såsom overskrifter og lille tekst, såsom fodnoter. Større tekst kræver mindre sporing, og mindre tekst kræver mere sporing. Den førstnævnte skyldes gruppering, og sidstnævnte er til gavn for kontrast. Hvis du har foretaget ændringer i overskrifter, eller hvis du bruger et skærmtypefelt, der typisk har en strammer sporing, skal du måske løsne sporingen lidt, når du skalere den ned.
Resumé
Typografi er et håndværk, som designere bruger en livstid honing, netop fordi hver tekst, hvert skrifttype og enhver teknologi bringer nye udfordringer. Der er ingen hurtige og hurtige regler, som altid vil fungere i enhver given situation.
Når du søger efter læsbarhed, er der tre principper, du skal huske på: en jævn strømning langs linjerne, et klart rumhierarki og en passende kontrast. Dette gælder især for mobilwebben.
Der er ingen regel, der ikke kan overstyres på dine egne øjne, men retningslinjerne her vil tjene som et ideelt udgangspunkt for smukt lagt tekst på mobile enheder.