Typography

Tomoda uses Inter exclusively. Inter is a neutral, highly-legible sans-serif designed for UI; its calm, even rhythm keeps the focus on user-generated content while letting the brand's display sizes carry editorial weight.

The single typeface

Loaded once in frontend/app/_layout.tsx via @expo-google-fonts/inter:

const [_fontsLoaded] = useFonts({
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_800ExtraBold,
});

Use the font-family string directly in styles (fontFamily: 'Inter_600SemiBold'). The MkDocs site itself also renders body text in Inter so this page is faithful to product feel.

The scale

We don't have a long heading scale. Five named roles cover every product surface today — display for editorial moments, headline for section starts, body for content, label for metadata, mono only inside developer-facing UI.

display-lg — 48 / 56, weight 700, letter-spacing -0.02em Friends are nearby tonight

display-md — 36 / 44, weight 700, letter-spacing -0.015em Friends are nearby tonight

headline-lg — 28 / 36, weight 600, letter-spacing -0.01em This week's events

headline-md — 22 / 30, weight 600 This week's events

body-lg — 17 / 26, weight 400 (user content) Reserved for user-generated content — chat messages, event descriptions, profile bios. The larger size signals "this is content, not chrome."

body-md — 15 / 22, weight 400 (default) The workhorse. Most product copy lives here — list item titles, helper text, button labels in dense contexts.

label-md — 13 / 18, weight 500, uppercase, letter-spacing +0.05em UPCOMING · 8:30 PM

label-sm — 11 / 14, weight 500, uppercase, letter-spacing +0.06em 3 GOING · 1 INVITED

How to pick a role

Use	Role
App-shell heroes, landing splashes	display-lg or display-md
Tab headers, section titles	headline-lg
Card titles, modal headers	headline-md
Chat messages, event descriptions, bios	body-lg
List items, helpers, button labels	body-md
Time, status pills, category tags	label-md / label-sm

Letter-spacing rules

Letter-spacing is half the design. Three principles:

1. Display tightens (-0.015em to -0.02em) — large type reads as airy by default; tightening makes it feel intentional and editorial.
2. Body sits at default — Inter is already designed for body sizes; don't fight it.
3. Labels open up (+0.05em to +0.06em) — uppercase + open tracking signals "this is metadata, not content" and prevents short label sequences from looking cramped.

What to avoid

• Italic. Inter Italic exists but we don't use it. Tomoda's voice is direct — italics read as performative emphasis or quotation, both of which we accomplish with structure instead.
• Underline for emphasis. Underline means "link." If you want emphasis, switch to font-weight: 600 (medium → semibold).
• All-caps body. Reserved for label-*. Body in all-caps reads as shouting.
• Hairline weights (300 or below). Inter has a thin weight; we don't ship it. Below 400, the typeface loses legibility on mobile retina at body sizes.

Adding a role

Almost never necessary. If you genuinely need a new size (e.g. a marketing-only display), discuss before adding — every new role is a vocabulary expansion the whole team has to track. Prefer adjusting an existing role's usage over inventing a new one.

When you do add one:

1. Add the role to the in-app theme (no static "type scale" file today — makeStyles(theme) factories declare sizes inline).
2. Add a sample to this page in the same PR.
3. If it's a marketing-only role, name it accordingly (e.g. marketing-hero) so it's never reached for in product surfaces by mistake.