Har denne typen få designet mitt til å se ut?

Ingenting kan ødelegge et design som typografi som ikke passer. Uansett om det er for stort (eller for lite), er feil type skalering et stort problem.

Det er et problem for flere design enn du kanskje tror. For ofte besøker du et nettsted der typen gjør seg vakkert på en nettleser, bare for å se senere fra en telefon og finne det vanskelig å lese. Det skjer hele tiden.

Problemet er at typen ikke var virkelig skalert for hver enhet. Det er et helt unødvendig problem når du vurderer en typografisk skala for prosjekter.

Hva er en typografisk skala?

En visuell typografisk skala inkapsulerer størrelser, rom og proporsjoner av typeelementer i forhold til på en annen i et prosjekt. Dette inkluderer alt fra hovedtekstestilen til overskrifter, undertekster, bildetekster og andre tekstelementer.

Skalaen bidrar til å bestemme størrelsen og plasseringen av tekstelementene i forhold til hverandre. For webdesign, svarer visueltypeskalaen ofte til koder i ditt CSS (som h1, h2, h3, p og så videre).

En type skala hjelper deg med å skape harmoni og rytme i designet. Det holder deg også ut av stilistiske problemer fordi tekstelementer korresponderer med CSS-elementer slik at hver del av designet bruker de samme elementene og konsistensen.

Skalaen skal være basert på størrelsen på kroppsteksten. (Sett alltid et skrifttype og en størrelse for det først). Bygg deretter skalaen rundt denne hovedtypografien. Ikke sikker på hvor du skal begynne? Google har en solid anbefaling :

1. Bruk en base skriftstørrelse på 16 CSS piksler. Juster størrelsen basert på egenskapene til skrifttypen som brukes.
2. Bruk størrelser i forhold til basestørrelsen for å definere typografisk skala.
3. Tekst trenger vertikalt mellomrom mellom tegn; Den generelle anbefalingen er å bruke nettleserens standardlinjehøyde på 1,2 em.
4. Begrens antall skrifttyper som brukes og typografisk skala.

Lag harmoni og rytme

En type skala gjør det mer enn bare å hjelpe brukerne til å bevege seg gjennom kopien, det skaper harmoni og rytme for tekstflyten. Dette er viktig på en hvilken som helst enhet.

Så hvor begynner du?

UX Matters har noen av de beste undersøkelsene tilgjengelig på minimum tekststørrelser etter enhet . Vær oppmerksom på at disse er minimumsstørrelser, og når kropps tekststørrelser fortsetter å øke (lik linjeavstand), bør du sterkt vurdere større punktstørrelser. Steven Hoober anbefaler å starte minst 40 prosent større enn de anbefalte minimumene. Videre kan forbedrede innholdsstiler gå opp til 80 prosent over minimumet, men du bør være forsiktig med eksepsjonelt stor type også.

Når kroppstekststørrelsen er angitt, kan du bestemme hvordan du skal formatere støttende tekstelementer. Det er en fin kunst for det, og øyetesten er ofte et godt sted å starte.

Det er nesten ikke slikt som en overskrift som er for stor. Si hva du trenger å si og størrelse for å skalere ordene i rommet. En to-linjers overskrift vil føles større enn en linje, selv om teksten er nøyaktig samme størrelse.

Den enkleste måten å tenke på oppskalering for overskrifter og andre større testelementer, fungerer i prosent basert på kroppsteksten. Mens hver designer har et annet utgangspunkt, er 250 prosent større enn kroppsteksten en god ballpark for overskriften; 150 prosent for h2, 75 prosent for h3 og 50 prosent for elementer som blokknotater. (Dette er ikke en regel, bare et utgangspunkt.)

Her er grunnen til at prosentene, i stedet for å angi størrelser, er viktige: Når du har angitt størrelsen på kroppstypen, justerer stablene størrelsene tilsvarende uavhengig av skjermstørrelsen. Hvert type element er i forhold til kroppstypen.

Karakter og mellomrom retningslinjer

Det er noen andre retningslinjer som designere ser også godt når det gjelder å skrive på skjermen. Når det gjelder avstand, har en av tommelfingerregler vært å se på tegn per linje for å sikre lesbarhet.

• Stasjonære og store enheter: 60 til 75 tegn per linje
• Telefoner og små enheter: 35 til 40 tegn per linje

Merk at lesbarhet på mindre skjermer er basert på å ha færre tegn (større tekst).

Den samme ideen gjelder også avstand. Du trenger mer plass mellom tekstlinjer når skjermstørrelsen er begrenset til at brukerne kan lese og skanne innhold. Vurder å legge til 25 prosent mer linjeavstand på mindre enheter enn for stasjonær typografi.

Den ekstra størrelsen og avstanden bidrar til å lette den stramme eller knuste følelsen som brukere kan føle når de prøver å lese på mindre enheter. Fordi lerretet er lite, er leserens flyt og lesbarhet avgjørende for at brukerne skal rulle.

Tips for å komme i gang

Det er mange måter å lage en typografisk skala på, og sørge for at teksten ikke gjør utformingen ser fett ut. Hvordan du går om det, er sannsynligvis avhengig av komfortnivået ditt med kode og utvikling i tillegg til designet.

Det beste alternativet er å bruke en responsiv design med medieforespørsler. Dette er alternativet designer-developer som gir størst kontroll over tekstspesifikasjoner. (For mer gå tilbake til de Google-anbefalingene ovenfor.)

En annen rute er å designe forskjellige versjoner. Selv om dette er et ganske utdatert konsept, er det fortsatt noen steder ved hjelp av mobile nettadresser og desktopadresser for deres nettsteder. Det anbefales ikke i de fleste tilfeller, men for noen nettsteder hvor designet er dramatisk annerledes eller brukerne opplever forskjellige ting, kan det være et alternativ.

Det enkle alternativet er å starte med et tema for ditt nettsted. Bare vær sikker på å velge et fullt responsivt alternativ. Når du bruker et høyverdig responsivt tema, blir det meste av gjetning tatt ut av det for deg. Alt du virkelig trenger å tenke på, er kroppens tekststørrelse. Bare vær sikker på å sjekke alt for å sikre at mobiltypestørrelsene oppfyller dine standarder.

3 verktøy for å lage en type skala

Det finnes en rekke verktøy tilgjengelig for å hjelpe deg med å se den eksakte effekten av en visuell typografi skala. Her er noen av de beste og mest brukervennlige alternativene.

• Type Skala : Skriv inn tekst og spill med alternativer som størrelse, skala og skrift rett på skjermen; grader CSS eller rediger koden rett fra verktøyet;
• Modulær skala : Skalaen fungerer som en regel for å bestemme størrelser for type; Last ned resultatene som et Sass- eller JS-plugin eller se dem på skjermen.
• Golden Ratio Typography Kalkulator : Verktøyet optimaliserer størrelse, linjehøyde, bredde og tegn per linje ved hjelp av det gyldne forholdet

Konklusjon

Den riktige typografiske skalaen vil holde designen ser trim og svelte. Det er den ekstra harmonien som brukerne kanskje ikke forstår, men bidrar til total lesbarhet og brukervennlighet.

Det er sannsynlig at skalaen er av hvis designet "bare ikke ser riktig ut." Forkert størrelse kan være vanskelig å finne ut, men er ofte et sted å se når noe om et design er ute av balanse. Spill med noen forskjellige muligheter for skala før du legger på noe, og husk trenden akkurat nå er for typen som er litt større enn tidligere.

• ← Møt mannen bak tegneserier
• WeTransfer avslører ny merkeidentitet og brukergrensesnitt →