Share
Når du bruker typografi på nettet, er det mange ting å huske på for å lage en side som gir tydelig tilgang til innholdet og presenterer det på en lesbar måte. Vanligvis kan dette brytes ned i to bøtter: lesbarhet og lesbarhet. Lesbarhet refererer til hvordan ord og blokker av type er arrangert på en side. Lesbarhet refererer til hvordan et skrifttype er utformet og hvor godt en enkelt karakter kan skille seg fra en annen. For denne artiklens skyld, snakker jeg litt om begge, og foreslår noen spesifikke teknikker for å forbedre typografien din.
La oss snakke lesbarhet først. Det er viktig å forstå hva som gjør en skrifttype mer leselig enn en annen. Når du velger et skrifttype, avhenger alt av hvordan du planlegger å bruke det. Spør deg selv noen grunnleggende spørsmål: Hvilken størrelse skal teksten brukes til? Vil det virke som kropps kopi eller overskrift? Trenger det å være en arbeidshest eller vil den bli brukt mer som øyehud? Vil det være paret med en annen skrift? Fyller utseendet på skrifttypen emnet?
Det er også viktig å huske på at forskjellige skrifttyper ble designet for ulike bruksområder. For eksempel var den originale Garamond designet for å være svært lesbar når den ble skrevet ut i en stor teksttekst. Noen sier også at det var den mest miljøvennlige fonten av sin tid, og bevare blekkbruken. Bell Centennial er et skriftsted bestilt av AT & T på 1970-tallet, designet for å bli brukt i telefonkataloger. Disse katalogene ble laget av billig papir og derfor ble Bell Centennial designet for å imøtekomme blekkspredning under utskriftsprosessen. På den digitale siden er det skrifter som er designet spesielt for skjermen som Georgia og Verdana. Azura er en relativt ny skrifttype designet spesielt for å lese tekst på skjermen.
Kort sagt, det bidrar til å vite den planlagte konteksten til tegnet du vurderer å bruke. Noen fonter er faktisk ganske fleksible, inkluderer flere vekter og de kan brukes på flere måter. Andre er mer begrenset, designet for å bli brukt svært spesifikt.
Dette fører oss inn i det første av noen få ting å huske om en skriftlig lesbarhet:
Noen skrifttyper var designet for å bli brukt stort, for eksempel i overskrifter. Vanligvis er disse skrifttypene mindre lesbare i mindre størrelser og bør ikke brukes til kroppskopi. Disse kalles visningsflater. Skriften som vises nedenfor, Knockout, er en av mine favorittskjermbilder.
Andre skrifttyper er konstruert spesielt for bruk i store områder med mindre kroppskopi. Disse kalles tekst- eller kroppsflater.
Det er mange variasjoner i mellom. Vanligvis er det jeg gjør er å finne et ansikt som jeg synes er passende for oppgaven, og husk at jeg planlegger å koble den til en annen skrift og prøve den ut. Jeg har allerede filtrert ut alle skriftene som jeg ikke tror er passende for oppgaven, men hvis du bare begynner, kan det ta noen prøve og feil.
Så som er mer lesbar: serif eller sans-serif skrifttyper? Historien forteller oss at serif ansikter alltid har vært ansett som mer lesbare, da de nesten alltid ble brukt i utskrift for store tekstpassasjer. Serif ansikter gjør at øyet kan strømme lettere over teksten, forbedrer leshastigheten og reduserer øyet tretthet.
Når det er sagt, er det mange lesbare sans-serif ansikter. På nettet ser det ut til at sans-serif ansikter blir brukt mer til kroppstext enn noensinne. Jeg tror det er flere grunner til dette. De enklere brevformene ser ut til å fungere bedre med dagens designtrender og kan føles mer moderne. Også leser vi vanligvis ikke store tekster på tekst på et nettsted, så sans-serif-fonter gjør det bra i kortere biter av kopi.
Det skal bemerkes at det er diskusjon om dette emnet - et synspunkt er at serif ansikter ikke reduserer godt på skjermen, i hovedsak redusert lesbarhet. Andre tror at det er ingen forskjell. Stillingen jeg alltid tar er, føles det riktig? Ville jeg lese en del av typen angi måten jeg designet den på?
En annen egenskap å merke seg er x-høyde. Dette gjelder vanligvis ved bruk av type ved kroppstastestørrelser. X-høyden er vel måling av høyde på små bokstaver "x" i en gitt skrift. Det tar ikke hensyn til høyden på oppstigningene eller nedstigningene. Du kan bli overrasket over å vite hvor stor forskjell det er i x-høyde fra ett ansikt til et annet. Når de brukes små, er skrifttyper med større x-høyder vanligvis mer lesbare.
Lesbarhet handler om å ordne ord og grupper av ord på en måte som gjør det mulig for leserne å få tilgang til innholdet enkelt og på en måte som er fornuftig. Det er virkelig en kunstform som er lurt over tid ettersom vellykkede kombinasjoner er funnet.
I min erfaring har dette en tendens til å være en av de vanskeligste konseptene å forstå for begynnelsesutviklere og designere. Selv erfarne designere sliter noen ganger med hvordan man bestiller typografi i et layout. Nå som disse to betegnelsene begynner å slå sammen når det gjelder webdesign, er det viktig å begynne å forstå begrepet lesbarhet. Her er noen ting å huske på:
En av de vanligste typografiske "feilene" jeg ser på nettet i dag, er feil typeavstand. Det jeg refererer til her er tilfeller der en blokktekst ikke er gitt nok margin, underhoder og korrelert kroppstekst som ikke er visuelt gruppert sammen, og så videre. Riktig avstand (kombinert med hierarki) gjør det mulig for leseren å skanne teksten og få tilgang til den på de ønskede punktene.
Det er ikke en hard og rask regel, men det ser ut til at forholdet mellom punktavstand (tilleggsavstand plassert før eller etter et avsnitt), mellomrommet rundt en blokk av type og brevavstand kan relateres proporsjonalt til linjen høyde på et avsnitt. Linjens høyde er definert som den vertikale avstanden mellom tekstlinjer. Så hvis for eksempel linjehøyden til ett avsnitt er satt til 2em og et avsnitt med samme størrelse tekst er satt til 1.5em, vil første avsnitt kreve mer avstandsavstand og sannsynligvis mer margin rundt den.
Mye av dette er gjort med øye snarere enn en nøyaktig formel, men jeg bruker en god tommelfingerregel når det gjelder forholdet mellom punktavstand til linjehøyde. Jeg lager vanligvis min avstandsavstand (som på nettet oversettes til margin eller polstring plassert øverst eller nederst i et avsnitt) rundt halvparten av linjens høyde. Dette pleier å hjelpe passasjer av tekst "hold sammen" i stedet for å bruke en full, hard retur mellom hvert avsnitt, og skape store mengder mellomrom mellom avsnittene.
Tydeligvis bør det tas hensyn til at teksten ikke presenteres for liten. Det er også viktig å huske at alderen til målgruppen din kan variere, og dermed kvaliteten på deres syn. Generelt er det godt å holde seg rundt 13px eller .813em minst. For tiden, med en bredere implementering av lydhør nettsteder, er det en trend som beveger seg mot større kroppskopi. I RWD er det også viktig å huske på at forskjellige tekststørrelser for ulike enheter kan være fornuftige. For eksempel kan det være fornuftig å øke kroppens kopimengde på en mobilbredde i motsetning til en bredde på skrivebordet.
En annen vanlig praksis som hindrer typelesbarhet tillater at de horisontale linjene av typen på en side blir for bred. Denne avstanden refereres til som mål (også noen ganger linjelengde). Hvis en type linje er for lang, er det en kjedelig lesning og en strekk for leserens øye for å gå tilbake til venstre kant av tekstblokken for neste linje. Det er også skremmende å se en tekstblokk arrangert på denne måten, og noen lesere kan ikke engang forsøke å lese den.
Så hva er maksimal bredde en tekstblokk skal være? Vel, alt avhenger av størrelsen på teksten. Jo større teksten, desto lengre kan linjen være (den hele proporsjonen igjen). Etter min mening er omtrent 70 tegn så lenge du vil være. I gjennomsnitt, for tekst i kroppseksempler, prøver jeg å ligge innenfor 45em.
Letteravstand (også referert til som sporing) er den konsekvente økningen eller reduksjonen av avstanden mellom brevformene i et ord eller en blokk med tekst. Det skal ikke forveksles med kerning, som refererer til justering av avstanden mellom individuelle tegn. Letteravstand kan brukes til å justere tettheten til en blokk med tekst eller et enkelt overskrift eller underhode.
Tydeligvis påvirker brevavstand lesbarheten av tekst. For mye eller for lite og lesbarhet vil bli kompromittert. Men det er tider når jeg etter min mening trenger brevavstand. Som du kan se i grafikken nedenfor, liker jeg å legge til generøse brevavstand til undertekster eller setninger med stor tekst. Jeg finner det lettere å lese store bokstaver når tegnene har litt ekstra plass rundt dem. Også, avhengig av hvilken skrift som brukes, liker jeg å øke brevavstanden litt i kroppseksemplar.
Det kan høres klart at god type kontrast er viktig for lesbarhet. Fakta om saken er designere (selv inkludert) er alltid å skyve grensene for kontrast. Det kan være at vi ønsker at en bestemt del av teksten skal være mindre fremtredende, eller å lage "lag" av hierarki i vårt design. Uansett, husk at kontrast på skjermen, spesielt når det gjelder små, fine figurer som kroppstekst, varierer sterkt fra skjerm til skjerm. Det er best å feile på siden av litt "for mye" kontrast.
Som vi allerede har diskutert i denne serien, spiller hierarkiet en stor rolle i lesbarheten av innholdet. Et vellykket hierarki organiserer innholdet i fordøyelige deler og gjør at leseren enkelt kan skanne og få tilgang til teksten.
Begynn å tenke på å bruke disse lesbarhets- og lesbarhetskonseptene i prosjektene dine. Jo mer du gjør det, desto bedre får du.
Accentsconagua