2022-10-21

Så väljer du rätt typsnitt och typografisk skala för webben

När du väljer typsnitt för webben ska du först och främst ha användaren i fokus. Men du ska också skapa en samhörighet till ditt varumärke – typsnittet ska alltså kännas rätt för just ditt varumärke och din bransch. Vi väljer dock att fokusera på de praktiska delarna i att välja typsnitt och hur du ska kan tänka vid skapandet av din typografiska hierarki. Let’s dig in!

Tänk på det här innan du väljer typsnitt

För att täcka alla behov du kan tänkas ha på webben är det fördelaktigt att välja ett typsnitt som har en stor typsnittsfamilj, vilket innebär stor variation. Den stora variationen inkluderar att typsnittet ska ha en mängd olika vikter, stilar och varianter. Dessutom kan vissa typsnitt vara lättare att läsa än andra. Läsbarhet baserat på bland annat färgkontrast, teckenavstånd1 och radavstånd2 (1Tracking, 2Leading) för att nämna några få saker – som alla påverkar ögats funktion i att läsa av tecken och din webbplats innehåll på enklast möjliga vis.

En annan regel att ta med sig – som är mer riktat till redaktörerna – är att undvika att använda versaler i längre texter. Att läsa versaler är påfrestande att läsa på grund av ordbilden blir allt för beständig då tecknen ständigt linjerar i såväl över- som underkant.

Då har vi, om än lite hastigt, gått igenom den ”simpla” saken att välja teckensnitt och vad du bör tänka på.

Vad är en typografisk skala – och vilken ska du välja?

En typografisk skala är hierarkin för ditt typsnitt. Hierarkin hjälper till att skapa ordning och harmoni mellan texten olika delar, som alla fyller sin funktion på webbplatsen. Du kan skapa hierarkin med hjälp av ett finslipat designöga, men det kan vara fördelaktigt att använda sig av hederlig matematik för att effektivt och snabbt ge balans till ditt teckensittssystem.

En rolig parantes när vi pratar om ratios för att skala upp typsnitt är att de flesta skalor utgår från musikala skalor. Det kan också förklara varför en designers ofta pratar om flow, rytm och harmoni i relationen mellan teckenstorlekar.

Vanliga skalor är:
1.200 — Minor Third
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.618 — The Golden Ratio

The Golden Ratio

Vi ska illustrera detta med hjälp av The Golden Ratio som använder sig av 1.618 ratio. För att hjälpa till på traven har jag valt att utgå från typsnittsstorleken 16 pixlar, vilket i dagsläget fortfarande är ”default” och standard för desktop.

Ovan syns ett exempel där vi har applicerat The Golden Ratio. Detta innebär att med utgångspunkt från 16 pixlar (som är markerat) är varje text 1.618 gånger större eller mindre sin föregångare. För att utnyttja dessa skalor på bästa sätt bör du alltid utgå från en "bas", ett storlek som anses bäst för exempelvis desktop eller mobil.

Storlekar kan skilja sig mellan typsnitt, därför är varje projekt individuellt och justeringar kan behöva göras för att åstadkomma önskat resultat. Dock är dessa skalor en väldigt bra grund att stå på när du startar exempelvis ett designsystem för ett projekt eller företag.

Undrar du över något?

Kontakta mig, Albin, om du vill prata design eller varumärkesutveckling.

Kontakta oss

Nyfiken på mer kunskap?

En guide om hur du gör din webb affärsdrivande.
Guider & lathundar

Trevliga och lättöverskådliga guider för effektiv och riktigt vass kommunikation.

Kolla in guider
Kommunikationsbloggen

Stor kunskapsbank med smarta tips, inspiration och aktuella djupdykningar inom kommunikation.

Gå till bloggen
Korta videor med tips

Minut-korta videor med tips om allt från PowerPoint till copywriting och design. Vi kallar dem Tips från Triben.

Se korta videor

Undrar du över något?

Genom att boka en gratis konsultation, utan några som helst bindningar, får du ärlig och rak rådgivning.

Ta nästa steg i ditt bolag genom kommunikation!

Fyll i formuläret eller kontakta oss på:
hello@tribelounge.se

Skicka en förfrågan

Vad vill du ha hjälp med?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.