Typography · Design Engineer from Hamburg, Germany

Philosophy

Two typefaces. One tension. Boska Variable (Barbara Bigosińska, Fontshare / ITF) is a high-contrast Didone with calligraphic ink traps that evoke the pressure variation of a sumi-e brush. Switzer Variable (Jérémie Hornus, ITF / Fontshare) is a neo-grotesque descended from the Swiss International Style. Together they form the same dialogue that runs through the entire identity: the expressive and the rational, the Eastern and the Western, the felt and the measured.

Type Scale

All sizes are fluid — clamp() with vw units, capped at spec maximum. Every token maps to a CSS variable.

text-9H1 Page Title144px · lh 0.95 · tr −25%

The space between

text-8Blog Title96px · lh 1.0 · tr −15%

The space between

text-7H2 Section72px · lh 1.1 · tr −10%

The space between

text-6H3 Section48px · lh 1.15 · tr −5%

The space between

text-5H2 Blog / Subtitle40px · lh 1.15 · tr −5%

The space between

text-4H3 Blog28px · lh 1.2 · tr −2%

The space between

text-3Paragraph18px · lh 1.55 · tr −2%

The space between

text-2Caption / Footnote14px · lh 1.4 · tr 0

The space between

text-codeCode15px · lh 1.625 · tr 0

The space between

Token	Role	Max	Line Height	Tracking
text-9	H1 Page Title (Boska)	144px	0.95	−25%
text-8	Blog Title (Boska)	96px	1.0	−15%
text-7	H2 Section (Switzer)	72px	1.1	−10%
text-6	H3 Section (Switzer)	48px	1.15	−5%
text-5	H2 Blog / Subtitle	40px	1.15	−5%
text-4	H3 Blog (Switzer)	28px	1.2	−2%
text-3	Paragraph (Switzer)	18px	1.55	−2%
text-2	Caption / Footnote	14px	1.4	0
text-code	Code (Fira Code)	15px	1.625	0

Boska — Display

Boska carries the emotional register of the brand. Its extreme stroke contrast — thick stems meeting near-invisible hairlines — mirrors the visual logic of Japanese calligraphy. Reserved exclusively for H0 and H1 display headings. Never in body copy.

Ma — Display

text-9H1 Page Title144px maxlh 0.95tr −25%

The space between.

text-8Blog Title96px maxlh 1.0tr −15%

Switzer — Body & UI

Switzer holds the system together. Where Boska performs, Switzer organises. Its clean geometry and even stroke weight provide the structural grid: nothing decorative, nothing superfluous.

Typography

text-7H2 Section72px maxlh 1.1tr −10%

The typographic system is built on contrast as a principle, not as an accident. Display type is set in Boska Bold at extreme sizes — type as image.

text-3Paragraph18px maxlh 1.55tr −2%

Italic — Boska vs Switzer

Boska’s italic is a true cursive with swash characters. Reserve it for emphasis within display headings. Switzer Italic is a slanted roman for body and UI emphasis.

The space between things is the substance of design.

Boska ItalicTrue cursive · swash characters · display only

The space between things is the substance of design.

Switzer ItalicSlanted roman · body & UI emphasis

Rule: Boska Italic only at display scale (text-7 and above). Never in body copy.

Japanese Stack

Japanese text uses a dedicated Mincho stack that echoes Boska’s calligraphic DNA. Always mark with lang="ja".

間

MaThe space between

静寂の中に美しさがある

Seijaku no naka ni utsukushisa ga aruBeauty dwells within tranquility

墨と和紙

Sumi to washiInk and Japanese paper

不均齊の調和

Fukinsei no chōwaThe harmony of asymmetry

--font-japaneseToppan Bunkyu Midashi Mincho · YuMincho · Hiragino Mincho ProN · Noto Serif JP

Font Stacks

--font-display: "BoskaVariable", Georgia, "Times New Roman", serif;
--font-sans: "SwitzerVariable", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-mono: "Fira Code", Operator, Hasklig, Monoid, monospace;
--font-japanese: "Toppan Bunkyu Midashi Mincho", "YuMincho", "Hiragino Mincho ProN",
  "Hiragino Mincho Pro", "BIZ UDPMincho", "MS PMincho", "Noto Serif JP", serif;

Rules

Boska only for H0 and H1. Never in body copy, UI, or components.
Display type: aggressive negative tracking (−15% to −50%). Type as image.
Body text: −2% tracking, 18px max, 65–75 characters per line maximum.
Captions and labels: Switzer, uppercase. A nod to Swiss labelling conventions.
Sentence case for all headings. ALL CAPS only for captions and meta labels.
Japanese text must use --font-japanese and be marked with lang="ja".