Typsnitt

ett teckensnitt i en fil som sidan laddar ned

Vad det är

Ett typsnitt är, i webbsammanhang, filen med de ritade tecknen för en formgivning i en vikt och en stil, tillsammans med de tabeller som talar om för programvara vilken teckning som står för vilket tecken och hur tecknen ska placeras. När en webbplats serverar filen kallas den ofta webbtypsnitt, och CSS-specifikationerna kallar den en font face.

Typografer håller isär formgivningen och filerna. Ubuntu är en typsnittsfamilj; Ubuntu Light och Ubuntu Bold Italic är snitt i den, och vart och ett är en egen fil. På svenska används typsnitt och teckensnitt ofta om båda sakerna, så det lönar sig att säga snitt när det gäller en enskild vikt och stil. CSS gör samma uppdelning. En familj samlar snitt under ett namn, och varje regel @font-face beskriver ett enda snitt: vilken familj det hör till, var det ska hämtas, vilken vikt och stil det täcker, vilka tecken det kan rita och vad som ska visas medan det laddas.

@font-face {
    font-family: "Reading Serif";
    src:
        local("Reading Serif Regular"),
        local("ReadingSerif-Regular"),
        url("/fonts/reading-serif-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Reading Serif", Georgia, serif;
}

Egenskapen font-family på ett element är en lista som läses från vänster till höger. Specifikationen väljer en familj och ett snitt för varje tecken i en textsträcka och tar det första snitt som matchar den begärda vikten och stilen och som innehåller en glyf för just det tecknet. En och samma rad kan därför sättas i två typsnitt när det första saknar en bokstav, och det generiska namnet sist i listan, serif, sans-serif, monospace eller system-ui, betyder att något installerat typsnitt alltid tar hand om resten.

På webben är filen nästan alltid WOFF2: samma konturer och tabeller som i OpenType eller TrueType, packade om för överföring och komprimerade med Brotli. Inuti kopplar tabellen cmap varje teckenkod till en glyf, och andra tabeller bär de tal som en layoutmotor behöver, t.ex. hur högt över och hur långt under baslinjen tecknen når, radmellanrummet och var en understrykning ligger och hur tjock den är. De talen avgör radhöjd och avstånd lika mycket som bokstävernas form avgör utseendet.

Varför det spelar roll

Varje vikt och varje stil är en egen nedladdning. En design som använder normal, kursiv och fet stil lägger tre filer mellan läsaren och den text som sätts i dem, och varje fil lägger till bytes vid det första besöket. Ett variabelt typsnitt, där en enda fil rymmer ett helt intervall av vikter längs en axel, är ett sätt att slå ihop dem, till priset av en större fil. Med deskriptorn unicode-range kan en familj dessutom delas upp efter skrift, och specifikationen förbjuder en webbläsare att ladda ned en del för tecken utanför dess intervall, så en sida hämtar bara de delar som dess text faktiskt använder.

Text i ett webbtypsnitt kan inte ritas innan filen har kommit fram, så webbläsaren behöver en policy för väntan. Deskriptorn font-display anger den. Med block rekommenderar specifikationen en blockeringsperiod på 3 s, då texten placeras ut men ritas osynlig. Med swap är blockeringsperioden högst 100 ms, reservtypsnittet syns nästan direkt, och webbtypsnittet ersätter det när det väl kommer. Med fallback är fönstret för bytet kort, 3 s rekommenderas, och därefter behåller sidan reservtypsnittet. Med auto bestämmer webbläsaren själv, och många behandlar det som block.

Var filen ligger spelar också roll. Typsnitt hämtas med CORS, så ett typsnitt från ett annat ursprung laddas bara när den servern tillåter det, och varje begäran till ett annat företags server talar om för det företaget vilken adress läsaren har och vilken webbplats hen besöker. Att servera typsnitten från webbplatsens egen värd tar bort både den extra anslutningen och betraktaren.

Ett typsnitt är programvara under en licens. SIL Open Font License tillåter användning, studier, ändringar och vidarespridning så länge typsnitten inte säljs för sig själva, och förbjuder en ändrad version att använda ett reserverat typsnittsnamn utan tillstånd. Ett typsnitt som har köpts för tryck kan ha andra villkor för webben, så läs licensen innan filen läggs på en server.

Täckningen är den sista frågan. Ett typsnitt ritar bara de tecken som dess cmap listar. Det mesta av det kyrilliska alfabetet ligger i intervallet U+0400–045F, men den ukrainska bokstaven ґ ligger på U+0490–0491, så en delmängd eller ett intervall som har skrivits för rysk text lämnar den åt det reservtypsnitt som råkar komma härnäst. Svenska klarar sig med latinska tecken, men å, ä och ö ligger utanför det grundläggande ASCII-intervallet, och en delmängd som bara täcker engelska lämnar dem på samma sätt.

Så ser det ut i praktiken

Webbplatsens kolofon listar det som når läsarens webbläsare som fem saker, och tre av dem är webbtypsnitt. Ubuntu, av Dalton Maag för Canonical, ges ut under Ubuntu Font Licence. Ubuntu Mono, samma familjs variant med fast teckenbredd, sätter koden. Shantell Sans, byggt på konstnären Shantell Martins handstil med tuschpenna, ges ut under SIL Open Font License och skriver marginalanteckningarna. Alla tre levereras från webbplatsens egen maskin, och sidan säger varför: ett webbtypsnitt från någon annans CDN är en tredje part som ser dig läsa. Ubuntu Mono och Shantell Sans laddas bara på de sidor som har kod eller en marginalanteckning.

Att dela upp ett typsnitt efter skrift är ämnet för anteckningen om understrykningar i Safari. Webbplatsen serverar Ubuntu i sex delar, tre vikter med latinska tecken och tre med kyrilliska, och varje del deklarerar de tecken den täcker, så engelska och danska sidor hämtar tre latinska filer och inga kyrilliska, och ukrainska sidor det omvända. Alla sex delade ett familjenamn, och i Safari försämrar ett snitt med ett icke-latinskt intervall skip-ink, den lucka som en understrykning lämnar runt en nedstapel, för varje tecken i familjen, latinsk text inräknad. Att ta bort de tre kyrilliska deklarationerna under körning tog de uppmätta luckorna från 1,8/1,0/1,0 px till 4,5/11,0/5,0 px. Lösningen gav de kyrilliska snitten ett eget familjenamn och lade det i stacken efter Ubuntu: tre omdöpta deklarationer och en ny post i stacken, med Chrome orört och ukrainska fortfarande satt i Ubuntu med identiska bredder. Samma anteckning visar hur mycket ett typsnitts egna tal kan variera: Ubuntu deklarerar en understrykningstjocklek på 0,056 em för Light, 0,020 em för Medium och 0,120 em för Bold.

Landningssidan framför företagets egen git-forge hade varit en handunderhållen kopia av huvudwebbplatsens design, och varenda skillnad som hittades mellan de två var ett misstag snarare än ett beslut. Två av de fem gällde typsnitt: en typsnittsdeklaration som slog ihop två vikter till en på varje dator där familjen var installerad, och en vikt som användes utan att någon typsnittsfil levererades för den. Ingen av de fem syntes i en skärmbild. Kopian togs bort, och landningssidan byggs nu av huvudwebbplatsens egna mallar.

Var det går fel

Texten förblir osynlig medan filen laddas. Med block, och ofta med auto, visar en långsam anslutning en färdigplacerad sida utan ett enda ord, upp till hela blockeringsperioden. Använd swap för brödtext och förladda de en eller två filer som den första skärmen behöver. En förladdning av ett typsnitt behöver attributet crossorigin även för en fil från samma ursprung, eftersom förladdningen måste matcha den CORS-begäran som den står i stället för.

Sidan hoppar när typsnittet kommer fram. Ett reservtypsnitt med andra bredder och radhöjder bryter raderna på andra ställen, och bytet flyttar om dem. Specifikationen råder till reservtypsnitt vars mått ligger nära webbtypsnittets. När inget gör det kan ett snitt med local() för reservtypsnittet, med ascent-override, descent-override och line-gap-override, jämka dess vertikala mått, så att bytet ändrar bokstävernas form men inte layouten.

Fetstil och kursiv som ingen har ritat. När en familj saknar ett fett snitt kan webbläsaren göra det normala tjockare, och den kan luta det normala när det saknas en kursiv. Strecken blir grötiga och raka bokstäver lutar. Leverera varje snitt som designen använder, eller sätt font-synthesis till none, så att ett saknat snitt syns vid granskningen som upprätt text i normal vikt i stället för som en förfalskning.

local() tar ett snitt, inte en familj. Namnet inuti local() matchar ett enda snitt genom dess fullständiga namn eller dess PostScript-namn. Att skriva familjenamnet där för varje vikt kan matcha ett och samma installerade snitt för alla, så fetstil återges som normal text på just de datorer som har familjen installerad. Namnge varje snitt, på båda sätten, eller utelämna local().

En glyf som saknas blandar typsnitt. Ett snitt som saknar ett tecken lämnar över det till nästa familj, så ett enda ord kan visa två formgivningar. En delmängd som har skurits för snävt gör samma sak med en hel skrift. Kontrollera täckningen mot den text som webbplatsen faktiskt publicerar, på varje språk den publicerar.

Läs mer

CSS Fonts Module Level 4 — @font-face, matchningsalgoritmen, unicode-range, font-display och reglagen för syntetiska snitt.
WOFF File Format 2.0 — hur typsnitt i OpenType och TrueType packas och komprimeras för webben.
OpenType cmap table — tabellen som avgör vilka tecken ett typsnitt kan rita.
SIL Open Font License — själva licenstexten, med villkoren för kopior, ändrade versioner och reserverade namn.
WebKit bug 255159 — rapporten om skip-ink för understrykningar i Safari som webbplatsens anteckning bygger på.

Ordlista