BLOGGEN

Albin Sandh

21/10/22

Välj typsnittsfamilj för webben och skala upp rätt!

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!

Albin Sandh

October 21, 2022

Att välja typsnittsfamilj

För att täcka alla behov du kan tänkas ha på webben är det fördelaktigt att välja 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å.

Typografiska skalor – 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.

Läs mer från bloggen