Tips för att använda kontrast för att förbättra läsbarheten

Bra design är läsbar design. Utan ett tydligt meddelande, som visas på ett lättsmält sätt, är det lätt att förlora betydelsen av något designarbete. Därför är det så viktigt att varje design måste vara lätt att läsa.

Att utforma för läsbarhet är en lektion i typografi, men också i kontrast. Kontrast är nyckeln till att öka läsbarheten och hjälpa till att skapa ett flöde genom texten på ett logiskt sätt så att användarna förstår exakt vad du vill säga.

Färgkontrast

Bokstäver måste stå ut ur duken. Det måste ha en närvaro som drar ögat.

Det finns många sätt att skapa färgkontrast, men den mest populära är svart text på en vit eller ljus duk. Och det är populärt eftersom det fungerar. (Den motsatta kombinationen fungerar lika bra.)

När du lägger text är det viktigt att tänka på hur bokstäver kommer att visas över bakgrunden. Är de lätt att se? Denna övervägning är särskilt viktig när du arbetar med bokstäver ovanpå bilder eller video, där färgerna i bakgrunden kan placeras olika beroende på skärmstorlek eller rörelse i innehållet.

Enkla sätt designers övervinna problemet är med ett färgöverlägg på bilder eller video som skapar lite läsbarhetsförsäkring. Oavsett om det är en mörk genomskinlighet eller en ljus nyans, kan ett överlag se till att texten visas som avsedd oavsett vad som händer i bakgrunden.

Det andra alternativet - och en som får traction - är att ta bort text från bilder eller videoklipp och para dem sida vid sida. Detta ger utrymme för båda elementen utan att offra innehållet i heller.

Kontraststypiskt format

Avvikelser i teckensnitt eller stilar kan omedelbart dra i ögonen på bokstäver. Visuellt intresse ökar med teckensnitt som är ganska olika, till exempel manuset och serifparet i huvudlogotypen för Le Farfalle.

Varje typsnitt är intressant på egen hand, men skillnaden mellan de två skapar ganska kompositionen.

Parning typsnitt på detta sätt kan vara lite knepigt eftersom vissa par av tydligt olika stilar kan låta användare känna sig jarred. Välj typsnitt med vissa likheter som inte är lika uppenbara för den vanliga användaren, som vanliga x-höjder, bokstäver (kolla små bokstaven? O? För att se om stilar är rundade eller mer ovala) eller snedställningar. Genom att hålla en liknande känsla i dessa områden kan stilar blandas och matchas på ett sätt som skapar mycket kontrast utan att avbryta flödet av konstruktionen.

Storleksvariabilitet

Ett sätt att wow användare med kontrast är med överdimensionerad eller underordnad bokstäver.

Överdriven typografi kan vara mycket roligt att designa och det är ett slående sätt att locka användare att fortsätta att flytta genom en webbplats. Medan underordnad bokstäver kan vara lika effektiva är det mycket svårare att använda.

Koppla överdimensionerade alternativ med textblock i en mer traditionell storlek för att markera variationen mellan textstorlekar. Det kommer att bidra till att ge en kontaktpunkt i designen och göra de stora orden omöjliga att undvika. Fortsätt temat bortom visningsbokstäver och betrakta underrubriker som är något större än normalt så att samma överdimensionerade, in-your-face-koncept följer användarna genom hela designen.

Tänk på justeringar

Många människor glömmer anpassningen när det gäller läsbarhet.

Det finns två tankskolor:

  • Använd kontrasterande anpassningar för visning och rubriker mot text.
  • Använd samma inriktning för allting.

Båda idéerna är rätt på sina egna sätt. Tänk på textjustering i förhållande till resten av designen. Ger justering tillräcklig kontrast för att dyka upp ur bakgrunden. Detta kan innehålla allt från avstånd mellan kanvasens kant och text till placering i förhållande till andra element.

När det gäller anpassning kan det bästa sättet att tänka på det vara att föreställa sig en knapp. Hur anpassas texten i knappen? De flesta designers skulle välja centrum, men det betyder inte att resten av webbplatsen kommer att innehålla centrerad text. Inriktningen dikteras av själva elementet. Nu skala upp det med att tänka på hela designen.

Textflöde

Textflöde blir viktigare med mer text som ingår i en design. Om textelementen inte strömmar sömlöst på hierarkiskt sätt kan användarna gå vilse eller missa information genom att läsa på ett illogiskt sätt.

Viktiga överväganden när det gäller textflöde är:

  • Storlek på textblock
  • Kulor och listor
  • Linjehöjder och längder
  • Fet eller kursiv
  • Färg

Var och en av dessa textattribut bidrar till att skilja nyckelord, information och fraser från resten. De ger visuella inmatningspunkter för att skanna text så att den viktigaste informationen hoppar ut för användaren.

Använda olika stilar inom långa block av text - detta är särskilt viktigt för långformat innehåll eller bloggar - kan minska läsarens trötthet. Om användaren däckar från att läsa kopian eftersom det är besvärligt att titta på och smälta, kommer de inte att konsumera innehållet. Bryt upp det i delar som gör det lättare att läsa.

Håll det konsistent

Den slutliga nyckeln till läsbarhet är konsistens. Oavsett vad du gör på hemsidan eller för rubriken eller i kopian för att skapa kontrast, håll fast vid den.

Använda samma färger, eller stilar eller typ av behandlingar i hela, visar att användarna inte går förlorade i designen. Oavsett var navigeringen tar dem, kommer den fortfarande att se ut som din webbplats.

Ntgrate gör ett gudjobb av detta genom att skapa en svartvit bakgrunds- och textblokskombination från början. Färgkombinationen yin och yang finns ovanför hjältebilden i rubriken och efterföljande textrutor via webbplatsen har samma text och färgmönster.

Slutsats

Kontrast är ett av de verktyg som hjälper till att skapa visuellt intresse för alla designprojekt.Det är också viktigt när det gäller att skapa läsbar typografi med hierarkin.

Hög kontrast är det mest läsbara alternativet. Utspridda färger eller stilar som är för liknande kan nästan alltid presentera problem med avseende på läsbarhet. Gör det enkelt för användarna att förstå vad du vill säga med en läsbar design som ger mycket kontrast mellan text och andra element.