Typography
Heading, body, nav and caption font families plus sizes for every level.
Updated 2026-05-09
Theme settings → Typography.
Four font roles
Dost uses four independent font picks so you can mix a serif heading with a sans body without changing anything else.
| Role | Used for |
|---|---|
| Heading | All h1–h6 (product titles, section headings, hero text) |
| Body | Paragraphs, descriptions, prices, buttons |
| Nav | Header menu items, breadcrumbs, footer links |
| Caption | Labels, badges, eyebrows, meta text |
Each role uses Shopify's font picker — you can pick any font from Shopify's library or upload a custom font (Settings → Files in Shopify admin, then point a font_picker to it via custom code if needed).
Performance note: Heading and body fonts are preloaded with
font-display: optional(won't cause layout shift on slow networks). Nav and caption fonts usefont-display: swapsince they're below the fold.
Font sizes
Each text level has its own pixel size:
| Setting | Default | Used for |
|---|---|---|
font_size_h1 | 35px | Section headings, page titles |
font_size_h2 | 52px | Editorial heroes, big section heads |
font_size_h3 | 32px | Sub-headings |
font_size_h4 | 22px | Card titles, accordion triggers |
font_size_h5 | 18px | Small headings |
font_size_h6 | 14px | Tiny headings |
font_size_logo | 24px | Text logo if no logo image is set |
font_size_md | 16px | Body text |
font_size_sm | 13px | Small body, secondary descriptions |
font_size_caption | 13px | Image captions, footnotes |
font_size_label | 10px | UPPERCASE labels, badges, breadcrumbs |
font_size_button | 12px | Buttons |
font_size_nav | 12px | Header / footer navigation |
font_size_drawer_title | 20px | Cart drawer header |
Many sections expose their own size multiplier (e.g., Hero heading size: small / medium / large). Those multiply the global sizes above. Dost intentionally avoids per-section pixel inputs to keep type rhythm consistent.
Letter-spacing
Theme settings → Typography → Letter-spacing:
- Nav (default
150→0.150em) - Label (default
100→0.100em) - Button (default
120→0.120em)
The numeric value is in 1000ths of an em. 120 = 0.12em.
Uppercase toggles
Three independent switches:
- Uppercase nav
- Uppercase label
- Uppercase button
Turn them off if you prefer sentence-case across the theme.
Font preview tips
After picking a font, open a product page in preview — heading and body interact with each other in product titles, descriptions, and price blocks. The combo that looks great on the homepage may feel cramped on PDP. Always preview both.
