Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats

7 Min.
perfekt-webb-typografi

Ett lämpligt teckensnitt gör inte bara din webbplats mycket mer intressant visuellt. Teckensnitt har ett avgörande inflytande på om textavsnitt ignoreras eller läses. I det här inlägget ska jag visa dig hur du hittar det perfekta teckensnittet för din webbplats!

Bra typografi är resultatet av år av engagemang med teckensnitt och design. Några grundläggande tips kan dock hjälpa dig att träna ditt öga i enlighet därmed och använda rätt teckensnitt för ditt webbprojekt.

Metodtips, tips & riktlinjer i webbdesign

Webbdesign är mer än estetik. Minst lika viktiga är: en bra UX, tillgänglighet och SEO. I den här artikeln ska jag visa dig de bästa metoderna för framgångsrika webbplatser och nöjda användare:

Den allra första webbplatsen ...

Eller: Vad händer när du laddar ner en webbplats utan CSS. Tidigare representerades webbplatserna i de teckensnitt som integrerades i respektive operativsystem. Dessa läses fortfarande in idag om teckensnittet inte är tillgängligt. Den allra första webbplatsen är fortfarande online idag och ser exakt ut som livesändningen i december 1990:

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Den allra första webbplatsen

Hur webbplatsen visas i din webbläsare beror inte på webbplatsen, utan på vilket operativsystem du använder. Och om du har gjort ändringar i standardinställningarna.

För Windows-användare: Serif-teckensnitt representeras som standard i Times New Roman. Mac OS X, å andra sidan, är Times or Times Roman. Arial används av Windows som teckensnittet Sans Serif. Mac OS X använder Helvetica här.

Zach Leatherman har utvecklat ett projekt där han har testat olika operativsystem och tillhörande typsnitt. Font Family-verktyget ger dig en intressant inblick i reservteckensnitten – och hur de ser ut i slutändan. 

Georgien och Verdana

Mot mitten av 1990-talet lades Georgia och Verdana till standardteckensnitten, som var speciellt utformade för webben av Matthew Carter. Med ett glest urval av fem teckensnitt för att bygga bra webbplatser skapade behovet en numera tvivelaktig vana: teckensnitt som vanligtvis inte fanns på webben byggdes in som en bildfil.

Nackdelarna med detta är uppenbara:

  • Lämplig visning på olika enheter kan urarta till tråkigt mikroarbete.
  • Orden kan inte identifieras eller översättas av sökfunktionen.
  • Dessutom innebär varje textändring en enorm ytterligare ansträngning.

Designa för det okända

Lyckligtvis har tekniken mognat mycket längre. Trots allt är grundläggande kunskaper på det tekniska området också nödvändiga här. Eftersom det är viktigt att förstå vad som händer på din webbplats när önskat teckensnitt inte är tillgängligt. Det kan finnas flera skäl till detta. Till exempel en dålig Internetanslutning som gör att CSS-filen laddas sent.

I motsats till grafisk design är webben baserad på dåliga (olämpliga) teckensnitt är bättre än inget teckensnitt alls.

När du hanterar vilket teckensnitt som stöder din sida bäst visuellt måste du också ställa grundläggande tekniska frågor:

  • Visas texten även om CSS-filen inte läses in? 
  • Är din sida fortfarande läsbar i standard Serif och Sans Serif? 
  • Anger du ett alternativt teckensnitt? Hur presenteras det? Kan du skapa andra inställningar som ger dig mer kontroll över dina reservteckensnitt?

Först och främst är det viktigt att innehållet visas alls. Den allmänna läsbarheten är nyckeln när du väljer skrivfel. 

Robin Rendle ger intressanta grunder om ämnet FOUT vs. FOIT (när teckensnittet läses in) i sin artikel Loading Web Fonts with the Web Font Loader.

Mer information om ämnet finns här:

Var kommer ditt typsnitt egentligen ifrån?

Nu när du har studerat de tekniska bakgrunderna och reservteckensnitten finns det fortfarande en mycket viktig aspekt att ha. Nämligen den där ditt teckensnitt faktiskt laddas. Som tidigare nämnts har varje operativsystem sina egna standardteckensnitt. Dessutom kan alla användare installera teckensnitt på datorn. Så det är omöjligt att veta vilka som finns där – eller inte. 

För att presentera våra webbplatser inte bara i Arial och Times New Roman får vi alltmer tillgång till webbaserade teckensnittstjänster. Fördelen är uppenbar: de begränsningar vi har av att använda standardteckensnitt kringgås. Urvalet av tillgängliga teckensnitt ökas.

Förmodligen de mest kända här är Google Fonts (gratis) och Adobe Fonts (debiterbara). Men det finns andra leverantörer. Särskilt i Tyskland leder de skärpta dataskyddsriktlinjerna oftare till att google söks. Inte bara teckensnitt erbjuds för inbäddning, utan också plattformar som är värd för dina teckensnitt för dig, så det finns inga gränser för din kreativitet. Förutsättningen är naturligtvis att du äger rättigheterna eller licenserna.

Smashing Magazine har provat olika leverantörer och fått sin erfarenhet här.

Designelement efter teckensnitt

För att välja ett lämpligt teckensnitt bör du känna till några funktioner i typografier. Det kan i grunden sägas att stycken bör bestå av lättlästa teckensnitt. Om det blir för ansträngande, :besökarna:sluta läsa på din sida. Informationen du presenterar förbrukas inte. 

En annan aspekt här är att vara uppmärksam på hur teckensnittet ändras när det minskas. Eftersom ett teckensnitt som är lätt att läsa på skrivbordet kan vara svårt att läsa i ett mindre format på mobiltelefonen. 

Det finns indikatorer som du kan vara uppmärksam på och hjälpa dig att välja lämpligt teckensnitt.

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Artikel: Vad är typografi?

x-höjd

I följande exempel ser du tre olika exempel. X-höjden beskriver bokstaven x:s vertikala höjd. Om detta är för litet blir texten svårare att komma åt, särskilt för mindre teckenstorlekar. Om x-höjden är för stor blir det svårare att skilja mellan versaler och gemener.

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Källkod: Professionell
Webbtypografi

Öppningar

Bländare är öppningarna vi hittar i brev. Generellt sett, desto mer generösa är de, desto trevligare är de att läsa långa textavsnitt med detta teckensnitt.

Bokstavsavstånd och kerning

Medan bokstavsavstånd beskriver det allmänna avståndet mellan bokstäverna, är kerning avståndet mellan vissa bokstäver. Detta avstånd kan vara större på grund av bokstävernas naturliga form än mellan andra:

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Artikel: Typografi på 60 sekunder

Enhetliga avstånd gör att ditt teckensnitt ser mer harmoniskt ut. Detta gör det lättare att läsa. Båda kan också justeras via CSS, om du känner att det fortfarande finns ett behov av förbättring av teckensnittet du har valt:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminaler, uppstigna och nedstigna

Terminaler förekommer med bokstäverna a, ä, c, f, j, r och y:

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Källkod: Professionell
Webbtypografi

Ascenders och Descenders är likartade, men tilläggen till exempel f, q och j betyder:

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Källkod: Professionell
Webbtypografi

Följande gäller dem: desto mer inkonsekventa är de, desto mindre lämpliga är de för uttalade texter. Särskilt med Serif Fonts, terminaler, Ascenders och Descenders är särskilt välutvecklade, varför dessa teckensnitt länge har ansetts vara en säker kompromiss för längre delar av texten.

Kontrast

Kontrasterade teckensnitt (vänster) är mer olämpliga för små teckenstorlekar, som används i stycken, och passar bättre för rubriker.

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Källkod: Professionell
Webbtypografi

Djärv och kursiv

När du väljer teckensnitt bör du också se till att de är tillgängliga i olika styrkor och stilar. Eftersom icke-existerande teckensnittsstilar kan förfalskas av webbläsaren och sedan kan se ut så här:

(Till höger om den "falska" teckensnittsstilen från webbläsaren)

Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Källkod: Professionell
Webbtypografi

Baserat på dessa kriterier kan du nu söka i body font för din webbplats. Eftersom valet av detta vanligtvis är mer komplicerat och det finns mer att tänka på här, rekommenderar jag att du börjar med att välja rubrikteckensnitt baserat på brödtextteckensnittet (och inte tvärtom).

En mer omfattande översikt samt ytterligare definitioner finns här: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif och Monospace

Det finns ett brett utbud av kategorier för teckensnitt. De tre vanligaste är förmodligen

  • Serif, till exempel Times New Roman
  • Sans Serif, till exempel Arial
  • Monospace, till exempel källkod

Med teckensnittskombinationer finns det två enkla sätt att följa. Dessa är inte ett måste, utan bara riktlinjer som kan hjälpa dig. Särskilt om du inte har mycket erfarenhet av att kombinera teckensnitt:

  1. Använd samma teckensnitt för brödtexten och rubrikerna – men ändra tjocklek, bokstavsavstånd och storlek, till exempel Lato:
Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Använda samma teckensnitt för Brödtext & Rubriker
  1. Kombinera ett serif och ett sans serif-teckensnitt, till exempel Baskerville och Open Sans:
Webb typografi: Hur man hittar den perfekta teckensnitt för din webbplats
Så här kan en teckensnittskombination se ut

Dessutom finns det ett onlineverktyg som du snabbt kan upptäcka och prova olika teckensnittskombinationer: https://fontjoy.com/#.

Slutsats

Ett annat viktigt ämne som jag helt utelämnat är användningen av färger. Beroende på om ditt teckensnitt har en ljus eller mörk bakgrund kommer det naturligtvis att se annorlunda ut. Du kan också skapa teckensnittsvariationer genom att ta samma teckensnitt och inte bara i olika tjocklekar utan också i olika färger. När du väljer färg, ignorera inte ditt varumärkes stilguide och varumärke.

Förutom att analysera andra webbplatser är det också lämpligt för inspiration att hantera aktuella trender. Även om du snabbt kommer att märka att vissa teckensnittsparningar alltid upprepas här och det finns lite nytt. Beroende på projektet och kraven kan det dock vara nödvändigt att använda det som är känt snarare än att vara särskilt innovativt - i den här artikeln hittar du mer information.

Mer resurser om ämnet

Dina frågor: Det perfekta teckensnittet

Vilka frågor har du om typografi på webben? Använd kommentarsfunktionen. Vill du bli informerad om nya bidrag till webbdesign och utveckling? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.