Typography
Fonts, text size and the heading scale.
Open Theme settings → Typography. Caffenza uses four fonts. By default these are Fraunces for headings and Instrument Sans for body text.
| Font | Where it is used |
|---|---|
| Body | Paragraphs, buttons, forms and most interface text. |
| Subheading | Section subheadings, badges, menu column titles and small labels. |
| Heading | All headings H1–H6. |
| Accent | Italic words in headings and text, captions, blog bylines and small details. |
All fonts come from the Shopify font library, so they load fast and need no license.
Tip
Change Paragraph size to make all text bigger or smaller. Everything scales from it, so the design stays in proportion.
Screenshots
Typography
| Setting | Options | What it does |
|---|---|---|
| Fonts | ||
| Body | Font | |
| Subheading | Font | Used for section subheadings, and for small labels such as badges, menu column titles and search tabs. Changing the Body font doesn't change it. |
| Heading | Font | |
| Accent | Font | Used for italicized words in headings and text, and for captions, blog bylines and small details such as the video timer. Changing the Heading font doesn't change it. |
| Text presets | ||
| Paragraph size | 14–20 px | Sets the base body size. All other text sizes scale from it, so the whole theme stays in proportion. |
| Line height | Tight (1.0) · Snug (1.15) · Normal (1.3) · Relaxed (1.5) · Loose (1.75) · Extra loose (2.0) | |
| Letter spacing | Tighter (-0.05em) · Tight (-0.03em) · Snug (-0.02em) · Slight (-0.01em) · Normal (0em) · Wide (0.03em) · Wider (0.05em) · Widest (0.1em) | |
| Headings | ||
| Case | None · Uppercase | Applies to every heading level. Uppercase reads best with normal or wide letter spacing. |
| Heading 1 (H1) | ||
| Font size | 52–80 px | The size on desktop. Headings scale down smoothly on smaller screens. |
| Line height | Tight (1.0) · Snug (1.15) · Normal (1.3) · Relaxed (1.5) · Loose (1.75) · Extra loose (2.0) | |
| Letter spacing | Tighter (-0.05em) · Tight (-0.03em) · Snug (-0.02em) · Slight (-0.01em) · Normal (0em) · Wide (0.03em) · Wider (0.05em) · Widest (0.1em) | |
| Heading 2 (H2) | ||
| Font size | 38–50 px | |
| Line height | Tight (1.0) · Snug (1.15) · Normal (1.3) · Relaxed (1.5) · Loose (1.75) · Extra loose (2.0) | |
| Letter spacing | Tighter (-0.05em) · Tight (-0.03em) · Snug (-0.02em) · Slight (-0.01em) · Normal (0em) · Wide (0.03em) · Wider (0.05em) · Widest (0.1em) | |
| Heading 3 (H3) | ||
| Font size | 29–36 px | |
| Line height | Tight (1.0) · Snug (1.15) · Normal (1.3) · Relaxed (1.5) · Loose (1.75) · Extra loose (2.0) | |
| Letter spacing | Tighter (-0.05em) · Tight (-0.03em) · Snug (-0.02em) · Slight (-0.01em) · Normal (0em) · Wide (0.03em) · Wider (0.05em) · Widest (0.1em) | |
| Heading 4 (H4) | ||
| Font size | 23–28 px | |
| Line height | Tight (1.0) · Snug (1.15) · Normal (1.3) · Relaxed (1.5) · Loose (1.75) · Extra loose (2.0) | |
| Letter spacing | Tighter (-0.05em) · Tight (-0.03em) · Snug (-0.02em) · Slight (-0.01em) · Normal (0em) · Wide (0.03em) · Wider (0.05em) · Widest (0.1em) | |
| Heading 5 (H5) | ||
| Font size | 19–22 px | |
| Line height | Tight (1.0) · Snug (1.15) · Normal (1.3) · Relaxed (1.5) · Loose (1.75) · Extra loose (2.0) | |
| Letter spacing | Tighter (-0.05em) · Tight (-0.03em) · Snug (-0.02em) · Slight (-0.01em) · Normal (0em) · Wide (0.03em) · Wider (0.05em) · Widest (0.1em) | |
| Heading 6 (H6) | ||
| Font size | 14–18 px | |
| Line height | Tight (1.0) · Snug (1.15) · Normal (1.3) · Relaxed (1.5) · Loose (1.75) · Extra loose (2.0) | |
| Letter spacing | Tighter (-0.05em) · Tight (-0.03em) · Snug (-0.02em) · Slight (-0.01em) · Normal (0em) · Wide (0.03em) · Wider (0.05em) · Widest (0.1em) | |