10 regler för webbtypografi som varje designer bör känna till
Du kan infoga många element i din webbdesign som skapar engagemang och håller dina besökares uppmärksamhet. Dessa inkluderar bilder, videor och till och med ljud. Den viktigaste delen av nästan varje webbplats är dock innehållet som besökarna läser för att få den information de läser.
Om du vill göra den informationen lättare att läsa, visuellt intressant och för att texten ska läggas till den övergripande designen av en webbplats, måste du förstå typografi. Detta är konsten och skickligheten att göra det skrivna ordet både funktionellt och estetiskt tilltalande.
Om du vill lära dig att använda typografi till din fördel, kolla in dessa 10 regler som varje designer bör tänka på.
1 Sluta använda LoremIpsum efter den inledande designprocessen
Om innehållet är kung, varför övervägs det inte seriöst i webbdesignprocessen? Genom att använda falskt innehåll som platshållare förvisar webbdesigners innehåll till en sekundär roll. Detta är en stor indikation på att designprioriteringar är helt uteslutna. Det är inte så problematiskt i tidiga skeden, till exempel när du hånar en mängd olika sidlayouter. Men när du väl har begränsat saker och ting är det viktigt att arbeta med faktiskt webbinnehåll när du skapar den slutliga designen. Detta säkerställer att det som sägs på en viss webbsida ges lika stor vikt som layouten och de visuella elementen.
Utöver detta är det viktigt att ha faktisk text när det gäller design och layout. Du vill inte vara i den positionen att ha helt designat en webbsida, bara för att lära dig att den inte fungerar med det faktiska innehållet. Det är därför det är extremt viktigt att få den faktiska texten från din klient till innehållsskribenten så snart som möjligt.
2 Gör Text Sans Serif
Serif text är helt underbar. Dessa är fantastiska typsnitt att använda för utskrift och för större utskriftsapplikationer som rubriker, titlar och underrubriker. Tyvärr, på skärmen, skalar seriffer inte bra när det kommer till mindre visningar av innehåll som textblock. Serifferna som ser snygga ut i större storlek gör texten svårläst när typsnittet blir mindre. På grund av detta är det tillrådligt att spara seriffer för stor text och att lita på sans när läsbarheten kan vara ett problem. Ännu bättre, omfamna det rena, eleganta, moderna utseendet av sans fonts och spara seriffer till tryckpressen. På så sätt kommer du aldrig att behöva ta itu med försämringen av läsbarheten till förmån för att använda ett typsnitt som ser vackert ut.
3 Tänk på smarta citat och andra symboler tidigt i designprocessen
Chansen är stor att du har besökt en webbplats där vissa symboler inte skulle visas korrekt. Ibland ersätts de med en fråga eller en rad konstiga karaktärer. Andra gånger är de helt enkelt inte där. Detta händer ofta med smarta eller "lockiga" citat. Detta är ofta resultatet av att text skapas i MS Word eller ett annat paket och sedan överförs till en webbsida. Saker översätts helt enkelt inte som önskat. Det är också vanligt för Euro symbol, dubbelbyte-tecken och andra symboler hämtade från främmande innehåll.
För att undvika detta problem i din slutliga design har du ett par alternativ. Först kan du ändra ditt innehåll för att bli av med dessa symboler. Detta fungerar om du är villig att ändra symbolerna till ett naturligt språk. Du kan också använda HTML för att säkerställa att symbolerna visas korrekt istället för att bara förlita sig på kopiering och inklistring. Vad du än bestämmer dig för, se till att testa webbsidan i alla webbläsare du kan. Det som kan lösa ett problem med symboler i en webbläsare kanske inte alls är effektivt i en annan.
4 avancerade CSS-färdigheter är oerhört viktiga
Om du har utvecklat goda CSS-kunskaper bör dina besökare kunna navigera genom sidorna på din webbplats på ett absolut sömlöst sätt. Om du skapar dina stilmallar på rätt sätt kan du till och med ha flera versioner av samma sida samtidigt som du behåller stor kontinuitet när det kommer till typografi. Naturligtvis behöver du inte använda en massa knep. Bra CSS kan hjälpa dig att undvika små men vanliga problem som att ändra typsnitt och teckenstorlek från en sida till nästa.
Varför är konsekvent typografi en sådan nödvändighet? Att använda CSS för att upprätthålla konsekvent typografi ger din webbplats ett professionellt och skarpt utseende. Det betyder också att du inte behöver tänka på typografi när du designar varje sida. Istället använder du bara lämplig stilmall. Om du bestämmer dig, på en viss sida, att du ska bryta normen och göra något annorlunda med typografi för att skapa en effekt eller för att uppmärksamma något, kommer den att sticka ut mer tack vare din användning av CSS.
5 Både mikro- och makrotypografi är viktiga
Mikrotypografi avser detaljerna i typografi som är relaterade till läsbarhet. Till exempel är avstånd ett problem relaterat till mikrotypografi, liksom skalning och kontrast. Justeringarna som du gör för att säkerställa att ett textblock är läsbart på alla enheter eller webbläsare är alla relaterade till mikrotypografi.
Makrotypografi relaterar till hur dina val när det gäller typografi hänger ihop med din övergripande design. Det handlar om estetik.
Bra typografi tar hänsyn till både mikro- och makrotypografi. Har du någonsin besökt en webbplats som använde ett riktigt snyggt, anpassat typsnitt som också var nästan omöjligt att läsa? Det är vad som händer när man ägnar uppmärksamhet åt makrotypografi, men inte mikrotypografi.
6 Känn till innehållet såväl som designen
Som ni vet har en bra hemsida flyt. En del av detta är läsbarheten för innehållet som finns på sidan. Vi har redan diskuterat hur detta påverkas av saker som seriffer, och vi har diskuterat hur dummytext inte är någon ersättning för den riktiga varan när det kommer till de senare faserna av design. Vi är inte klara än. Innehållet är verkligen kung. När den slutliga designen, inklusive innehåll, är på plats, måste du läsa webbsidan.
När du läser innehållet efter att din design är klar kan du avgöra om det finns problem med avstånd eller radbrytning. Dessa kan göra innehållet förvirrande, eller till och med oavsiktligt ändra innebörden av innehållet. Att åtgärda dessa problem genom att använda några typografiknep kan säkerställa att din slutprodukt kommunicerar exakt vad du eller din kund avser.
7 Förstå vikten av hierarki
Hierarki är färdplanen som du ger till personer som besöker din webbplats. Du kan använda bilder, video, färg och (naturligtvis) typografi för att skapa den hierarkin.
Det handlar helt enkelt om att guida besökaren från det första du vill att de ska se till nästa osv. Med typografi kan du använda storlek, ändringar i teckensnitt och mellanrum för att definiera hierarkin som du vill att användarna ska följa. Faktum är att om du har en sida som inte konverterar, kanske du vill leka med typografi för att se om några ändringar du gör kommer att hjälpa besökarna till uppmaningsknappen.
8 Var kreativ men ändå försiktig med färg
Det enklaste sättet att säkerställa att du aldrig har läsbarhetsproblem på grund av problem med teckensnittsfärg och bakgrundsfärg är att använda de högsta kontrastfärgerna som finns, svart och vitt. Tyvärr kan det ge en ganska tråkig design.
Var inte rädd för att använda färger. Var faktiskt inte rädd för att använda färgkombinationer som inte verkar som om de skulle fungera. Ibland behöver du bara gå en eller två nyanser ljusare eller mörkare. Sedan går din typografi från oläslig till perfekt urskiljbar och riktigt cool.
9 Dikescentrerad text
Problemen med centrerad text är många. Först och främst kan det få dina webbsidor att likna dåligt utformade flygblad. Utöver detta hamnar man nästan alltid på konstiga marginaler och text som framstår som om det är tänkt att vara en dikt eller linernoter från ett gammalt rockalbum. Även om det kan vara okej att använda centrerad text för rubriker, är det vanligtvis bäst att undvika det helt och hållet. Håll dig till vänsterjusterad text så kommer dina läsare att tycka att ditt innehåll är mycket lättare att läsa.
10 Tänk på hur din text ser ut förstorad
Oavsett om de använder tummen och pekfingret eller klickar på zoomknappen, kommer folk att göra din text större. Ibland gör de detta för att kompensera för en mindre skärm. Andra gånger gör de det helt enkelt för att det är svårt för dem att läsa din text i normal storlek.
Det skulle vara fantastiskt om alla kunde se din text som avsett, men med boomers som ofta behöver lite extra hjälp för att se text är det helt enkelt inte möjligt. Var noga med att inte använda ett typsnitt som försämras om det förstoras.
Användbara verktyg och resurser
Här är några användbara verktyg och resurser som hjälper dig att göra mer med typografi:
- FontFace Ninja: Det här verktyget hjälper dig att identifiera typsnitt som du hittar på internet. Det här är ett bra verktyg att ha när du stöter på ett teckensnitt som verkligen fångar ditt öga. Detta Chrome-plugin hjälper dig att identifiera, hitta och köpa alla kommersiellt tillgängliga teckensnitt som du ser på vilken webbplats som helst.
- TypePlate: Detta är ett komplett typografiramverk som är perfekt för webbdesigners. TypePlate kan hantera drop cap, blockcitattecken, skalning, färger och en mängd andra typografirelaterade utmaningar.
- Modulär skala: Detta är en skala som låter dig bestämma det ideala teckensnittet och teckenstorleken. Det hjälper dig också att skapa en balans mellan storleken på teckensnittet i dina titlar och rubriker och det teckensnitt du väljer för din text.
- TIFF: Detta verktyg låter dig ta fram två olika typsnitt. Sedan visar den skillnaderna mellan vart och ett av de två teckensnitten för dig. Det låter dig till och med jämföra olika bokstäver och siffror från ett teckensnitt till ett annat.
- TypeWolf: Använd den här webbplatsen för att fixa några av de coolaste typsnitten och mest inspirerande användning av typografi på internet. Detta är en utmärkt källa till inspiration och information.
- Why Fonts Matter, Sarah Hyndman: Det här är en utmärkt bok som utforskar vikten av typsnitt och hur typografi kan påverka sinnestillståndet. Det är en fantastisk bok för personer som brinner för typografi, men också för personer som kan behöva övertygas om vikten av att välja rätt typ av jobb.
Slutsats
Förhoppningsvis påverkar den här artikeln webbdesigners att tänka lite mer på typografi, och även att hitta sätt att använda typ mer effektivt och mer kreativt i sin design.