Micka Design open-sources a typography guide with five styles and three weights

• Five styles, three weights, two text colors and Inter Variable 4.0 define the typography system, according to the five-rule breakdown.
• Uppercase, custom letter-spacing, eyebrow headings and faded text are excluded in the five no-gos; Markdown uses the same styles as the interface.
• The rules carry across two themes, Default and Compact sizing, desktop and mobile, global CSS and Prose, as the release thread specifies.

The cheat sheet pairs font weights with optical sizes to keep selected labels from changing width, and trims labels so their visible padding matches the CSS. An installable coding-agent skill sits alongside the open-source components.

Micka Design arrived at what he calls “Just simple rules” by cutting and refactoring the typography behind his component library, Fluid Functionalism.

He gives the library five constraints:

1. Five styles, covering page titles through captions.
2. Three weights: regular for text, semibold for headings and selected items, bold for page titles.
3. Two text colors: foreground and muted, per theme.
4. One font family: Inter Variable 4.0.
5. One paragraph style.

Hierarchy comes from size and weight, with five treatments explicitly ruled out:

1. No uppercase for establishing hierarchy.
2. No custom letter-spacing: Inter’s optical sizing handles it.
3. No eyebrows: sections begin with their titles, without a small introductory label above them.
4. No separate Markdown styling: it shares the interface’s styles and colors.
5. No text opacity: text is foreground or muted, without additional faded variants.

Inter’s official font page describes separate text and display optical designs. Micka also linked to a video about Inter 4.0, a 2024 review of the font update.

He adds five implementation tweaks:

1. Weight without reflow: the nicest trick here pairs each weight with its own optical size, keeping semibold labels from changing width.
2. Steady numbers: tabular-nums gives changing digits equal widths, keeping following text still.
3. Trimmed labels: text-box: trim-both cap alphabetic makes visible label padding match the specified spacing.
4. Balanced headings: text-wrap: balance evens out heading lines.
5. Pretty paragraphs: text-wrap: pretty reduces lone-word final lines.

In a separate exchange mentioning Linear, Micka singled out “The copy URL 👀”.

Micka says the same rules work across:

• Two themes.
• Default and Compact sizes.
• Desktop and mobile, with the same typography.
• Global CSS and Prose.

The published scale sets display text at 28px, with a 34px line height, 700 weight and optical size 25. Spacing between body blocks drops from 12px in Default to 8px in Compact; gaps between list items stay at 4px.

Markdown includes to-dos and tables within the shared five-style system. The page also demonstrates heading, list, to-do and quote syntax.

Components are available through the shadcn registry in the MIT-licensed repository; the typography page also supplies an agent-skill command:

Asked about a more branded look, Micka said he would swap only the display font for a branded semibold or bold face, leaving the other styles untouched.