Två snitt, en växel: data-font på roten.

Snittet

Snittet väljs i inställningarna. Båda serveras från paketet.

Fakturerbar tid

1 284 timmar på 37 projekt

Rapporterade timmar per projekt och medarbetare, för perioden 1–30 september.

Brödtext, 0,875 rem. Halvfet är 600. Siffror i löptext är proportionella: 1 284 h, 72 %, 41,5 timmar.

Tabulära siffror i en kolumn: 1 284, 228, 47, 1 109

Två vikter

400 och 600. En font-weight: 700 är en syntetisk fetstil.

UI-skala

Från 0,75 till 1,125 rem. Tätt, för sifferkolumnens skull.

--text-2xs
0.6875remRapporterade timmar per projektKapitäler i en tät tabell

--text-xs
0.75remRapporterade timmar per projektMetatext, badges, hjälptext

--text-sm
0.8125remRapporterade timmar per projektKnappar, tabellceller, toolbar

--text-md
0.875remRapporterade timmar per projektBrödtext — standard

--text-lg
1remRapporterade timmar per projektPanelrubrik, formulärfält

--text-xl
1.125remRapporterade timmar per projektSektionsrubrik

--text-2xl
1.375remRapporterade timmar per projektSidrubrik

--text-3xl
1.75remRapporterade timmar per projektSiffran i ett statblock

Displayskala

Varumärkesbokens flytande steg, för marknadsformade ytor.

--size--1Whitespace

--size-0Whitespace

--size-1Whitespace

--size-2Whitespace

--size-3Whitespace

--size-4Whitespace

Rubriker

En sida skriver <h1>. Storlek, vikt, radavstånd och tracking är satta per nivå.

Rapporterade timmar

Sidrubriken. 1,375 rem, halvfet, tracking −0,015 em, radavstånd 1,15.

Per projekt

Sektionsrubrik på 1,125 rem. Brödtexten är 0,875 rem med 1,5 i radavstånd och 68 tecken per rad.

Region Skåne

Panelrubrik på 1 rem. Halvfet är 600, aldrig 700.En länk är understruken, fri från stapelbottnarna.

Småtext, 0,75 rem, dämpad — och med lite tracking tillbaka.

<h1>Projekt</h1>
<h2>Budget</h2>
<h3>Nedlagd tid</h3>
<p>Brödtext…</p>

Radlängd

Tre mått i riktiga tecken. Snittets genomsnittliga teckenbredd är uppmätt, så måttet följer både snittet och storleken.

--measure-tight, 45 tecken — Etikett, hjälptext, ett statblocks metarad

Rapporterade timmar per projekt och medarbetare för perioden, med avvikelser markerade och fakturerbar andel beräknad mot budgeten för varje uppdrag.

--measure, 68 tecken — Brödtext i ett gränssnitt

Rapporterade timmar per projekt och medarbetare för perioden, med avvikelser markerade och fakturerbar andel beräknad mot budgeten för varje uppdrag.

--measure-prose, 75 tecken — Löptext, där radavståndet är som störst

Rapporterade timmar per projekt och medarbetare för perioden, med avvikelser markerade och fakturerbar andel beräknad mot budgeten för varje uppdrag.

Löptext

För innehåll som kommer som HTML från någon annan och inte går att sätta klasser på.

Måttet är 75 tecken.

Hur en rubrik sitter

En rubrik sitter närmare det som följer än det som kom före.

Citatrösten är varumärkets serif i kursiv, avgränsad med ett streck.

Inline-kod får en platta. Tryck ⌘K för att söka.

En punktlista
med två punkter

<div class="ws-prose">…</div>

Dokument

ws-prose--lg: ett dokument som läses som ett dokument — en rapport, en metod — en storlek upp, ungefär 40 em per rad, och samma i punkter på papper.

Besöken ökade med fem procent i september, mest på sidorna om parkering.

Ökningen syns både i mobilen och på datorn, och den började veckan då de nya taxorna publicerades.

<div class="ws-prose ws-prose--lg">…</div>

Kod

JetBrains Mono, som i Ghostty, med snittets egen radhöjd. IBM Plex Mono eller systemets går att välja under inställningarna. Inga ligaturer: != ska se ut som det skrivs.

const timmar = rader
  .filter((r) => r.kund === "Region Skåne" && r.datum >= "2026-09-01")
  .reduce((summa, r) => summa + r.timmar, 0); // 41,5 → fakturaunderlag
if (timmar !== 0 && timmar <= 600) visa(timmar);

Inline---font-mono följer samma val.

<pre><code>…</code></pre>

Mot Carbon

Varje steg bredvid Carbons motsvarighet, ur Carbons egen källkod. Fyra steg sammanfaller; de andra fyra har ingen.

Steg	Storlek	Carbon	Carbons typsätt	Carbons radhöjd
`--text-2xs`	11 px	–	Inget: under Carbons minsta steg	–
`--text-xs`	12 px	scale01	label-01, helper-text-01, code-01	1,33
`--text-sm`	13 px	–	Inget: mellan 12 och 14	–
`--text-md`	14 px	scale02	body-01, body-compact-01, heading-01	1,43 och 1,29
`--text-lg`	16 px	scale03	body-02, body-compact-02, heading-02	1,5 och 1,375
`--text-xl`	18 px	scale04	Inget typsätt använder steget	–
`--text-2xl`	22 px	–	Inget: mellan 20 och 24	–
`--text-3xl`	28 px	scale07	heading-04	1,29

Mot standarderna

Samma frågor ställda till fyra publicerade system och två regler. Värdena är hämtade ur deras källkod, inte ur minnet.

Källa	Brödtext	Radavstånd	Radlängd	Vikter	Tabellsiffror
malm-ui	0,875 rem	1,5	45, 68 och 75 tecken	400, 600	I kolumner, inte i löptext
Financial Times Origami	1 rem	1,5	60 ch, som FT själva räknar ned med 0,75	300 till 800	Ingen allmän regel
GOV.UK	1,1875 rem	1,32	Högst 75 tecken	400, 700	I datatabeller och referensnummer
IBM Carbon	0,875 rem	1,29 till 1,43	Ingen regel	300, 400, 600	Ingen token
Bringhurst	–	–	45 till 75 tecken, helst 66	–	–
WCAG 1.4.8, AAA	–	Minst 1,5	Högst 80 tecken	–	–

Radlängden mäts nu. Den var satt i ch, bredden av en nolla, och höll därför 90 till 100 tecken. FT gör samma korrigering i sin kod.
Brödtexten är mindre än FT och GOV.UK. Samma som Carbons produktiva nivå, eftersom en tät vy ska rymma en tabell. FT kallar under 1 rem ett undantag för långa texter, så löptext får egen skala.
Radavståndet klarar AAA. 1,5 i brödtext, vilket varken GOV.UK eller Carbon gör i sin täta text.
Två vikter, som GOV.UK. Deras är 400 och 700. Vår halvfeta 600 är Carbons.