Du har nog hört att bra typografi är osynlig, men det är mer exakt att säga att bra typografi gör att läsningslösningen är enkel.

När ögat reser längs en textlinje gör det det i hopp, så kallade saccades; du läser inte bokstäver, eller till och med ord, du läser ögonblicksbilder av delar av ord och din hjärna fyller i vad den förväntar sig att hitta. Om hjärnan är förvånad skickar den ögonen tillbaka för att kontrollera om dess antagande var korrekt. God typografi minimerar det arbete dina ögon måste göra genom att skapa ett jämnt flöde längs linjen.

Mobila enheter har inneboende utmaningar för någon typograf: utrymme är begränsat och omgivande ljus är ofta dåligt. Men genom att göra enkla anpassningar till de tekniker som vi redan använder för webben kan vi förbättra läsbarheten på mobila enheter.

1. Ge dig själv plats

I motsats till popular tro, handlar typografi inte om arrangemang av små squiggly linjer på en skärm; Typografi handlar i stor utsträckning om utrymmet inom och runt dem.

För att förstå detta hjälper det att förstå var teckensnitt kom från: hålet mitt i en 'o' (och en 'b', 'c', 'p' etc.) kallas en "räknare". När teckensnitt skars ut ur metall för användning i de ursprungliga tryckpressarna, dessa räknare skapades av en metallstans som var huggen och sedan driven till en platta. De första typdesignerna arbetade faktiskt med de former som inte skulle skriva ut. Typografi beror väldigt mindre på brevformar själva än till det utrymme som de ramar.

När vi pratar om hierarkin menar vi vanligtvis

genom att

, och möjligen vidare till

. Men det finns en ytterligare hierarki som påverkar flödet av en rad eller ett stycke, och det är den rymliga hierarkin: mellanslag mellan bokstäver är mindre än mellanslag mellan ord, mellanslag mellan ord är mindre än mellanslag mellan linjer och framåt.

För optimal läsbarhet på mobilen, var särskilt uppmärksam på den rymliga hierarkin, den gestaltformade gruppering av tecken till ord, linjer och stycken är allt viktigare i naturligt ljus.

2. Få åtgärden

Måttet är längden på en rad text. Eller mer exakt är det den ideala längden för en textrad, eftersom det är sällsynt att varje linje passar exakt.

Den allmänt accepterade, idealiska åtgärden för bekväm läsning är cirka 65 tecken. Åtgärdens fysiska längd beror på typsnittets utformning, spårningen (se nedan) och den exakta texten du använder. De första 65 tecknen i denna artikel, som anges i PT Serif, är 26.875 breda, i Open Sans, 28.4375em, i Ubuntu, 27.3125em; om jag hade lagt till kursiv, små kepsar eller ett dussin andra typografiska detaljer skulle det variera ytterligare.

Det är sällsynt att 65 tecken sträcker sig till kanten på en skrivbords-webbläsare, men på de flesta mobila enheter sträcker sig 65 tecken (om de är tillräckligt stora för att vara läsbara) utöver gränserna för webbläsaren. Följaktligen, för mobila enheter är du tvungen att minska din åtgärd.

Det finns ingen allmänt accepterad standard för mätning på en mobil skärm, men traditionellt smala kolumner av text i tidningar eller tidningar strävar efter 39 tecken. Eftersom denna ideala åtgärd har testats under århundradena, tjänar den oss bra för mobil typografi.

3. Lossa och dra åt ledningen

Ledande är utrymmet mellan linjerna och när de ställs för tätt, gör saccadhoppet från slutet av en linje till början av nästa svåra att följa. När du ställer in för löst, börjar luckor mellan ord att ställa upp, vilket skapar det som vanligtvis kallas floder och avbryter det smidiga flödet av linjen.

l-r: perfekt ledande, för tight, för lös.

Den vanliga standarden för ledning är ca 1.4em, men enligt min erfarenhet är det för hårt för skärmar: En av de viktigaste egenskaperna hos en typsnitt som fungerar bra på skärmen är stora räknare och stora räknare kräver lite extra som leder till att den rymliga hierarkin bibehålls .

Omvända den här regeln kräver en kortare åtgärd mindre ledande. Så samtidigt som du förmodligen sätter din ledare lite lösare för skrivbordsstilar, kom ihåg att dra åt den för mobila skärmar.

4. Hitta den söta platsen

Alla teckensnitt har minst en söt fläck; en kombination av storleken på vilken de reproducerar bäst på skärmen och den punkt där den anti-aliasing som appliceras i webbläsaren snedvrider utformningen av typsnittet så lite som möjligt.

Den söta fläcken är vanligtvis den punkt där de flesta sträckningar stämmer överens med pixelgrid - pixelfonterna, om du kommer ihåg dem, fungerade bara när de passade till deras söta fläck.

Att ställa in ett teckensnitt till sin söta punkt resulterar i större kontrast. Kontrast är särskilt viktigt när du designar för mobil på grund av potentialen för distraherande bländning utanför ditt subtly upplysta enhetslab.

Du kommer att upptäcka att mindre anpassningar av ledande kommer att trycka och dra linjer av hela pixlar. Enligt min mening är kontrasttrum som leder till mobila skärmar, så om du måste kompromissa med att hålla linjer på hela pixlar, gör så.

Standardinriktningen för designers är att skriva ut typ med hjälp av ett grunnlinje, men för mobil måste vi använda x-höjden istället (x-höjden är bokstavligen höjden på den små bokstaven "x"). Vi vet från läsbarhetsstudier att hjärnan känner igen toppen av orden, inte botten, för att uppnå ett större saccadflöde, måste vi se till att toppen av våra karaktärer är närmast anpassade till pixlar.

5. Förlora inte din trasa

En trasa är kanten på ett textblock. Det mesta av vad du läser justeras till vänster (åtminstone för latinbaserade språk) vilket resulterar i en ragged right edge.

När dina ögon hoppar från ena änden av en linje till nästa, är hjärnan bättre i stånd att bedöma vinkeln och avståndet till nästa hoppa, om alla hopp är konsekventa - tänk på att det går över stepping stones, det är mycket snabbare om de är ordentligt åtskilda. Av den anledningen bör den vänstra kanten på din text vara platt, med varje linje som börjar på samma plats (exakt motsatsen gäller för språk som läser åt höger till vänster).

Som ett resultat borde du aldrig centrera mer än två eller tre rader text.

Texten är ofta motiverad, vilket betyder att orden på linjen är åtskilda lika, så att det inte finns någon trasa på vardera sidan. (Jag misstänker att rättfärdigad text är modig, därför att lyhörd design har lärt konstruktörer att tänka i block.) Rättfärdig text resulterar i inkonsekvent blankutrymme och leder i värsta fall till ett par ord på en rad som är allvarligt krossad. Problemet med motiverad text förvärras med kortare åtgärd, så motiverad text kan vara oläslig på mobilen.

l-r: vänsterjusterad, mittlinjejusterad, motiverad.

Om snygghet är väldigt viktigt för dig, binda du sedan texten till att mjukna racketen, men motivera aldrig text på mobilen.

Ragged right text har en extra fördel på mobilen: Text läses ofta i distraherande situationer och läsare tittar ofta bort från text - för att kontrollera ett stationsnamn eller svara på ett samtal. En trasa skapar en slumpmässig form längst ner till höger som hjälper ögat att flytta sin sista position, med minimal re-läsning.

6. Minska kontrast

Samtidigt som vi vill uppmuntra kontrast mellan text och bakgrund, vill vi minska den mellan olika nivåer av typ.

Anledningen till detta är att våra hjärnor bedömer vikt baserat på sammanhang. Dina rubriker kan vara två, eller till och med tre, gånger storleken på din text på skrivbordet, och det fungerar eftersom mer text finns på skärmen. På mobilen är väsentligen mindre text synlig och så blir kontrasten överdriven.

De flesta designers använder en Fibonacci-sekvens av något slag till storlek text. För mobilen, dra in förhållandena för att minska kontrast av typstorlekar. Om du till exempel använder den gyllene kvoten för att öka storleken multipliceras du med 1.618. För mobilen, ta den mindre andelen och multiplicera med 1,382 istället.

Skrivbordskärmar tolererar mer extrema typografiska skalor än mobila skärmar.

7. Justera spårning till skalan

När vi justerar våra typstorlekar för mobil måste vi vara medvetna om nödvändiga förändringar i spårningen.

(Låt mig förorda detta genom att säga att du inte bör justera kerning. Kerning är avståndet mellan två bokstavspar så att utrymmet mellan dem är optiskt förenligt med utrymmet mellan de andra karaktärerna. Kerning läggs till i teckensnittet när det byggdes , och det tog förmodligen månader. Om du har valt ett professionellt byggt teckensnitt, har det blivit korrekt, och om du tror att det inte har gjorts korrekt, hitta ett annat teckensnitt.)

Spårning är inte kramning. Spårning är bokstavsavståndet som tillämpas på alla tecken i teckensnittet. Du brukar inte justera spårning heller.

Undantagen från den regeln gäller för stor text, till exempel rubriker och liten text, till exempel fotnoter. Större text kräver mindre spårning, och mindre text kräver mer spårning. Den förra beror på att gruppera, och den senare ska gynna kontrast. Om du har gjort ändringar i rubrikerna, eller om du använder ett visningsfönster som vanligen har en stramare spårning, kan du behöva lossa spårningen lite när du skalar ner den.

Sammanfattning

Typografi är ett hantverk som designers spenderar en livstid honing, precis för att varje text, varje typsnitt och varje teknik ger nya utmaningar. Det finns inga hårda och snabba regler som alltid kommer att fungera i varje given situation.

När du strävar efter läsbarhet finns det tre principer du behöver tänka på: ett smidigt flöde längs linjer, en tydlig rymdhierarki och tillräcklig kontrast. Detta gäller speciellt för mobilbanan.

Det finns ingen regel som inte kan överdrivas på bevis av egna ögon, men riktlinjerna här kommer att fungera som en idealisk utgångspunkt för vackert utformad text på mobila enheter.

• ← 5 Regler för att välja den perfekta webbtypen
• Är Apples San Francisco framtidens typografi på OSX? →