Used for brand moments, page titles, and section headings.
02 Typography
Typography system
Mealchemy uses two Google Fonts: Newsreader for expressive headings and Plus Jakarta Sans for clear interface text. The type scale stays compact, readable, and consistent across the product.
Used for body copy, forms, buttons, navigation, and labels.
Newsreader falls back to Georgia/serif. Plus Jakarta Sans falls back to Arial/system sans.
Hero wordmark sample
Mealchemy
Newsreader, 40px, weight 900. Used for the splash and brand moments.
Font Families
Typefaces
Each font has a clear role. Serif type is reserved for prominent moments; sans type handles repeated UI reading.
Used for display, page titles, and section headings.
Used for body copy, buttons, labels, forms, and navigation.
Used only if Plus Jakarta Sans is unavailable.
Reserved for static logo exports, not live app UI text.
Named Scale
Token examples
These cards show each named type token, size, weight, line height, and letter spacing.
Mealchemy
Brand wordmark and splash hero.
Welcome back
Page titles and dashboard greeting.
Recommended
Section titles and modal headings.
Roasted tomato pasta
Card titles and list item names.
Descriptions, forms, and readable paragraphs.
Primary content and form text.
Emphasised inline body copy.
Bold emphasis inside body paragraphs and list items.
35 min · pantry friendly
Secondary body text and inline metadata.
Updated just now
Timestamps and fine-print captions.
Save recipe
Action labels inside elevated buttons.
HIGH PROTEIN
Navigation labels, tags, and eyebrows.
Type Scale
Hierarchy mapping
The app implements these through the tokens below.
| Hierarchy | App token | Font | Size | Weight | Letter spacing | Line height | Use |
|---|---|---|---|---|---|---|---|
| display | display | Newsreader | 40px | 900 | 0 | default | Brand wordmark and splash hero |
| h1 | heading1 | Newsreader | 32px | 800 | 0 | default | Page titles and dashboard greeting |
| h2 | heading2 | Newsreader | 24px | 600 | 0 | default | Section titles and modal headings |
| h3 | title | Plus Jakarta Sans | 18px | 600 | 0 | default | Card titles and list item names |
| h4 | bodyBold | Plus Jakarta Sans | 14px | 700 | 0 | 1.5 | Small headings, emphasis, and inline labels |
| body | body | Plus Jakarta Sans | 14px | 400 | 0 | 1.5 | Primary content and form text |
| body small | bodySmall | Plus Jakarta Sans | 14px | 400 | 0 | default | Secondary body text and inline metadata |
| caption | caption | Plus Jakarta Sans | 11px | 400 | 0 | 1.4 | Timestamps and fine-print captions |
| button | button | Plus Jakarta Sans | 16px | 600 | 0.3 | default | Button labels |
| label | label | Plus Jakarta Sans | 10px | 700 | 0.5 | default | Navigation labels, tags, and eyebrows |
The hierarchy covers display text, page headings, section headings, card titles, body copy, captions, labels, and buttons.
Type Roles
Hierarchy in context
The example below shows the scale working together in one instance.
9:41
Mealchemy
Mealchemy
DINNER PLAN
Welcome back
Build a simple meal from what is already in your kitchen.
RECOMMENDED
Roasted tomato pasta
35 min · pantry friendly · vegetarian
Good match: uses tomatoes, pasta, garlic, and basil.
Updated just now