19 Typografikompetence Enhver designer burde vide

Mere end 90% af al webinformation består af tekst. Selvom designere bruger meget tid på at bestemme grafik, interface og stil på siden, kræves en lige lang tid til at vælge den perfekte typografi. Specielt når det kommer til mobile enheder kræver typografi af mobilt web særlig opmærksomhed, da det kommer med 2 store udfordringer - tilgængelig plads og typografisk størrelse. Denne artikel vil videresende 19 typografitips, der kræves for at låse en imponerende brugergrænseflade til dit mobile webdesign med rig brugeroplevelse.

Giv lidt plads

Mobil typografi handler ikke om at arrangere bogstaver på skærmen, det handler om at arrangere dem på en måde, der gør dem læsbare for brugerne. Brug hvidt rum korrekt, og giver passende plads mellem bogstaver, linjer og afsnit, så brugeren kan læse indholdet korrekt uden at skulle zoome ind.

Bonustips: Kerning

Kerning var ikke en del af denne liste, før jeg forstod, hvor vigtigt det kunne være fra et UI-designperspektiv. Så vi ved fra det første tip, at det er nødvendigt at skaffe plads, men Kerning tager det et hak. Kerning er kunsten at justere det rum, der er tilvejebragt mellem tegn, så indholdet skiller sig ud og let at læse på samme tid. Der er 3 typer kerning, man kan vælge at gå efter.

Selvom det er synligt på ovenstående billede, er der meget mere at vide om forskellen mellem disse forskellige typer kerning. Nysgerrig? Læs det fra denne blog, "Kerning: Don’t Cramp Your Style".

Passende skriftstørrelse

Du kan beholde dine stationære skrifttyper i en størrelse på 14px, men når det samme gøres på mobil, kan det resultere i mindre eller større indhold afhængigt af enhedens opløsning. Kontroller skriftstørrelsen på tværs af alle opløsninger og brug medieforespørgsler, så den resulterende typografi af mobilweb kan læses på tværs af alle håndholdte enheder med forskellige opløsninger.

Brug korrekte måleenheder

Til skriftstørrelsen på mobilwebben bruger typografi ikke punkter (pt). Brug i stedet ems eller rems. Dette foretrækkes af de fleste designere, da disse enheder gør indholdet skalerbart, da de er baseret på procentdel og ikke nogen statisk størrelse.

Vælg kontrastfarver

Bedre kontrast sikrer bedre læsbarhed. Mens du tænker på farven på mobil webtypografi, skal du tænke på sammenligningen mellem lyst og mørkt. Hvis baggrunden på siden er mørk farvet, skal du bruge lyse farver. For eksempel hvide skrifttyper på sort baggrund og vice versa.

Sørg for bedre læsbarhed

Der er mange gratis og spændende skrifttyper tilgængelige i dag, men hvis du planlægger at bruge dem i dit indhold, skal du kontrollere hvert eneste alfabet for at sikre, at skrifttypefamilien og størrelsen, du bruger, gør indholdet læseligt. Der er ingen mening i at bruge de seje skrifttyper, hvis læseren ikke kan forstå dit indhold.

Juster teksterne korrekt

Justering er en vigtig faktor, når det kommer til mobil webtypografi. Den menneskelige hjerne kan lide at læse teksten i blokke på en lille skærm. Normalt er tekster venstrejusteret, hvilket betyder, at der er en ujævn kant på højre side af blokken. Juster den korrekt, og sørg for, at hvis du bruger 'berettiget' justering, resulterer det ikke i et hvidt rum, der ikke er konsistent.

Indstil den førende

Typografi i mobilweb kræver konsekvent føring (mellemrummet mellem linjerne). Når den er for lille, i et stort indhold, er slutningen af ​​den ene linje og begyndelsen af ​​den næste en vanskelig at følge. Hvis det er for stort, resulterer det i unødvendige hvidafstand. Sørg for ikke at afbryde den jævn strømning af en linje.

At finde dit søde sted

Alle skrifttyper har et søde sted. Kombinationen af ​​fontstørrelse og førende, hvor de sikrer den bedste læsbarhed og mindre forvrængning forårsaget af standard anti-aliasing af browseren. Eksperimenter med det skrifttype, du bruger, og find det søde sted.

Brug af White Space

Hvide rum kan ofte bruges. I tilfælde af CTA'er eller klikbare links skal du bruge hvid plads, så de kan skelnes og klikkes ved hjælp af indekset eller tommelfingeren. Da brugeren ikke bruger en mus som på et skrivebord, betragtes tommelfingeren eller indekset for at være markøren, som er cirka en millimeter i tykkelse. Tænk over det, og brug hvide områder effektivt.

Tag skærmbredden til konto

Når du designer typografien på mobilwebben, skal du tænke over, hvordan folk læser tekster. Normalt er der 2 slags bredde i en mobil enhed, lodret og vandret. Når du designer typografien, skal du derfor tage begge bredder i betragtning og indstille justeringen og afstanden i overensstemmelse hermed.

Gør din typografi skelnen

Typografi af din mobile webside skal have en markant funktion, enten i udseende eller i farve eller yderligere effekter. Især i indhold, som brugerne vil læse, skal du vælge omhyggeligt skrifttyper til overskrifterne, der får dem til at skille sig ud fra resten.

Kontroller skalering og andele

Kontroller indholdet på forskellige mobile enheder i forskellige opløsninger. Zoom også ind og zoom ud for at sikre, at din mobile webtypografi skaleres og passer til hele skærmbredden. Modtagelse af dit indhold er et must, og du skal teste det og skrive medieforespørgsler, hvis der er nogen afbrydelse for en bestemt opløsning.

Tag funktionalitet på konto

Der er mange tekstelementer på et mobilwebsted, der giver brugeren mulighed for at udføre visse handlinger, f.eks. Sende en besked eller foretage et opkald. Typografi af mobilweb skal designes omhyggeligt for at sikre, at brugerne forstår, at en bestemt tekst faktisk er en CTA eller udfører en bestemt funktionalitet.

Er sideteksten tung?

Hvis din side er tung i form af tekst, som en blog eller en nyhedsartikel, er der meget lidt interaktion nødvendigt. Brugerens primære formål er at læse og sikre, at typografi af mobilweb er designet i overensstemmelse hermed.

Er sideinteraktion tung?

Hvis din side involverer mere svæv og klik handlinger sammen med at skrive, redigere osv., Skal du justere dine tekster i overensstemmelse hermed. Sørg for, at skrifttypestørrelsen ikke er mindre end 18px, så brugerne kan forstå, at en vis handling skal ske, når de klikker eller holder musen på teksten.

Responsiv webdesign

Som nævnt tidligere skal pixels undgås under typografi af mobilweb. De har en fast dimension standard. Brug em eller rem i stedet. De er baseret på procentvis og skalerbar. Når indholdet ses på en mobilenhed med forskellige opløsninger, justerer de deres størrelse i overensstemmelse hermed. Husk, at tekstindhold på din responsive webside skal kunne skaleres og justere deres størrelse automatisk i henhold til skærmbredde. Du kan bruge LambdaTest til at udføre din lydhør test. Med et enkelt klik kan du kontrollere dit websteds reaktionsevne på over 44 mobile enheder med forskellige opløsninger.

Parring af flere skrifttyper

Når du designer typografien på mobilweb, kan du kombinere forskellige skrifttyper til overskrift og afsnit, etiketter osv. Men sørg for, at de matcher hinanden. Det er en dårlig idé at blande Algeriet til overskrift og tegneserier fra MS til et afsnit.

Skriftvægt: Tung eller let?

Mobile skrifttyper er relativt mindre sammenlignet med desktops. Man skal være omhyggelig med at gøre dem læsbare eller klikbare, når de involverer deres funktionalitet. Nøglen til at bestemme fontvægten er at eksperimentere. Selv om det i øjeblikket er en fed og stor typografi til mobilenettet, er du en tendens, men du skal bruge flere skrifttypevægte og teste applikationen på tværs af forskellige opløsninger for at sikre, at der ikke er nogen forstyrrelse overalt.

Hold baggrunden i tankerne

Hvis baggrunden er statisk og monokromatisk, som tidligere nævnt, kan du bruge fontfarver med den modsatte kontrast. Men når en baggrund er et billede eller en video, ville det ideelle valg være at eksperimentere med forskellige farver og kontrollere, hvilken der passer korrekt og gør indholdet læsbart.

Typografi er et delikat håndværk. Designere tilbringer ofte livet for at skærpe deres typografiske evner. Med hvert nyt skrifttype, der bringer en ny udfordring, er vi sikre på, at de ovennævnte tip til mobile typografier er nyttige næste gang du designer en ny mobil webside. Husk også at udføre kompatibilitetstests på tværs af browsere for at sikre, at de skrifttyper eller stilarter, du bruger, fungerer korrekt i alle browsere. LambdaTest kan bruges til at udføre tværbrowser-kompatibilitetstest på mere end 2000 forskellige browsere og deres versioner. Sørg for, at skrifttypen understøttes i alle de krævede browsere, og præsenter dine brugere den rige brugeroplevelse, de fortjener.

Oprindeligt udgivet på LambdaTest

Oprindeligt skrevet af Arnab Roy Chowdhury

Yderligere læsning…

Hvis du kan lide indlægget, skal du klappe og hjælpe andre med at finde det.