Mobil är stor just nu. Men ofta är typografi liten. När det gäller att skapa bra typ på små skärmar finns det många utmaningar.
Så hur kan du göra det mesta av respons, mobil design och typografi? Det första steget är verkligen att förstå typen och den andra är att tänka på hur människor läser. Sätt de två ihop och du kommer att få ett handtag på att skapa en bra mobil typ på nolltid. Det är en färdighet som varje designer behöver behärska i den digitala tiden.
Grundläggande om mobil och responsiv typografi
Till skillnad från typ utformad för utskrift och till och med många skrivbords webbdesignprojekt, mäts ofta mobila och reagerande typografi ofta med det traditionella punktsystemet. Snarare än att välja en typsnitt och använda den på? 14 poäng med 15 poäng ledande? mobil och lyhörd typ är utformad med hjälp av pixlar, ems eller rems. Dessa flexibla enheter är procentuella och kan hjälpa designers att enkelt skapa typ för flera enheter.
Två av de viktigaste övervägandena när du utformar typ för mobila enheter är storlek och utrymme. Typ måste vara tillräckligt stor för att läsa enkelt och det ska finnas tillräckligt med utrymme mellan linjer så att texten inte känns trång i det lilla utrymmet.
Det finns ingen magisk formel för vilken storlek eller avstånd som ska användas. Men typiskt mobil typ bör vara lite större proportionellt än på stationära datorer och innehålla mer linjemått. Medan många hävdar att det optimala antalet tecken per rad för utskrifts- och skrivbordsdesign är 60 till 75 tecken, för mobilen ska detta nummer skäras i halva.
Hur människor läser
Nyckeln till typografi typografi, på vilken enhet som helst, är läsbarhet. Om användaren inte kan läsa den fungerar inte designen.
Detta är särskilt viktigt för mobila enheter. Och det finns så många mobila alternativ, det är praktiskt taget omöjligt att veta hur din bokstäver kommer att göras på varje enhet. Så verkligen jobba för att förfina din typ för de mest populära skärmarna på enhetsskärmen.
Tänk på hur människor läser när du planerar din mobildesign. Det kan hända att du måste justera förhållandet mellan olika typelement, till exempel rubriken och huvudtexten. (Chattanooga Renaissance Fund-webbplatsen ovanför, gör ett bra jobb med detta.) Varje typ som är för stor kan snabbt äta på skärmen och distraherande läsare. Typ som är för liten kan missas eller ses oavsiktligt.
Överväg anpassning också. Vanligtvis läser folk från vänster till höger. Speciellt på en liten enhet, behåll anpassningsformat enkelt för maximal läsbarhet.
Det handlar om bredd
Nyckelfaktorn när du utformar typ för mobila enheter, appar eller tabletter är skärmens bredd. Och kom ihåg att det finns två bredder att överväga - vertikalt (hur de flesta håller sina telefoner) och horisontella.
Text som är för stor skapar massor av raster i typen och om du använder bindning, massor av bindestreck. (Det bör noteras att få webbdesigners använder bindestreck, de är en karaktär som sällan finns i kroppstext för webben.) Frekventa raster i textflödet kan få läsaren att sluta för ofta och göra meddelandet hakigt och svårare att förstå.
Text som är för liten kan göra att läsaren blir trött och gör det svårt att fokusera på texten. Det kan också vara svårt att hitta början och slutet av textrader när det finns för många bokstäver att smälta på en gång.
Design i rymden
När det gäller små skärmar är utrymme ett viktigt övervägande. Tänk på de element som dina användare kan stöta på - låg kontrast på skärmen på grund av belysning, vaddering så att texten inte stöter på kanten av skärmen (eller ett löst passande telefonfall) eller någonstans användare kan bläddra på skärmen utan att oavsiktligt klicka på en länk.
Genom att lägga till lite utrymme för text - både mellan rader och i marginaler - hjälper du användarna att bättre interagera med orden. God avstånd hjälper också till läsbarhet, särskilt under subparametrar. Som med andra tekniker är den rätta mängden avstånd kritisk och en överflöd av vitt utrymme kan ta bort från innehållsområdet på skärmen eller till och med hindra läsbarheten.
Ett bra ställe att börja är inom 10 till 20 procent. Spela med siffrorna som riktlinje för hur mycket extra utrymme som ska läggas mellan linjer av typ. Du kan också överväga att använda styckavstånd eftersom grafik kan se längre ut på mindre skärmar. Detta extra utrymme ger läsare uppfattningen om att texten inte är för tät och kommer att känna sig lättare att läsa.
Håll typsnitt enkelt
Det finns anledning att se så många sans serif-typsnitt på mobila webbplatser och i appar. De är i allmänhet lätta att läsa.
När du väljer typsnitt för textblock i mobildesign - tänk på något annat än ett logotyp eller typografiskt konstelement - gå med något enkelt, med en standardvikt och som har en ganska jämn slagbredd. Undvik nyhetstycken, kondenserade stilar och brevformar med smala slag.
Fler designers väljer att använda en andra uppsättning typsnitt för mobila webbplatser jämfört med skrivbordsversionen, vilket kan innehålla en mer utförlig typpalett. Medan det finns för- och nackdelar med det här konceptet, kan det vara en lösning om du har ditt hjärta inställt på ett visst specialtecken för skrivbordet.
Var också försiktig med typ trick. Effekter som skuggor eller fasader kan se bra ut i större storlekar men kan bli korta eller hindra läsbarhet på en skärm som bara är några inches bred. Glöm tricksna när du arbetar med typplan för din mobila webbplats.
Mobila proportioner och skala
Medan det inte finns någon perfekt lösning, har Jason Pamental av H + W Design en av de bästa där ute. Han detaljerade sin moderna uppmätta skala för Typecast-bloggen med CSS och en full skala av siffror.
Tanken är att varje annorlunda typ av webbdesign ska tänka på och skalas separat för en optimerad webbdesignupplevelse. Ofta ska vi (kollektivt som designare) skala allt på en gång.Grundläggande visar varför det här inte är den bästa idén genom ett enkelt exempel där huvudet tar upp nästan hela skärmen.
Inget samtal om mobilwebtypografi skulle vara komplett utan att tänka på Pamental s stycke. Se till att läsa det själv och se hur hans idéer kan översätta till ditt arbete.
Tänk på funktionalitet
En sista sak att tänka på när man utformar mobil typografi är hur det faktiskt fungerar. Medan vissa typer på stationära webbplatser är utformade för att klicka och länka, gör mobiltypografi ofta ännu mer. En del text kan låta användarna ringa, den andra typen innehåller en länk, en annan text kan tillåta användare att köpa en produkt eller text i en app kan vara en del av ett spel.
Designa denna typ så att användarna vet exakt vad det ska göra. Och gör den tillräckligt stor för att användarna ska kunna slutföra denna åtgärd med lätthet. Aktiva textrutor måste vara tillräckligt stora för att knacka och separeras från andra textåtgärder så att endast en sak händer i taget. Alla andra konfigurationer kommer sannolikt att förvirra och frustrera användare.
Slutsats
Som med alla designprojekt är riktlinjer och tips bara ett ställe att komma igång. Mobiltypografi är ett av de områden som designers verkligen börjar dyka in och trender kommer att utvecklas.
Se till att blanda och matcha idéerna ovan med dina egna för bästa resultat. (Och om du har ytterligare tips, skulle vi gärna höra dem.) Nr 1 råd är att testa, testa, testa. Ju fler enheter du försöker textstilar på, desto bättre uppfattning kommer du att få reda på hur det ser ut och fungerar för användarna.
Bildkälla: Phil Roeder. Obs på bilder: Bilderna i det här inlägget visas i skrivbordet och på en iPhone 5S.