Typography system: brand typeface, a real type scale, clear hierarchy between UI chrome and content

Part of PAR-357.

✅ Decision (Rían, 2026-10-17)

• Match the landing's type.
• Linear-dense: 36px rows and 13px UI text are the default.

Finding: the landing has no webfont. landing/styles.css uses font-family: Arial, Helvetica, sans-serif with tight negative tracking, so it renders as Helvetica on macOS and Arial on Windows. The "landing look" is a neo-grotesk.

So: choose one Helvetica-style webfont and load it on both landing/ and ui/ (self-hosted, through next/font/local in the app):

• Licensed options: Neue Haas Unica, Helvetica Now
• Free options: Inter Tight, Hanken Grotesk, Schibsted Grotesk, Instrument Sans

Use it for display and UI, with the ss/cv features that bring it closer to Helvetica. Pair it with a mono (Geist Mono / JetBrains Mono) for refs and code. Shortlist 2–3 in PAR-400 and pick there.

Measured on app.taskl.ie (1440px, CSS px)

The first version of this task overstated row density from screenshots taken at about 1.4× scale. Rows are actually 40px with 14px titles.

Font: the system stack only (-apple-system, system-ui, Segoe UI, Roboto…), so every OS renders a different product. geist is installed but unused.

Sizes in use across just two pages: 8, 12, 12.5, 13.2, 14, 15, 16 and 26px.

• 8px/600: avatar initials and ⌘ K kbd. Illegible.
• 12.5px: palette sublabels.
• 13.2px: inline code.
• --text-2xs and --text-xs are both 12px (ui/styles/_theme.scss:24-27).

Hierarchy problems:

• The sidebar is louder than the content. Nav is 15px/500; issue titles are 14px/500; meta is 12px.
• Big jumps with nothing in between. H1 26px/600, then 16px, then 14px. There's no 18–20px level.
• Authored content outweighs the UI. Markdown H2 in descriptions is 16px/700; page sections ("Discussion", "Activity") are 16px/600. Same size, user content heavier, both <h2>.
• Body size changes per page: description prose 15px/22px, the rest of the app 14px.
• Loose line-height on small text: 12px text on a 22px line box (1.83).
• Scattered weights: 400/500/600/700.
• No tabular numerals for refs and counts, so PAR-10 and PAR-107 misalign.
• Labels compete with titles: label text is the same primary colour as issue titles.

Do

1. Load the chosen typeface (above) in both apps; enable tnum for refs, counts and dates.
2. Scale: 11 / 12 / 13 / 14 / 16 / 20 / 24 / 32, with line-heights 16/16/18/20/22/28/32/40, and negative tracking at 20px and above (as on the landing hero).
3. Roles:
   • display (onboarding, empty states, marketing-style moments)
   • title (page H1 20–24px/600)
   • heading (section 13–14px/600)
   • body (14/20)
   • ui (13/18), the default for rows, menus, pills and nav
   • meta (12/16, tertiary)
   • micro (11/16 for kbd and counts; never below 11px)
4. Separate content from chrome: a scoped .prose heading scale (H1 20, H2 17, H3 15), quieter than page chrome, with markdown headings demoted in the outline.
5. Weights: only 400, 500 and 600.
6. Contrast tiers: primary for titles, secondary for labels and body meta, tertiary for IDs and timestamps.
7. A Storybook Typography page, plus a stylelint rule banning raw font-size.

Acceptance

• At most 8 font sizes app-wide, nothing below 11px, all from tokens.
• Landing and app render in the same typeface on every OS.
• Sidebar nav is quieter than content.
• Description headings sit below page headings.
• At least 15 issue rows are visible above the fold at 1440×900.