Typography.
Satoshi by Fontshare. one family, five weights, full Latin Extended-A for Croatian, Serbian, Slovenian, and Romanian diacritics. Headings tight-tracked. Body at 1.7–1.85 leading. Numbers tabular.
03.1
Family
Satoshi
--font-sansLoaded from Fontshare CDN via <link> in src/app/layout.tsx.03.2
Specimen
Live rendering at every weight. Click any character block to select it.
The quick brown fox jumps over the lazy dog. 1234567890.
Satoshi is a minimalist, modern geometric sans with a warm core. drawn by Deni Anggara at Indian Type Foundry and distributed through Fontshare. Werklist loads it from CDN with font-feature-settings: "ss01", "cv01", "cv11" , never disable these.
03.3
Scale
Eleven steps. Size, weight, tracking, usage.
Display
44 / 68 / 76 px
Home hero · marketing hero
H1
26 / 34 px
Detail hero
H2 editorial
34 / 44 px
Marketing section heads
H2 section
44 px
Generic product sections
H3
22 / 26 px
Detail-page subsections
H4 card
18 / 20 px
JobCard titles
Body large
16 px
Long-form prose
Body
15 px
Default UI body
Small
13 px
Meta, footer
Eyebrow
11 px
UPPERCASE section labels
Caption
12 px
Helper / legal
03.4
Weights
Five loaded. In practice: headings at 700, UI labels at 500–600, body at 400.
- 300Light. Aa 0123Decorative marketing support copy only.
- 400Regular. Aa 0123Default body at 15–16 px.
- 500Medium. Aa 0123UI labels, ghost-button copy.
- 700Bold. Aa 0123Headings, buttons, emphasis.
- 900Black. Aa 0123Reserved for future display / billboard.
03.5
Tracking
Heading tracking tightens with size. Body stays at normal. Eyebrows open to 0.14em.
Headings
-0.02em
Occasionally -0.022 or -0.025 on largest display sizes.
Body
0
Never tracked. Reading performance over fashion.
Eyebrow
+0.14em
11px UPPERCASE. Slightly opened to 0.16em on covers.
03.6
Croatian diacritics
Latin Extended-A coverage verified on Fontshare specimen at all five weights.
č ć đ š ž · Č Ć Đ Š Ž
Werklist zapošljava lokalno i međunarodno. Čišća suradnja, jasnija pravila.
Verified people, verified companies. European cross-border staffing.
03.7
Rules
- 01
Only one weight per visual rank. differentiate by size, not weight.
- 02
Eyebrows always precede an H-level heading; they never stand alone.
- 03
No italics in UI copy. Italics reserved for legal disclaimers and quoted names.
- 04
All numbers use font-variant-numeric: tabular-nums.
- 05
Body line length caps at 65–75 characters. use max-w-[65ch] on prose containers.
- 06
Never disable font-feature-settings ss01, cv01, cv11.