Ingenting är viktigare än läsbarheten när det gäller texten på din webbplats.

Absolut ingenting.

Om du inte kan läsa orden, vad gör du då bra? Vem får ditt meddelande?

Lika viktigt som orden själva är textens utformning - från teckensnitt, till bindning, till hur det är allt organiserat på skärmen. En del av designen innehåller orden själva, hur du skriver de "stora orden" på din webbplats kan också göra skillnad.

Val av teckensnitt

Det finns bara så många teckensnitt att välja mellan. Det kan vara ganska överväldigande.

Låt det inte vara. Det bästa du kan göra när det gäller läsbarhet är att hålla det enkelt.

Välj en eller två teckensnitt för din webbplats. Ett bra ställe att börja är med ett teckensnitt för huvudkroppen och en annan för de stora orden, som rubriker, banners och breakout-text. Att använda ett annat teckensnitt för varje element är distraherande, förvirrande och svårt att läsa.

Börja med en sans serif typsnitt för huvudkroppen kopia. Sans serifs är det enklaste i ögat när det gäller skärmavläsning och tenderar att fungera bra även i mindre storlekar. Serif-teckensnitt kan börja "springa ihop" eller förlora sina serifs beroende på teckenstorlek, skärmupplösning och jämn färgkontrast mellan text och bakgrund.

Typecast

Tänk på att din kroppskopia är den mest lästa saken på webbplatsen och behöver vara lätt att smälta på skärmar på datorn, surfplattan eller på mobilenheten. Det är OK att använda olika stilar av denna typsnitt i kopian, men bli inte galen. Boldning och kursiv är bra för viktiga punkter, men stora block av dessa stilar kan vara svåra att läsa.

Om du behöver hjälp väljer du ett typsnitt som försöker koppla typsnitt med onlinverktyg som Google Webbfonter eller Typecast.

Google webfonts

avstavning

Hyphenation är dålig. Det är fult. Det är ineffektivt och förvirrande. (Och dessa problem förstorar över plattformar.)

Hyphenation

Håll dig borta från det.

Om du behöver en uppfriskning sker bindning när ett ord delas i slutet av en rad, vilket får en del av ett ord att visas i slutet av en rad och resten av ordet ska visas i början av nästa. Använda bindning har i stort sett gått ur stil när det gäller webdesign, men du kommer fortfarande över det från tid till annan. (Den används regelbundet i tryckta publikationer, till exempel tidningar.)

Tanken bakom att använda bindestreck var att låta texten rymma ordentligt (och jämnt) över linjer. När du arbetar med motiverad text kan du komma in i problem med ojämnavstånd när bindning avlägsnas.

Men bindestreck som bryter ord kan göra texten svår att läsa. Att läsa över en bindestreck kan orsaka att en person snubblar över eller tolkar ett ord. Använda bindestreck kan också oavsiktligt ändra betoningen av vissa ord eller deras inverkan i resten av kopian. Undermedvetet säger en bindestreck en läsare att ordet är lite mindre viktigt än andra ord som helt återges.

Reservera bindestreck endast för de ord som behöver dem, till exempel med modifierare, och att inte radera linjer. Texten kommer att se renare och mer professionell och ha ökad läsbarhet utan alla irriterande bindestreck i slutet av raderna.

Bad Racket

Berättigande

Liksom bindning har fullständig rättfärdigande fallit ur webbdesign, även om det fortfarande används vanligt i tryck.

Justification

Typ med full justering fyller varje rad helt från en vänster marginal till den högra marginalen så att varje rad har samma bredd. Med full rättfärdighet skapas (och stänger) mellanslag mellan ord så att avståndet inte är jämnt fördelat. Att använda denna typ av textjustering kan fungera för vissa webbplatser, men är inte alltid det mest visuellt tilltalande alternativet. Ta en titt på hur din text bryter och försöker läsa den ett par gånger för att se huruvida fullständig motivering är ett genomförbart alternativ.

Det finns också andra typer av "rättfärdigande" eller textjustering. Du kan ställa in text så att den rader upp i vänstra marginalen, till höger eller i mitten.

För engelskspråkiga webbplatser är vänsterjustering den vanligaste praxisen. Texten justeras till vänster och har en raggad höger kant. Känslan är vänlig och lätt att läsa. Eftersom denna teknik är så vanlig, kommer många läsare inte ens att märka hur texten är inställd. Det här är ditt bästa alternativ för att arbeta med stora textblock.

Nanozoom

Rätt inriktning är ett annat alternativ men fungerar inte så bra för bitar av text. Med texten justerad till höger marginal och ragged till vänster, är start- och stopppunkterna besvärliga på skärmen. Den naturliga läsordningen är omvänd och bara tanken på att läsa text på detta sätt (särskilt i stora mängder) kan göra en läsare obekväma. Reservera högerjusterad text för små utbrott om du vill integrera den i ditt designschema.

The paper mill

Centrerad text är ett ganska populärt verktyg trots att det inte rekommenderas för stora textblock. (Beviljas att du hittar den används på så sätt över hela webben.) Fallgroparna i mittlinjen är mycket som de som hör samman med högerlinjad text - den har inte "naturlig" start och stopp och kan känna sig besvärlig på sidan. Centrerad text kan känna sig något formell (eftersom den ofta används för saker som inbjudningar) och bör reserveras för små bitar av text där betoning är viktig. Det är inte ett bra val för stora kopiblock.

Andra typ effekter

Stroker eller konturer

Använd i mått på större textelement som en tonvikt men undvik i liten text.

Striketryck eller understrykning

Båda dessa används vanligen - genomsträvande som en notering att något inte längre är giltigt och understryker för betoning. Fortsätt använda dessa verktyg men använd dem sparsamt. Båda arbetar för små bitar av text men orsakar enormt läsbarhet gäller när de spänner över några ord.

53

Tiltning eller snedvridning

Dessa effekter är bra när du använder typografi som en konstform. De är inte så effektiva när du försöker förmedla ett meddelande. Du bör undvika textmanipulationer och snedvridningar på huvudkroppen.

Färg

hip2save

Användningen av färg kan vara ett bra verktyg för att lägga tonvikten på ett enda ord i ett textblock. (De vanligaste och visst tilltalande färgkombinationerna för textblock är svart eller mörkgrå på vit eller vit på en mörk bakgrund.) Syfte för färger som står i skarp kontrast till bakgrunden så att de är lätta att se och läsa. Superljusa (tänk gul eller fuchsia) färger kan vara svåra att läsa om de inte används med en tjock stor typ. Betrakta fet stil med färg för extra tonvikt, men reservera den här tekniken för ett begränsat antal ord.

Håller stor text ren

Även om bindning kan anses vara en fråga om preferens i kroppskopia, bör det alltid undvikas i stor typ. Enkla motiveringsstilar är ett måste; vänster eller centrerad text är dina bästa alternativ.

Huvud, banderoller, breakouts och andra stora typer eller möbler måste vara läservänliga. Inte bara är dessa ord som används för navigering, de måste också läsas för att hålla människor flytta genom innehållet på din webbplats.

Hyphens är snubblar.

Oddjustering hjälper inte navigering.

Det finns också några andra saker att tänka på när du planerar designen för din stora typ.

Tänk på storleken på typen i proportion till huvudkroppen. Rubriker och rubriker som är betydligt större och djärvare kommer att tala högt till läsare, medan mindre, tunnare möbler kommer att viska.

Dewey's Pizza

Kontrast är av största vikt för stora ord. När du väljer typsnitt väljer du något för möbler som inte är lika med kroppskopian. Tänk på en serif font, med tanke på att serifs fungerar bäst i stora storlekar så att terminalerna och detaljerna på varje brev inte går vilse i pixlarna. Ett annat alternativ är att gå efter färg för att skapa en distinkt stil och hierarki för möbler.

Ethical Studios

Tänk också på rymden runt de stora orden. Se till att stora ord vilar nära den kopia de beskriver. Lägg till extra utrymme över varje rubrik eller rubrik och kondensera mellanrummet mellan det och kopian.

Skriv för att passa

Slutligen tänka på passform.

Titta på hur texten raderas när du har skrivit kopian för de stora orden. Fyller den linjen? Hur många linjer?

Visuellt vill du gå till rubriker med ett konsekvent utseende. Detta gäller både typstil och hur länge orden är. Undvik objekt som fyller en rad helt och bara en bråkdel av nästa rad. Tänk på möbler när det gäller små rektanglar; du vill att allt ska passa inuti ramen utan att ha gapande vita utrymmen.

modernerd

Skapa en stil för de stora orden, oavsett om det är en enkel rubrik som innehåller bara några ord eller tvålinjiga fullständiga tankar ovanför varje avsnitt av texten. Tänk på att en del av denna stil är den typ av rubrik du använder - kommer det att ställa en fråga, vara ett faktum, berätta läsarna vad man ska göra, visa hur man gör något eller vara mer indirekt och söt med ord och frasering?

Försök skriva rubriker och rubriker som bara är en rad långa (två högst), använd aktiva ord.

Crafting Type

Detta kan vara svårt att uppnå och vara försiktig med tricks. Ta inte tag i en tesaurus och ersätt ett stort ord för en kort en för att få saker att passa. (Du riskerar att använda fel ord eller använder en term som dina läsare kanske inte vet meningen med.) Tänk på konversation när du skriver. Komponera orden och ändra sedan (klipp eller lägg till) så att du behåller integriteten för det du vill uttrycka och producera ren, lättläst kopia.

Slutsats

Ren kopia handlar om mer än bara enkla teckensnitt och bindestreck. Det handlar om att skriva kopia som är meningsfullt och presentera det på ett läsligt sätt.

Tänk på din publik när du sätter allt ihop. Du skulle använda en annan teknik och stil när du skriver blogginlägg om bröllopsidéer (traditionell, feminin känsla) jämfört med bloggar om tatueringar (troligen mer edgy och mörk). Din publik har en inverkan på bilder, de bör också påverka din kopia.

Men viktigast av allt, tänk på hur allt kommer samman. Ta bort allt annat bort från din webbdesign, och lämna bara typen bakom. Är det lätt att läsa? Måste du zooma in eller ut? Skurar du på skärmen? Det här är de riktiga frågorna du behöver svara, eftersom läsbarheten i slutet av dagen är viktigast.

Vilken text hittar du svårt att läsa online? Vilka tekniker använder du för att hålla din text läsbar? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, textbild via Shutterstock.