Share
La oss bli seriøse om mobil typografi; Vi vet alle at mobilen er enorm, og vi kan også være enige om at typografi er super viktig i et design. Typografi er et grunnleggende designelement; personlig, jeg foretrekker å begynne med det som jeg lager noen design fordi det bidrar til å sette en god scene for resten av designen. Så la oss snakke om hvordan vi kan gjøre vår mobile typografi det beste det kan være.
Når du designer for mobil, er den største fienden vår den fysiske skjermstørrelsen. Noen smarttelefoner er super små, som den gamle, men likevel mye brukt iPhone 4 / 4S. Ifølge UNITY bruker 15,9% av folk fortsatt denne antikke modellen. I USA omtales tallet til nesten 24 millioner mennesker. Ja, det er mange mennesker med små, små skjermer. Da har vi også større skjermer som den nye iPhone 6 Plus, Galaxy Note 4 eller Nexus 6. Det faktum at det er så stort utvalg i skjermstørrelser, er en begrensning i seg selv, for det som ser bra ut på en iPhone 4, vil ikke alltid se bra ut på iPhone 6 Plus.
Du vil kanskje se på analysene dine og se hva nettstedet ditt er mest populære, og begynn å skreddersy til det. Imidlertid er det generelt akseptert at en enhet-agnostisk tilnærming vil tjene deg bedre i det lange løp.
Ta en titt på bildet ovenfor for å se hvordan tekst med samme størrelse gjøres på hver enhet. Jeg kunne ikke engang helt passe "Overskrift 1" på iPhone 5S, noe som demonstrerer at lydhør typografi starter med skjermstørrelsen i tankene.
Noen andre hindringer når du designer for en smarttelefon inkluderer belysning i brukerens miljø, samt hvor tett de holder telefonen i ansiktet deres.
La oss starte med latte. Når vi bruker våre telefoner med våre hender, har vi en tendens til å holde dem i armlengde eller nærmere vår ansikt. Dette betyr at typen kan være mindre på en telefon fordi avstanden mellom skjermen og øynene våre er kortere enn en bærbar eller en stasjonær skjerm.
Å ha muligheten til å redusere skriftstørrelsen betyr også at vi kan inkludere mer tekst i samme mengde plass, noe som gir oss mer beroligende "tiltak". Dette bidrar igjen til å lindre den mindre skjermstørrelsen, men bare litt. Du kan se dette i aksjon i bildet nedenfor.
Mindre type for mindre skjermerFolk bruker smarttelefonene hele tiden, overalt. På t-banen, i parken, på deres sofaer eller seng. Appen eller nettstedet ditt kan brukes i ulike miljøer med forskjellig belysning, noe som betyr at du også må være oppmerksom på kontrast. Lesing i parken er mulig - selv med direkte sollys - hvis kontrast av teksten er høy nok mot bakgrunnen. I dette scenariet hjelper også større tekst. Det er mindre nødvendig å fokusere på kontrast hvis lesingen utføres på en t-bane, hvor belysningen ikke blinker så mer, eller om natten i en seng.
Gizmodo publiserte en detaljert artikkel om hvilken mobilenhet (inkludert både tabletter og smarttelefoner) dominerer utendørs. De utførte en sammenligning av sine farger i forhold til ulike sollys alternativer. Det viser seg at Samsung Galaxy S har overgått iPhone 4 i indirekte sollys, noe som er det verste av den verste belysningen ute. Sjekk ut hele artikkelen hvis du leter etter flere detaljer om dette.
Mitt poeng er enkelt, det er så mange bevegelige deler når det gjelder å designe for lesbarhet på en mobil enhet. Kjenn dine brukere slik at du best kan bestemme hva deres leseopplevelse skal være, start med telefontyper og slutt med deres miljø.
Det er mange opplæringsprogrammer der ute som hjelper deg med å bestemme de spesifikke pikslene, teksten din skal være basert på gyldne forhold eller bare eyeballing som ser bra ut. Å finne ut en god typografisk skala for skrivebordet er grei. Det er faktisk ganske enkelt å gjøre det også for mobile enheter. Typecast har en fantastisk artikkel som beskriver hvordan du kan finne målinger for mobil- og skrivebordstypografi: En mer moderne skala for webtypografi. Artikkelen forklarer klart hvorfor typografi må være lydhør. Men jeg vil bli mer detaljert enn bare å si "Folk har en tendens til å lese annerledes på mobil" - det er så mye mer enn det!
Du ser, mobil er minst fast medium vi har hatt å håndtere som designere. Som jeg tidligere har nevnt, leser folk på telefonene deres overalt, i stadig skiftende omgivelser. For å optimalisere sin leseopplevelse må vi forstå psykologien til det som faktisk gir en god leseopplevelse.
Jeg vil gjerne tenke at utformingen av den beste leseopplevelsen for mobil starter med den perfekte kroppsteksten. Uansett hvilken skrifttype du velger, må du sørge for at den er fleksibel nok til å motstå forskjellige skjermstørrelser i samme skriftstørrelse og fortsatt se bra ut. Hvis du velger Helvetica Neue for fontfamilien din, bør du sørge for at den ser bra ud på en iPhone 4s i 16px, samt på en Nokia og en Galaxy-telefon.
Vurder også skrifttype når du velger en skrift, da noen telefoner vil vise en vanlig, fet eller lett tekst, forskjellig fra andre.
Det er riktig, overskrifter er like viktige! Du har mer kreativ frihet med overskrifter som de kan ofre litt lesbarhet for innflytelse, men vurder også deres skala. En overskrift, som vist i det første bildet med mobile skjermstørrelser, er langt mer sannsynlig å bli uleselig på grunn av å være overdimensjonert på en liten skjerm. En stor overskrift er også sløsing med plass, da du kan hindre brukerne i å komme til kjøttet av innholdet.
En annen ting å huske på når du fullfører kroppsteksten din er den vertikale rytmen. Vertikal rytme er et begrep som refererer til vertikal avstand og justering av typografi og andre elementer på siden. Begrepet rytme betyr et repeterende mønster. En god vertikal rytme sikrer at leseopplevelsen er enkel fordi den gir en balansert layout som lett leder leserens øyne.
Hentet fra http://modulargrid.orgHvorvidt baseline er løs eller tett, er konsistensen det som er viktigst. Men det er viktig å innse at grunnlinjen på mobile enheter kan gjenspeile den lille skjermstørrelsen. Ikke vær redd for å stramme opp ting, spesielt hvis du har redusert skriftstørrelsen, men finne ut en komfortabel vertikal rytme for å sikre at lesingen er jevn for leseren din.
Hvis du trenger hjelp med å komme i gang med å finne ut de beste målingene for din vertikale rytme, har Andre Morton en vertikal rytmegenerator på bloggen hans..
Det er noen tommelfingerregler jeg vil dele med deg når det gjelder å designe typografi generelt, men det er spesielt sant for responsiv og mobil typografi.
Du må aldri justere kerning for nettsteder eller programmer av noe slag. Det er en vanskelig prosess og svært upålitelig for Internett! Kvalitetsskrifttyper vil ha kjennetegn godt funnet ut, og hvis skrifttypen du har valgt ikke har god kerning, grøft den.
Når det ikke er klart klut på høyre eller venstre side av teksten, kan det like godt være berettiget (og tekst bør aldri være berettiget på nettet). En dårlig lomme vil forårsake hull og gapende brudd i hvite rom; Det er lettere å lese og skanne tekst når det er et klart fille. Hvordan bryter teksten din på forskjellige skjermstørrelser? En løsning kan være veldig enkel justering som enten fjerner noen få piksler fra tekstens inneholdende element, eller legger litt til det.
Det er ikke noe annet å bedra som å prøve å trykke et lite område på en telefon og ikke være i stand til fordi det er for lite eller verre, å trykke på noe annet i stedet. Kanskje det beste rådet her er å ha så få av dem som mulig! Når det er bare en inlinekobling, er det lettere å trykke på det, fordi det ikke er noe annet å åpne ved et uhell. Deretter må du kontrollere at linken er tydelig. Dette kan gjøres på flere måter som å gjøre leddene dristige eller lene på standard underlagsmønsteret. Noen ganger er det bare å endre fargen ikke nok hvis kontrasten er for lav (husk hvordan vi snakket om skjermfarger og lysproblemer?)
Til slutt, sørg for at inline-koblinger har mer berøringsområde enn det som oppfattes. Dette kan oppnås ved å søke display: inline-block; å forankre elementer, men sørg for noen padding eller ekstra linjehøyde du bruker ikke forvrenger hovedteksten.
Designe typografi for mobil har mange bevegelige deler som du bør være oppmerksom på. Jeg håper at dette innlegget har gitt deg litt innsikt i hvordan du kan forbedre designene dine for mobil. Gi oss beskjed om dine egne tips og triks i kommentarene!
Accentsconagua