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

7 Min.
perfekt-webb-typografi

En lämplig typsnitt inte bara gör 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 den perfekta typsnittet för din hemsida!

Bra typografi är resultatet av år av engagemang med typsnitt och design. Men några grundläggande tips kan hjälpa dig att träna ögat därefter och använda lämpligt teckensnitt för ditt webbprojekt.

Bästa praxis, tips & riktlinjer i webbdesign

Webbdesign är mer än estetik. Minst lika viktigt är: en bra UX, tillgänglighet och SEO. I denna artikel Jag ska visa dig de bästa metoderna för framgångsrika webbplatser och nöjda användare:

Den allra första hemsida ...

Eller: Vad händer när du laddar ner en webbplats utan CSS. Tidigare var webbplatserna representerade i de teckensnitt som integrerades i respektive operativsystem. Dessa är fortfarande laddas i dag om teckensnittet är otillgängliga. Den allra första hemsidan ä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 eller Times Roman. Arial används av Windows som Sans Serif-teckensnitt. 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. Verktyget Teckensnittsfamilj ger dig en intressant inblick i reservtypsnitten – och hur de ser ut i slutändan. 

Georgien och Verdana

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

Nackdelarna med detta är uppenbara:

  • Lämplig visning på olika enheter kan urarta till tråkiga mikro-arbete.
  • Orden kan inte identifieras eller översättas av sökfunktion.
  • Dessutom utgör varje textändring en enorm extra ansträngning.

Designa för det okända

Lyckligtvis har tekniken mognat mycket längre. Trots allt är grundläggande kunskap inom det tekniska området också nödvändig 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 orsaker till detta. Till exempel en dålig Internetanslutning som gör att din CSS-fil laddas sent.

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

Som du behandlar vilket teckensnitt stöder din sida bäst visuellt, måste du också ställa grundläggande tekniska frågor:

  • Kommer din text att visas även om CSS-filen inte laddas? 
  • Är din sida fortfarande läsbar i standarden Serif och Sans Serif? 
  • Ger du ett alternativt typsnitt? Hur presenteras det? Kan du göra andra inställningar som ger dig mer kontroll över dina reservteckensnitt?

Först och främst är det viktigt att innehållet visas över allt. Den allmänna läsbarheten är nyckeln när man väljer stavfel. 

Robin Rendle ger intressanta grunderna om FOUT vs FOIT (när teckensnittet laddas) i sin artikel Läser in webbteckensnitt med webbteckensnittsinläsningaren.

Ytterligare information om ämnet finns här:

Var kommer ditt teckensnitt egentligen ifrån?

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

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

Förmodligen den mest kända här är Google Fonts (gratis) och Adobe Fonts (avgiftspliktig). Men det finns andra leverantörer. Särskilt i Tyskland leder de förstärkta riktlinjerna för dataskydd oftare till att man söker ett alternativ till Att Google söks. Inte bara teckensnitt erbjuds för inbäddning, men 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 ut olika leverantörer och hans erfarenhet här Samlas in.

Designelement efter teckensnitt

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

En annan aspekt här är att uppmärksamma hur teckensnittet ändras som 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 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 visas tre olika exempel. X-höjd beskriver bokstavens x-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 de öppningar vi hittar i bokstäver. Generellt sett, ju mer generösa de är, desto trevligare är de att läsa långa textavsnitt med detta typsnitt.

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 ditt teckensnitt ser mer harmonisk. Det 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ättringar i det typsnitt du har valt:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminaler, Uppstigare och Nedstegar

Terminaler förekommer i bokstäver a, ä, c, f, j, r och y:

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

Uppstigare och Nedständare är liknande, men förlängningarna 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: ju mer oansenliga de är, desto mindre lämpliga är de för uttalade texter. Speciellt med Serif Fonts, terminaler, Ascenders och Nedstättare är särskilt väl utvecklade, varför dessa typsnitt har länge ansetts vara en säker kompromiss för längre avsnitt av text.

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

Fet och Kursiv

När du väljer dina teckensnitt bör du också se till att de finns i olika styrkor och stilar. Eftersom icke-existerande typsnitt stilar kan vara smidda av webbläsaren och kan sedan se ut så här:

(Till höger om "falska" typsnitt stil 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 är oftast mer komplicerat och det finns mer att tänka på här, rekommenderar jag att börja med att välja rubriken Font (s) baserat på Body Font (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 typsnittskombinationer finns det två enkla sätt att följa. Dessa är inte ett måste, utan bara riktlinjer som kan hjälpa dig. Speciellt om du inte har mycket erfarenhet av att kombinera typsnitt:

  1. Använd samma teckensnitt för kroppen 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änd samma teckensnitt för Body & Headings
  1. Kombinera en serif och en sans serif typsnitt, 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 med vilket du snabbt kan upptäcka och prova olika teckensnittskombinationer: https://fontjoy.com/#.

Slutsats

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

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 teckensnittskopplingar alltid upprepas här och det finns lite nytt. Beroende på projekt och krav kan det dock bli nödvändigt att i större mängd utnyttja det man vet än att vara särskilt innovativ – i detta Inlägg kan du hitta fler detaljer.

Mer resurser i ämnet

Dina frågor: Den perfekta teckensnitt

Vilka frågor har du om typografi på webben? Använd kommentarsfunktionen. Du vill bli informerad om nya bidrag till webbdesign och utveckling? Följ oss sedan på TwitterFacebook eller via vår 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ändarnas motivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Kommentarer om den här artikeln

Skriv en kommentar

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