7 enkle regler for mobil typografi
Du har sikkert hørt at god typografi er usynlig, men det er mer nøyaktig å si at god typografi gjør at lesingen er uanstrengt.
Når øyet beveger seg langs en tekstlinje, gjør det det i hopp, kalt saccades; du leser ikke bokstaver, eller til og med ord, du leser øyeblikksbilder av deler av ord og hjernen fyller ut hva det forventer å finne. Hvis hjernen er overrasket, sender den øynene tilbake for å sjekke om antakelsen var korrekt. God typografi minimerer arbeidet dine øyne må gjøre ved å skape en jevn flyt langs linjen.
Mobile enheter har iboende utfordringer for enhver typograf: Plassen er begrenset, og omgivende lys er ofte dårlig. Men ved å gjøre enkle justeringer av teknikker vi allerede bruker på nettet, kan vi forbedre lesbarheten på mobile enheter.
1. Gi deg selv plass
I motsetning til popular tro, handler typografi ikke om arrangering av små skarpe linjer på en skjerm; Typografi handler stort sett om rommet i og rundt dem.
Typografi skylder seg langt mindre til brevformene selv, enn til det rommet de rammer
For å forstå dette, hjelper det å forstå hvor fonter kommer fra: hullet i midten av en 'o' (og en 'b', 'c', 'p' osv.) Kalles en "teller". Når fonter ble skåret ut av metall for bruk i de originale trykkpressene, disse tellene ble skapt av et metallstempel som ble skåret og deretter kjørt inn i en plate. De første typen designere jobbet faktisk med de former som ikke ville skrive ut. Typografi skylder seg langt mindre til brevformene selv, enn til det rommet de rammer.
Når vi snakker om hierarki, mener vi vanligvis
gjennom til
, og muligens videre til
. Men det er et ekstra hierarki som påvirker strømmen av en linje, eller et avsnitt, og det er det romlige hierarkiet: mellomrom mellom bokstaver er mindre enn mellomrom mellom ord, mellomrom mellom ord er mindre enn mellomrom mellom linjer frem og tilbake.
For optimal lesbarhet på mobil, vær spesiell oppmerksom på det geografiske hierarkiet, den gestaltstilte gruppering av tegn til ord, linjer og avsnitt er enda viktigere i naturlig lys.
2. Få tiltaket
Mål er lengden på en tekstlinje. Eller mer nøyaktig er det den ideelle lengden for en tekstlinje, da det er sjeldent at hver linje passer nøyaktig.
Det allment aksepterte, ideelle tiltaket for behagelig lesing er rundt 65 tegn. Målets fysiske lengde vil avhenge av utformingen av skrifttypen, sporing (se nedenfor) og den nøyaktige teksten du bruker. De første 65 tegnene i denne artikkelen, sett i PT Serif, er 26.875 i bredden, i Open Sans, 28.4375em, i Ubuntu, 27.3125em; hvis jeg hadde lagt til kursiv, små caps eller et dusin andre typografiske detaljer, ville det variere ytterligere.
Det er sjeldent at 65 tegn strekker seg til kanten av en skrivebordsbrowser, men på de fleste mobile enheter strekker 65 tegn (hvis de vises stort nok til å være lesbare) ut over grensene til nettleseren. Derfor, for mobile enheter, er du nødt til å krympe målet ditt.
Det finnes ingen vanlig godkjent standard for måling på en mobil skjerm, men tradisjonelt smale tekstkolonner i aviser eller magasiner strækker seg til 39 tegn. Da dette ideelle tiltaket har blitt testet gjennom århundrer, tjener det oss godt for mobil typografi.
3. Løsne, og stram ledningen
Ledende er mellomrommet mellom linjer, og når det er satt for tett, blir saccadehoppet fra slutten av en linje til starten av det neste vanskelig å følge. Når det er satt for løst, vil gap mellom ord begynne å rade opp, og skape det som vanligvis kalles elver, og forstyrrer den glatte strømmen av linjen.
l-r: Ideell ledning, for stram, for løs.
Den vanlige standarden for ledende er rundt 1.4em, men i min erfaring er det for stramt for skjermer: En av de viktigste egenskapene til et skrifttype som fungerer godt på skjermen er store tellere, og store tellere krever litt ekstra som fører til å opprettholde det spatiale hierarkiet .
Omvendt den regelen krever et kortere tiltak mindre ledende. Så mens du sannsynligvis vil lede deg litt løst for skrivebordsstiler, må du huske å stramme den for mobile skjermer.
4. Finn det søte stedet
Alle skrifttyper har minst ett søtt sted; en kombinasjon av størrelsen som de reproduserer best på skjermen, og det punktet som anti-aliasing brukes i nettleseren, forvrenger utformingen av skrifttypen så lite som mulig.
Den søte flekken er vanligvis det punktet som de fleste strøk linje opp med pikselruten - pikselfonter, hvis du husker dem, jobbet bare når de er dimensjonert til deres søte flekk.
Innstilling av en skrifttype til sin søte plass resulterer i større kontrast. Kontrast er spesielt viktig når du designer for mobil på grunn av potensialet for distraherende gjenskinn utenfor din subtly opplyste enhetslab.
Du finner at mindre justeringer av ledende vil presse og trekke linjer av hele piksler. Etter min mening, kontrast trumps fører til mobile skjermer, så hvis du må kompromittere fører til å holde linjer på hele piksler, gjør det.
Standardmetoden for designere er å legge ut type ved hjelp av et grunnlinje, men for mobil må vi bruke x-høyden i stedet (x-høyden er bokstavelig talt høyden på små bokstaver 'x'). Vi vet fra lesbarhetsstudier at hjernen gjenkjenner toppen av ordene, ikke bunnen, for å oppnå en større saccadestrøm, må vi sørge for at toppen av våre tegn er nærmest justert til piksler.
5. Ikke miste rag
En klut, er kanten av en blokk med tekst. Det meste av det du leser er justert igjen (minst for latinbaserte språk) som resulterer i en ragged høyre kant.
Når øynene dine hopper fra den ene enden av linjen til den neste, er hjernen bedre i stand til å dømme vinkelen og avstanden til neste hopp, hvis alle hoppene er konsekvente - tenk på det som å løpe over stepping stones, det er mye raskere hvis de er i avstand konsekvent. Av den grunn bør den venstre kanten av teksten være flat, med hver linje som begynner på samme sted (det nøyaktige motsatt gjelder for språk som leser til høyre til venstre).
Som et resultat bør du aldri sentrere mer enn to eller tre linjer med tekst.
Ofte er teksten rettferdiggjort, noe som betyr at ordene på linjen er fordelt likt, slik at det ikke er noen lister på hver side. (Jeg mistenker at begrunnet tekst er fasjonabelt fordi lydhør design har lært designere å tenke i blokker.) Rettslig tekst resulterer i inkonsekvent hvittrom, og i verste fall fører til et par ord på en linje som er alvorlig knust. Problemet med begrunnet tekst forverres med kortere mål, slik at begrunnet tekst kan være ulæselig på mobilen.
l-r: venstrejustert, midtjustert, begrunnet.
Hvis nøyaktighet er veldig viktig for deg, skal du henheve teksten for å myke rag, men aldri rettferdiggjøre tekst på mobilen.
Ragged right text har en ekstra fordel på mobilen: tekst leses ofte i distraherende situasjoner, og leserne kaster ofte bort fra tekst - for å sjekke et stasjonsnavn, eller svare på et anrop. En rag skaper en tilfeldig form nedover høyre kolonne som hjelper øyet å flytte sin siste posisjon, med minimal gjenavlesning.
6. Reduser kontrast
Mens vi ønsker å oppmuntre kontrast mellom tekst og bakgrunn, vil vi redusere det mellom ulike nivåer av type.
På mobil er betydelig mindre tekst synlig og så blir kontrast overdrevet
Årsaken til dette er at våre hjerner dømmer viktighet ut fra kontekst. Overskriftene dine kan være to, eller til og med tre ganger størrelsen på din tekst på skrivebordet, og det fungerer fordi mer tekst er på skjermen. På mobil er betydelig mindre tekst synlig og så blir kontrast overdrevet.
De fleste designere bruker en Fibonacci-sekvens av noe slag til størrelsen på tekst. For mobil, stram forholdene opp for å redusere kontrast av type størrelser. Hvis du for eksempel bruker det gyldne forholdet for å øke størrelsen, multipliserer du med 1.618. For mobil, ta den mindre andelen og multipliser med 1,382 i stedet.
Bordskjermer tolererer mer ekstreme typografiske skalaer enn mobile skjermer.
7. Juster sporing til skala
Når vi justerer skriftstørrelsene for mobil, må vi være oppmerksomme på nødvendige endringer i sporing.
(La meg forord dette ved å si at du ikke bør justere kerning. Kerning er avstanden mellom to bokstavspar, slik at mellomrummet mellom dem er optisk konsistent med mellomromet mellom de andre tegnene. Kerning ble lagt til skrift når det ble bygget , og det tok sikkert måneder. Hvis du har valgt en profesjonelt bygget skrift, er det gjort riktig, og hvis du tror at det ikke er gjort riktig, finn en annen skrift.)
Sporing er ikke kerning. Sporing er brevavstanden som er brukt på alle tegn i skriften. Du bør vanligvis ikke justere sporing heller.
Unntaket til regelen gjelder for stor tekst, for eksempel overskrifter og liten tekst, for eksempel fotnoter. Større tekst krever mindre sporing, og mindre tekst krever mer sporing. Den førstnevnte skyldes gruppering, og sistnevnte er til fordel for kontrast. Hvis du har gjort endringer i overskrifter, eller hvis du bruker et visningsfelt som vanligvis har strammere sporing, må du kanskje løsne sporingen litt etter hvert som du skalere den ned.
Sammendrag
Typografi er et håndverk som designere tilbringer en levetid honing, nettopp fordi hver tekst, alle skrifttyper og alle teknologier gir nye utfordringer. Det er ingen harde og raske regler som alltid vil fungere i hver gitt situasjon.
Når du ønsker å lese, er det tre prinsipper du må huske på: en jevn flyt langs linjer, et klart mellomrom og et passende kontrast. Dette gjelder spesielt for mobilnett.
Det er ingen regel som ikke kan overstyres på bevisene for dine egne øyne, men retningslinjene her vil tjene som et ideelt utgangspunkt for vakkert lagt ut tekst på mobile enheter.