5 enkla sätt att förbättra webtypografi
Typ är en av de mest använda elementen på webben. Tänk på det. Om du inte är YouTube eller Flickr är chansen att dina besökare kommer till ditt textinnehåll - inte den fina förpackningen som omger den. Så varför är webbdesigners fortfarande behandla text som ett sekundärt element?
God typografi ger ordning till sidan och ökar läsbarheten . Det gör det möjligt för människor att bearbeta information snabbare.
En mer skannbar, läsbar webbplats betyder goda besökare. Glada besökare återkommer ofta, köper produkter, lämnar kommentarer och delar webbplatsen med vänner. Se varför det kan vara värt att tänka på?
Jag kunde bläddra för alltid om hur långt typografi har kommit på webben, och hur långt än det måste gå. Jag har ofta studsat mellan webb och tryckdesign. När du går från InDesign till TextMate är gränserna för webbtyp kristallklar .
Men det har blivit sagt mycket om vilken webbtyp som inte kan göra. Detta kommer inte att bli en annan rant. Låt oss istället fokusera på 5 enkla korrigeringar för de typografiska ögonbrynen som finns i överflöd på nätet.
1. Använd ett återställningsformat
Dumt men sant: Inga två webbläsare använder samma standardinställningar. Skillnader i vaddering, marginaler, rubriker och indragningar är överflödiga. Om du vill att sidlayouten ska vara mer konsekvent över webbläsare, lönar det sig att börja med ett CSS Reset-stilark.
Två jag rekommenderar:
Yahoos CSS Reset Stylesheet
Eric Meyers CSS Reset Stylesheet
2. Se din åtgärd
Mått hänvisar till längden på en enda linje av typen. En längre linje = en längre åtgärd. Studier har visat att för körbarhet bör löpande textkolumner som din huvudkropp vara mellan 45 och 75 tecken (30-50 ems) inklusive mellanslag . Detta är en av anledningarna till att vätskedesigner (de där kolumnerna expanderar och kontrakt för att passa i webbläsarens bredd) är hårdare på ögonen.
Dessutom bör din ledning öka med längden på din åtgärd . Ledande är mängden vitt utrymme mellan textrader och styrs via CSS-linjens höjdfastighet. Om du behöver använda en extra lång åtgärd, se till att din ledning öppnas.
På samma sätt, om du har en liten kolumn, t.ex. ett sidofält med en kort åtgärd, bör din ledning vara hårdare. Jag hittar det standardvärde som de flesta webbläsare tilldelar är lite för tight. En linjehöjd på ungefär 1.4em fungerar bra för de flesta kroppsinnehåll.
3. Tend till rymden mellan
Det handlar inte bara om din text - det handlar om det utrymme som omger det. För lite utrymme gör texten svår att läsa, men det gör för mycket. Nyckeln är att hitta en enkel balans som leder ögat från ett element till ett annat.
Ett av de vanliga misstag som nya designers gör är att fylla varje tum av utrymme. Vitt utrymme avser det tomma eller "negativa" utrymmet kring ditt innehåll, och det är avgörande. Ta en titt på en väldesignad tidskrift som Dwell or Good och du kommer se att även om det kostar utgivarnas pengar att skriva ut varje sida, lämnar de rikliga mängder av vitt utrymme runt texten. Sidan kommer att vara i balans och ditt öga kommer att flytta från rymden till rymden effektivt.
Förutom att justera din linjehöjd (som nämns i # 1), försök att öka din vaddering och marginaler . Om du inte försöker dra av ett galet visuellt trick, borde det alltid finnas en bra mängd vitt utrymme runt din text. Låt det inte stöta på andra element, speciellt bilder. Låt ditt innehåll bitar (rubriker, stycken, sidor, etc.) andas.
Mark Boulton skrev en mycket informativ artikel om White Space för en lista, kolla in det.
4. Gå inte Font Crazy
En bra tumregel för någon formgivare är: använd inte mer än två teckensnitt ansikten i din design. Två teckensnitt kan se väldigt snygg ut. En lista från varandra använder variationer av Georgia och Verdana för att skapa ett elegant och polerat utseende. Men fortsätter att lägga till teckensnitt i ditt gränssnitt skapar onödig förvirring. På samma sätt undviker du att använda för många teckensnittstorlekar, färger eller behandlingar på en sida eller i en paragraf, eller de kommer att konkurrera med varandra istället för att lägga till betoning som avsedd.
Fastän typsnittstaplar och teknik som sIFR och Typeface.js tillåter dig att ange nästan vilken typsnitt som helst som standard, motstå frestelsen att gå vild med kroppskopian. Dekorativa typsnitt hålls bäst i rubriker eftersom de påverkar läsbarheten. Tänk på det - när är sista gången du plockade upp en paperback-roman helt och hållet i Comic Sans?
När du skapar teckensnittsstackar, var uppmärksam på storleken på dina parningar. Vissa teckensnitt som liknar varandra ger i mycket olika storlekar. Verdana och Arial är ett utmärkt exempel på detta. Typetester är ett utmärkt verktyg för att jämföra kärna webbfonter och skapa en framgångsrik stapel. Ett annat användbart verktyg som heter Font Stack Builder visar vilken procentandel av användare som kommer att se varje variation.
Oavsett vilka teckensnitt du väljer att använda, se till att de inte är teeny små. Jag vet dess hårda ... liten text ser cool ut. Men tänk på de fattiga, skrikande användarna! Håll kroppstext över 10 eller 12 pixlar. Om du insisterar på teeny små, använd åtminstone relativ storlek för alla de IE 6.0-användare som annars inte kunde göra det större. Läsa Wilson Miner s artikel på typsnittstorlekar för en bra debatt.
5) Försumma inte detaljerna
Klienten tillhandahöll innehållet. Att lägga till den på webbplatsen handlar bara om att kopiera och klistra, eller hur? Fel, fel, fel. Detta är en fälla webbdesigners falla alltför ofta.
Även de av oss som noggrant lägger till rubriker, formaterar varje stycke och organiserar punktlistor med omsorg glöm några viktiga typografiska detaljer. Många (inklusive mig) missade på formell träning, så du kan inte skylla oss helt. Men djävulen är i detaljerna. Dess tid vi omfamnar dessa grunder:
Använd smarta citat
Vad är skillnaden mellan smarta citat och dumma citat? Smarta citat (även känd som bok eller lockigt ) är krökt och har både en öppnings- och stängningsstil. Dumma ( raka ) citat brukar vara rakt upp och ner. En apostrop är typografiskt bara ett enda citat, så samma problem gäller. Ett dumt citat (även kallat prime ) bör endast användas mellan mätningar. Till exempel använder 6'4 "dubbla och enkla prime citat.
Tyvärr är våra tangentbord standard för att ange citat. Microsoft Word och andra textredigerare korrigerar dem bara för oss när vi skriver. Lägga till smarta citat till HTML-sidor kräver mer arbete från webbutvecklaren eftersom du måste använda markup för att skapa symboler för öppnande och stängning av citat. Jag ser samma problem med em och en-streck, ellips, varumärke och upphovsrättssymboler. Coders tar den enkla vägen ut genom att ersätta dem med bindestreck, flera perioder, en stor TM och den ökända (C). Att använda rätt symboler gör skillnad visuellt. Gör det rätt och gör redaktörer överallt le.
Hur man gör smarta citat:
#8216; = Öppnande av ett citat
’ = avslutande enda citat
“ = öppnande av dubbelt citat
” = stängning av dubbelt citat
Jag vet - ingen vill spendera hela dagen på att jaga citat. Lyckligtvis, verktyg som Smartypants och Textism kan göra mycket av legworken för dig genom att automatiskt formatera text som innehåller smarta citat och liknande.
Läsa "Problemet med EM och EN" från en lista för mer information om ämnet och UTF-8 teckenkodning för vanligaste specialtecken.
Ett försök - många CMS-textredigerare (som den här webbplatsen använder) låter dig inte implementera smarta citat utan extra plugins. Tråkigt men sant.
Sluta lägga två utrymmen efter en period. Snälla du! Det är inte nödvändigt och det är faktiskt ganska irriterande.
På dina länkar använder du gränsbotten: 1px solid i stället för textdekoration: understryka . Understreckningar kan springa genom nedstigningsfigurerna (g, j, p, q, y) vilket gör dem svåra att läsa, speciellt när de använder mindre teckenstorlekar.
Och medan det inte har något att göra med typografi, drev en snabb stavningskontroll aldrig någon död . Även om allt du gjorde var kopiera och klistra in, speglar ett stavfel som går igenom en levande webbplats dåligt på alla inblandade.
Var uppmärksam på de 5 fixerna och dina webbplatsdesigner kommer säkerligen att förbättras. Kom ihåg att dessa bara är en utgångspunkt. God typografi är en lärd färdighet precis som något annat, och det kräver studier och övning . Håll alltid ett öga på webbplatser som får det rätt och notera vad de gör. Behöver du inspiration? Kolla in sidorna nedan för exempel på bra webbtypografi och postexemplar som du tycker är inspirerande.
Inspirationstyp:
Skriven uteslutande för WDD av Mindy Wagner.
Vad tycker du om dessa enkla sätt att förbättra din typografi? Implementerar du dem på dina webbplatser? Vi skulle vilja höra från dig!