Ingenting er viktigere enn lesbarhet når det gjelder teksten på nettstedet ditt.

Absolutt ingenting.

Hvis du ikke kan lese ordene, hva er det du gjør? Hvem får meldingen din?

Like viktig som selve ordene er utformingen av teksten - fra skrifter, til bindestrek, til hvordan det er alt organisert på skjermen. En del av designen inneholder ordene selv, hvordan du komponerer de "store ordene" på nettstedet ditt, kan også gjøre en forskjell.

Font valg

Det er bare så mange skrifttyper å velge mellom. Det kan være ganske overveldende.

Ikke la det være. Det beste du kan gjøre når det gjelder lesbarhet er å holde det enkelt.

Velg ett eller to skrifttyper for nettstedet ditt. Et godt sted å starte er med en skrift for hovedkroppen og en annen for de store ordene, for eksempel topptekster, bannere og breakout-tekst. Å bruke en annen skrift for hvert element er distraherende, forvirrende og vanskelig å lese.

Start med en sans serif font for hovedkroppen kopi. Sans serifs er det enkleste på øyet når det gjelder skjermlesing og pleier å fungere godt, selv i mindre størrelser. Serif-fonter kan begynne å "løpe sammen" eller miste serifene avhengig av skriftstørrelse, skjermoppløsning og jevn fargekontrast mellom teksten og bakgrunnen.

Typecast

Husk at kroppseksemplaret ditt vil være den mest leste siden på nettstedet, og det må være lett å fordøye på skjermen på datamaskinen, nettbrettet eller på mobilenheten. Det er OK å bruke forskjellige stiler av denne skrifttypen i kopien, men ikke bli gal. Bolding og kursiv er bra for fokuspunkter, men store blokker av disse stilene kan være vanskelig å lese.

Hvis du trenger hjelp til å velge et skrifttype som prøver paringstegn med elektroniske verktøy som Google Web Fonts eller Typecast.

Google webfonts

orddeling

Nedfelling er dårlig. Det er stygt. Det er ineffektivt og forvirrende. (Og disse problemene forstørre på tvers av plattformer.)

Hyphenation

Hold deg unna det.

Hvis du trenger en oppfriskning, oppstår ordbinding når et ord er delt på slutten av en linje som forårsaker at en del av et ord skal vises på slutten av en linje, og resten av ordet skal vises i begynnelsen av det neste. Bruke bindestrek har ganske mye gått ut av stil når det gjelder webdesign, men du kommer fremdeles over det fra tid til annen. (Det brukes jevnlig i trykte publikasjoner, for eksempel aviser.)

Tanken bak bruk av bindestreker var å tillate tekst å plassere riktig (og jevnt) på tvers av linjene. Når du arbeider med rettferdig tekst, kan du løse problemer med ulik mellomrom når bindestrek er fjernet.

Men bindestreker som bryter ord kan gjøre teksten vanskelig å lese. Å lese over en bindestrek, kan føre til at en person snubler over eller feiler et ord. Bruke bindestreker kan også utilsiktet endre vekten av bestemte ord eller deres innflytelse i resten av kopien. Ubevisst forteller en bindestrek en leser at ordet er litt mindre viktig enn andre ord som er helt gjengitt.

Bare bind bindestreker for ordene som trenger dem, for eksempel med modifikatorer, og ikke å knekke linjer. Tekst vil se renere og mer profesjonell og ha økt lesbarhet uten alle de irriterende bindestrekene i enden av linjene.

Bad Racket

Berettigelse

I likhet med bindestrek har full rettferdiggjørelse falt ut av webdesignmote, selv om den fremdeles brukes ofte i print.

Justification

Type med full justering fyller hver linje helt fra en venstre margin til høyre margin, slik at hver linje har samme bredde. Ved å bruke full begrunnelse opprettes (og lukkes) mellomrom mellom ord, slik at avstanden ikke fordeles jevnt. Bruke denne typen tekstjustering kan fungere for noen nettsteder, men er ikke alltid det mest visuelt tiltalende alternativet. Ta en titt på hvordan teksten din bryter og prøver å lese den noen ganger for å finne ut om fullstendig begrunnelse er et levedyktig alternativ.

Det finnes også andre typer "rettferdiggjørelse" eller tekstjustering. Du kan angi tekst slik at den rader opp på venstre marg, på høyre kant eller nedover midten.

For engelskspråklige nettsteder er venstre begrunnelse den vanligste praksisen. Tekst justeres til venstre marg og har en ragged høyre kant. Følelsen er vennlig og lett å lese. Fordi denne teknikken er så vanlig, vil mange lesere ikke engang merke til hvordan teksten er satt opp. Dette er ditt beste valg for å jobbe med store tekstblokker.

Nanozoom

Høyrejustering er et annet alternativ, men fungerer ikke så bra for tekststykker. Med tekstjustert til høyre margin og ragged til venstre, er start- og stopppunktene anstrengt på skjermen. Den naturlige leseordren er reversert, og bare tanken på å lese tekst på denne måten (spesielt i store mengder) kan gjøre en leser ubehagelig. Reserve høyrejustert tekst for små breakouts hvis du vil inkorporere det i designskjemaet.

The paper mill

Sentrert tekst er et ganske populært verktøy, selv om det ikke anbefales for store tekstblokker. (Tillatt at du finner den brukt på denne måten over hele nettet.) Fallgruvene til senterjustering er mye som de som er knyttet til høyrejustert tekst - den har ikke "naturlig" start og stopp og kan føle seg vanskelig på siden. Senterjustert tekst kan føles noe formelt (fordi det ofte brukes til elementer som invitasjoner) og bør reserveres for små biter av tekst der vekt er viktig. Det er ikke et godt valg for store kopiblokker.

Andre typer effekter

Stroker eller skisser

Bruk i moderering på større tekstelementer som et hovedpunkt, men unngå i liten tekst.

Striketrykk eller understrekking

Begge disse blir ofte brukt - gjennomstrekkende som en notering om at noe ikke lenger er gyldig og understreker for vekt. Fortsett å bruke disse verktøyene, men bruk dem sparsomt. Begge arbeider for små biter av tekst, men forårsaker enorm lesbarhet, når det gjelder mer enn noen få ord.

53

Tilting eller forvrengning

Disse effektene er flotte når du bruker typografi som kunstform. De er ikke så effektive når du prøver å formidle en melding. Du bør unngå tekstmanipulasjoner og forvrengninger på hovedkopi.

Farge

hip2save

Bruk av farge kan være et godt verktøy for å legge vekt på et enkelt ord i en blokk med tekst. (De vanligste og visuelt tiltalende fargekombinasjonene for tekstblokker er svart eller mørkegrå på hvit eller hvit på en mørk bakgrunn.) Mål for farger som står i skarp kontrast til bakgrunnen, slik at de er enkle å se og lese. Super-lyse (think yellow or fuchsia) farger kan være vanskelig å lese med mindre de brukes med tykk, stort skrifttype. Overvei fet skrift med farge for ekstra vekt, men reserver denne teknikken for et begrenset antall ord.

Holder stor tekst ren

Selv om bindestrek kan betraktes som et fortrinn i kroppskopi, bør det alltid unngås i stor type. Enkel begrunnelse stiler er et must; venstre eller midtjustert tekst er dine beste alternativer.

Headers, bannere, breakouts og andre store typer eller møbler må være leservennlige. Ikke bare er disse ordene brukt til navigering, de må også leses for å holde folk beveger seg gjennom innholdet på nettstedet ditt.

Hyphens er snubler.

Odd justering vil ikke hjelpe navigasjon.

Det er også noen andre ting å tenke på når du planlegger designen for din store type.

Tenk på størrelsen på typen i forhold til hovedkroppen. Overskrifter og overskrifter som er betydelig større og sterkere, vil snakke høyt til leserne, mens mindre, tynnere møbler vil hviske.

Dewey's Pizza

Kontrast er av største betydning for store ord. Når du velger fonter, velg noe for møbler som ikke er for lik kroppseksemplaret. Tenk på en serif font, med tanke på at serifs fungerer best i store størrelser, slik at terminaler og detaljer på hvert brev ikke går seg vill i pikslene. Et annet alternativ er å gå for farge for å etablere en distinkt stil og hierarki for møbler.

Ethical Studios

Tenk på plassen rundt de store ordene også. Pass på at store ord hviler nær kopien de beskriver. Legg til ekstra plass over hver overskrift eller overskrift og kondensere mellomrommet mellom den og kopien.

Skriv for å passe

Til slutt tenk på passform.

Se på hvordan teksten strekker seg når du har skrevet kopien for de store ordene. Fyller den linjen? Hvor mange linjer?

Visuelt vil du gå til overskrifter som har et konsekvent utseende. Dette gjelder både typen stil og hvor lenge ordene er. Unngå elementer som fyller en linje helt og bare en brøkdel av neste linje. Tenk på møbler i form av små rektangler; du vil at alt skal passe inne i rammen uten å ha gapende hvite mellomrom.

modernerd

Lag en stil for de store ordene, enten det er en enkel topptekst som inneholder bare noen få ord eller to linjers komplette tanker over hver seksjon av teksten. Vurder en del av denne stilen for å være typen overskrift du bruker - vil det stille et spørsmål, være en erklæring, fortell leserne hva du skal gjøre, vis frem hvordan du gjør noe eller være mer indirekte og søt med ord og frasering?

Prøv å skrive overskrifter og overskrifter som bare er en linje lang (to på det meste), bruk aktive ord.

Crafting Type

Dette kan være vanskelig å oppnå og være skeptisk til triks. Ikke ta tak i en tesaurus og erstatt et stort ord for en kort en for å få ting til å passe. (Du vil risikere å bruke feil ord eller bruke et begrep som leserne kanskje ikke vet meningen med.) Tenk conversationally når du skriver. Skriv ordene og deretter revidere (klipp eller legg til) slik at du opprettholder integriteten til det du vil uttrykke og produsere ren, lett å lese kopi.

Konklusjon

Ren kopi handler om mer enn bare enkle skrifttyper og bindestreker. Det handler om å skrive kopi som gir mening og presentere det på en lesbar måte.

Tenk på publikum når du legger alt sammen. Du vil bruke en annen teknikk og stil når du skriver blogginnlegg om bryllupsideer (tradisjonell, feminin følelse) mot blogging om tatoveringer (sannsynligvis mer edgy og mørk). Publikum din har innflytelse på bilder, de bør også påvirke kopien din.

Men viktigst, tenk på hvordan alt kommer sammen. Strip alt annet ut av nettstedet ditt, og bare etter type. Er det lett å lese? Må du zoome inn eller ut? Skriver du på skjermen? Dette er de virkelige spørsmålene du trenger å svare på, fordi lesbarhet er det som betyr mest på slutten av dagen.

Hvilken tekst finner du vanskelig å lese online? Hvilke teknikker bruker du for å holde teksten lesbar? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, tekstbilde via Shutterstock.