Share
När du använder typografi på webben finns det många saker att tänka på för att skapa en sida som ger tydlig tillgång till innehållet och presenterar det på ett läsbart sätt. Typiskt kan detta brytas ner i två hinkar: Läsbarhet och Läsbarhet. Läsbarhet hänvisar till hur ord och block av typ är ordnade på en sida. Läsbarthet hänvisar till hur en typsnitt är utformad och hur väl en enskild karaktär kan särskiljas från en annan. För denna artikels skull ska jag prata lite om båda, föreslå några specifika tekniker för att förbättra din typografi.
Låt oss prata läsbarhet först. Det är viktigt att förstå vad som gör en typsnitt läsligare än en annan. När du väljer en typsnitt beror allt på hur du planerar att använda det. Fråga dig själv några grundläggande frågor: Vilken storlek kommer texten att användas på? Kommer det att visas som kropps kopia eller rubrik? Behöver det vara en arbetshäst eller kommer den att användas mer som ögonkock? Kommer det att vara parat med ett annat teckensnitt? Fyller utseendet på typsnittet ämnet?
Det är också viktigt att komma ihåg att olika teckensnitt utformades för olika användningsområden. Den ursprungliga Garamond var till exempel utformad för att vara mycket läsbar när den skrivs ut i en stor texttext. Vissa säger också att det var den mest miljövänliga typsnittet av sin tid, vilket behållde bläckanvändningen. Bell Centennial är en typsnitt som beställts av AT & T på 1970-talet, avsedd att användas i telefonkataloger. Dessa kataloger gjordes av billigt papper och Bell Centennial var därför utformad för att tillgodose bläckspridning under tryckprocessen. På den digitala sidan finns teckensnitt som har utformats specifikt för skärmen som Georgien och Verdana. Azura är en relativt ny font som är utformad speciellt för att läsa text på skärmen.
I korthet bidrar det till att känna till det avsedda sammanhanget med den typsnitt du överväger att använda. Vissa typsnitt är faktiskt ganska flexibla, inkluderar flera vikter och de kan användas på flera sätt. Andra är mer begränsade, avsedda att användas mycket specifikt.
Detta leder oss till det första av några saker att komma ihåg om en typsnittets läsbarhet:
Vissa teckensnitt var avsedda att användas stora, till exempel i rubriker. Vanligtvis är dessa typsnitt mindre läsbara i mindre storlekar och bör inte användas för kroppskopia. Dessa kallas visningsytor. Skriften som visas nedan, Knockout, är en av mina favoritskärmar.
Andra typsnitt är utformade speciellt för att användas i stora delar av mindre kroppskopia. Dessa kallas text- eller kroppsytor.
Det finns många variationer däremellan. Det jag brukar är att hitta ett ansikte som jag tycker är lämpligt för uppgiften, med tanke på att jag planerar att para det med ett annat teckensnitt och prova det. Jag har redan filtrerat bort alla teckensnitt som jag inte tycker är lämpliga för uppgiften, men om du bara börjar kan det ta lite försök och fel.
Så vilken är mer läsbar: serif eller sans-serif typsnitt? Historien berättar att serif ansikten alltid har ansetts vara mer läsbara, eftersom de nästan alltid användes i tryck för stora textpassager. Serif ansikten tillåter ögat att flöda lättare över texten, vilket förbättrar läshastigheten och minskar ögatmattning.
Det sägs att det finns många läsbara sans-serif ansikten. Online verkar det att sans-serif ansikten används mer för kroppstext än någonsin. Jag tror att det finns flera skäl till detta. De enklare brevformerna verkar fungera bättre med nuvarande designtrender och kan känna sig mer moderna. Också läser vi vanligtvis inte stora texter på text på en webbplats, så sans-serif-teckensnitt gör bara bra i kortare bitar av kopia.
Det bör noteras att det finns diskussioner om detta ämne - en synvinkel är att serif ansikten inte minskar väl på skärmen, i huvudsak minskande läsbarhet. Andra tror att det inte finns någon skillnad. Den position jag alltid tar är, känns det rätt? Skulle jag läsa en sektion av typ sätta hur jag designade det?
En annan egenskap att notera är x-höjd. Detta gäller normalt för att använda typ vid kroppstypstorlekar. X-höjden är väl måttet av höjden på den små bokstaven "x" i ett givet teckensnitt. Det tar inte hänsyn till höjden på uppstigning eller nedstigning. Du kan bli förvånad att veta hur mycket skillnad det finns i x-höjd från ett ansikte till ett annat. När de används små är typsnitt med större x-höjder vanligtvis mer läsbara.
Läsbarhet handlar om att ordna ord och grupper av ord på ett sätt som gör det möjligt för läsarens öga att komma åt innehållet enkelt och på ett sätt som är meningsfullt. Det är verkligen en konstform som är honad över tid då framgångsrika kombinationer hittas.
Enligt min erfarenhet tenderar det att vara en av de svåraste koncepten att förstå för både nybörjare och designers. Även erfarna designers kämpar ibland med hur man bäst ordnar typografi i en layout. Nu när de två beteckningarna börjar slå samman när det gäller webdesign, är det viktigt att börja förstå begreppet läsbarhet. Här är några saker att tänka på:
Ett av de vanligaste typografiska "misstag" jag ser på webben idag är felaktig typavstånd. Vad jag hänvisar till här är fall där en blocktext inte ges tillräckligt med marginaler, underrubriker och korrelerad kroppstext som inte är visuellt grupperade tillsammans, och så vidare. Korrekt avstånd (kombinerat med hierarki) gör det möjligt för läsaren att skanna texten och komma åt den på önskade punkter.
Det är inte en hård och snabb regel, men det verkar som om förhållandet mellan punktavståndet (ytterligare avstånd placerat före eller efter ett stycke), utrymmet runt ett block av typ och bokstavsavstånd kan relateras proportionellt till linjen höjden på en punkt. Linjens höjd definieras som det vertikala avståndet mellan textrader. Så om till exempel linjens höjd på ett stycke är inställt på 2em och ett stycke med samma text är inställt på 1.5em, kommer det första stycket att kräva mer styckenavstånd och förmodligen mer marginal runt den.
Mycket av detta görs av ögat snarare än en exakt formel, men jag använder en bra tumregel när det gäller förhållandet mellan punktavstånd till linjens höjd. Jag brukar göra mitt styckeavstånd (som på webben översätts till marginal eller vaddering placerad längst upp eller längst ner i ett stycke) runt hälften av linjens höjd. Detta tenderar att hjälpa texter av "hålla ihop" i stället för att använda en fullständig hård avkastning mellan varje stycke, vilket skapar stora mängder utrymme mellan stycken.
Självklart bör man se till att texten inte presenteras för liten. Det är också viktigt att komma ihåg att åldern för din publik kan variera, följaktligen kvaliteten på deras syn. Generellt är det bra att stanna runt 13px eller .813em på minsta. För närvarande, med det bredare genomförandet av mottagliga webbplatser, är det en trend som rör sig mot större kroppskopia. I RWD är det också viktigt att komma ihåg att olika textstorlekar för olika enheter kan vara meningsfulla. Det kan till exempel vara meningsfullt att öka kroppens kopia storlek på en mobiltelefon bredd i motsats till en bredd på skrivbordet.
En annan vanlig praxis som hindrar typläsbarhet gör att de horisontella linjerna av typen på en sida blir alltför breda. Detta avstånd kallas åtgärd (även ibland linjelängd). Om en typ av typ är för lång är det en tråkig läsning och en sträckning för läsarens öga för att återvända till den vänstra kanten av textblocket för nästa rad. Det är också skrämmande att se ett textblock ordnat på detta sätt och vissa läsare kanske inte ens försöker läsa den.
Så vad är den maximala bredden ett textblock ska vara? Tja, det beror allt på storleken på texten. Ju större texten är, desto längre kan linjen vara (den här helheten igen). Enligt min mening är i allmänhet cirka 70 tecken så länge du vill vara. I genomsnitt, för text med kroppskopiering, försöker jag stanna inom 45ems.
Brevavstånd (även kallat spårning) är den konsekventa ökningen eller minskningen av avståndet mellan brevformerna i ett ord eller ett textblock. Det ska inte förväxlas med kerning, vilket avser att justera avståndet mellan enskilda tecken. Brevavstånd kan användas för att justera tätheten hos ett textblock eller en enskild rubrik eller underrubrik.
Uppenbarligen påverkar brevavståndet läsbarheten hos texten. För mycket eller för lite och läsbarhet kommer att äventyras. Det finns emellertid tillfällen då jag anser att brevavstånd behövs. Som du kan se i grafen nedan, gillar jag att lägga till generösa brevavstånd till underrubriker eller fraser i stortext. Jag tycker att det är lättare att läsa stor text när tecknen har lite extra utrymme runt dem. Också, beroende på vilken typsnitt som används, gillar jag att öka brevavståndet något i kroppskopia.
Det kan tydligt framstå att god typkontrast är väsentlig för läsbarheten. Faktum är att designers (själv medföljer) trycker alltid gränserna för kontrast. Det kan vara att vi vill att en viss del av texten ska vara mindre framträdande, eller att skapa "lager" av hierarkin i vår design. Oavsett fall, kom ihåg att kontrast på skärmen, särskilt när det gäller små, fina former som kroppstext, varierar mycket från skärm till skärm. Det är bäst att radera på sidan av lite "för mycket" kontrast.
Som vi redan har diskuterat i denna serie spelar hierarkin en stor roll i innehållets läsbarhet. En framgångsrik hierarki organiserar innehållet i smältbara delar och gör att läsaren enkelt kan skanna och komma åt texten.
Börja tänka på att använda dessa läsbarhet och läsbarhetskoncept i dina projekt. Ju mer du gör det desto bättre får du.
Accentsconagua