Et simpelt typografisk trick for at øge tekstlæsbarheden med op til 30%
Typisk handler typografi om to ting: læsbarhed, der er bekymret for, hvordan skelnelige breve, ord og sætninger er; og læsbarhed, der omhandler hvor let det er for hjernen at konvertere disse elementer til en sammenhængende besked.
Har du nogensinde fundet dig selv at læse en enkelt tekstlinie to gange, som om det var to linjer, især når dine øjne er trætte? Det opstår, fordi øjet går tabt på sin rejse fra højre til venstre (eller fra venstre til højre afhængigt af dit sprog) fra enden af en linje til starten af den næste. Det er grunden til, at børn sporer linjer med deres finger, når de bliver lært at læse.
Der er et par ting, som typografer kan gøre for at forhindre problemet, og de er især vigtige i store mængder krops tekst, som nyhedsrapporter eller blogs. For det første sørg for, at dine tegn pr. Linje ikke er for høje, længere øjet er nødt til at rejse jo større sin chance for at fare vild For det andet overveje en serif skrifttype skaber det større horisontale indtryk større visuel skelnen mellem tekstlinjer og hvidt rum, der tjener samme rolle som det ovennævnte barns finger; Lad være med at være meget opmærksom på din førende, større mellemlinieafstand, der skaber klarere kanaler, som dine øjne kan følge med.
Udover dette traditionelle råd er der blevet opdaget en ny teknik. BeeLine Reader er et fascinerende nyt plugin til Chrome, der viser, hvordan det virker.
BeeLine Reader tilføjer en farvegradient til linjer med tekst, hvilket gør overgangen fra slutningen af en linje til starten af den næste lettere for øjet. Stanford University gennemførte en test ved hjælp af plugin og konkluderede, at BeeLine Reader resulterede i en gennemsnitlig læsningshastighedsforøgelse på 10%; pluginets eget websted hævder, at en erfaren læser vil opleve en stigning på 25-30%.
Du skal kunne læse teksten til højre meget hurtigere end teksten til venstre.
Selvom jeg ikke kan sige, at jeg godkender plugin'en, tvinger tekst til en enkelt kolonne eller af de farver, de har brugt (grimt for de fleste og ubrugelige for alle med protanopisk farveblindhed), er princippet lyd. Der er et gråskalaeksempel på BeeLine Reader's websted, der forbedrer læsbarheden, men vil ikke krænke nogen branding. Et hurtigt forsøg på deres læsning test, viste jeg forbedret med 22% ved hjælp af den grå version.
Selvom der ikke er nogen nem måde at implementere denne form for design i simpel CSS, er det muligt at kode som plugin demonstrerer.
Hvis du designer store mængder løbende tekst - især hvis andre kontrakter tvinger dig til at bruge kolonner, der er for brede eller linjens højde, der er for lille - overvej at anvende denne teknik til at kompensere.
Hvad synes du om BeeLine Reader's teknik? Hvordan gik du i deres læsningstest? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, farvekodet billede via Shutterstock