Typografi utan standardval: 11 alternativ till Inter

AI sätter ihop en webbplats på några minuter, och resultatet är ofta dugligt. Ändå ser webbplatserna ut som kopior av varandra. En stor del av förklaringen ligger i typsnittet: texten täcker mer av sidan än bilder, knappar och ikoner tillsammans, så typsnittet färgar hela intrycket innan någon har läst ett enda ord. Fel typsnitt avslöjar en mall snabbare än något annat enskilt val.

Inter är inte problemet. Standardvalet är det.

Typsnittet kommer från startmallen. Dokumentationen för Next.js använder Geist i sina exempel, det gör även shadcn/ui:s egen dokumentationswebbplats, och Inter har blivit standard för allt annat. Båda är välritade: Inter har över 2 000 tecken och egna optiska storlekar för brödtext och rubriker. Problemet är upprepningen. När samma typsnitt dyker upp i tiotusentals demon och mallar läser ögat det som en webbplats som satts ihop i all hast.

Se själv: elva fria alternativ

Fritt betyder inte svagt. Google Fonts har variabla typsnitt med optiska storlekar och ordentligt ritade kursiver. För ett finländskt företag är den naturligaste starten Finlandica, Finlands nationella typsnitt, ritat av Helsinki Type Studio. Varje typsnitt nedan är faktiskt laddat på den här sidan, så du ser det som det skulle se ut på din egen webbplats.

Rubrikerna och brödtexten på den här webbplatsen är Host Grotesk. Kursiv Instrument Serif var samma knep i lättare form, men den har dykt upp i så många AI-byggda rubriker att den i dag är ett eget kännetecken. Så går det med standardval.

Det räcker inte att bara byta typsnitt

Det generiska uttrycket uppstår i lika hög grad av text som är lika stor, har samma vikt och står i lika breda spalter. Buttericks praktiska typografi kokar ner de här inställningarna till några få regler:

• Radlängd på 45–90 tecken. Bringhursts ideal för en spalt är 66.
• Radavstånd på 120–145 procent av typsnittsstorleken, lite mer för antikva än för grotesk.
• Brödtext på 15–25 pixlar. Mindre är ett standardvärde, inte ett val.
• Stor skillnad i storlek och vikt mellan rubrik och brödtext. Allt i vikt 400 ser ut som en startmall.
• Opsz-axeln i ett variabelt typsnitt justerar bokstavsformen efter storleken. Webbläsarna har stött den sedan 2020, och det är det billigaste sättet att få typografin att se genomtänkt ut.
• Två typsnitt räcker, så länge det andra är tydligt annorlunda: en antikva till grotesken, inte två likartade grotesker.

Till AI:s handavtryck räknas i dag också de här vanorna: en spärrad versaletikett ovanför varje rubrik, uppgifter kedjade med mittpunkter, ett monospace-typsnitt i små siffervärden och en pil efter varje länk. Var för sig är de harmlösa. Tillsammans är de samma fenomen som ett standardtypsnitt.

Ett betalt typsnitt kostar mindre än du tror

Helsinki Type Studio är ett typsnittsgjuteri i Helsingfors som grundades 2013 och har ritat typsnitt för bland annat HRT, utrikesministeriet, Uleåborgs stad, S-Market och Tori.fi. Deras webblicens gäller en webbplats och prissätts enligt månadsbesökare: familjen Allee upp till 500 000 besökare kostar 1 050 €, en enskild skärning börjar på 70 euro. Helsingfors stad licensierar sitt kännetecknande typsnitt Helsinki Grotesk Pro för 70 euro per skärning. Egenartad typografi är inte de stora budgetarnas privilegium.

I Finland och i närområdet finns mer att välja mellan än många tror: Typolar, Paavola Type Studio och Hurme Design, svenska Letters from Sweden, isländska Or Type och norska Monokrom. Av de fria finländska typsnitten är Jaapokki ett etablerat rubriktypsnitt.

Fyra saker om licenser

• Typsnitten i Google Fonts får användas också kommersiellt, men ladda ner filerna till din egen server. Att ladda från Googles servrar skickar besökarens IP-adress till Google, och regiondomstolen i München dömde ut ersättning för det 2022.
• Gratis är inte detsamma som fritt. Fontshares Satoshi och Switzer får inte ändras eller lämnas vidare till en utomstående formgivare, och licensen kan sägas upp.
• För ett betalt typsnitt är det avgörande vem som äger licensen. Byråns licens får inte driva kundens webbplats, så begär licensen i kundens namn.
• Prenumerationstypsnitt slutar fungera när betalningarna upphör. Adobe Fonts och webblicenser med årsavgift är dåliga val som bestående varumärkestypsnitt.

Tekniskt genomförande

I Next.js laddar next/font ner typsnitten under byggfasen och levererar dem från din egen domän, så ingen förfrågan når Google. Från ett variabelt typsnitt följer som standard bara viktaxeln med, så optisk storlek måste begäras separat. Standardtemana i WordPress har levererat typsnitten från temakatalogen sedan version 6.2. Om temat eller sidbyggaren hämtar typsnittet från en utomstående server, åtgärda det.

Så väljer du typsnitt

• Se först på vad dina konkurrenter använder. Om tre av fyra kör på Inter har du en gratis chans att skilja dig.
• Välj ett typsnitt som har kursiv och tillräckligt många vikter. Utan kursiv ser framhävningarna i brödtexten klumpiga ut.
• Föredra ett variabelt typsnitt: du får alla vikter med en enda fil.
• Testa rubrikerna med den längsta verkliga texten, inte med lorem ipsum. Finska sammansatta ord fäller många layouter.
• Läs licensen innan du installerar typsnittet på kundens webbplats, och hosta alltid filerna själv.

Typsnittet gör inte varumärket ensamt, men fel typsnitt berättar för besökaren om mallen redan före den första meningen. Nästa del i serien handlar om färg, och om varför den violetta gradienten blev AI:s kännetecken.