Two controls at Appearance → Customize → Design → Typography.
Heading font
| Field | Default | |
|---|---|---|
| Face | System default | Or a built-in stack or an installed family |
| Weight | Default — 600 | 300 Light through 700 Bold |
| Case | Default — as typed | None, UPPERCASE, lowercase, Capitalize |
| Letter spacing | 0 | |
| Line height | 1.25 |
There is deliberately no size field here: h1 to h6 are sized individually, by the control below.
Case
Headings render as typed out of the box. If your site was created before version 1.3.1 it will have UPPERCASE written into this box — that was the old default, and it was preserved on update rather than changed under you. Clear it to None — as typed to take the current look.
Note that Default and None — as typed are different answers: Default inherits, and None is the deliberate instruction to leave the text alone.
What follows this role
More than you might expect, and it is the reason changing one dropdown restyles the site:
- Every
h1–h6in your content - Widget titles
- Blockquotes — case, weight and tracking
- The menu, unless you set its own face
- The site title — always
- Listing post titles and the single post title, unless set otherwise
- The meta line, face only
Heading sizes
Nine boxes: h2, h3 and h4, each with a desktop, tablet and mobile size.
Any unit works — 2rem, 32px, 1.8em. Leave a box empty for the theme default at that width, which is what every box starts as. The hints in the boxes show the size the theme is already drawing.
h1 is not offered: in this theme an h1 is the post or page title, which has its own role under Design → Single post. h5 and h6 are rare enough that nine more boxes would be clutter — style them with custom CSS if you need to.
A sensible scale
Headings should step down clearly enough that a reader can see the structure without reading the words. A ratio of about 1.25 between levels works:
| Desktop | Mobile | |
|---|---|---|
| h2 | 2rem | 1.6rem |
| h3 | 1.6rem | 1.35rem |
| h4 | 1.28rem | 1.15rem |
Fill in the mobile boxes if your desktop headings are large. A 2.5rem h2 on a 375px screen takes three lines.