Typography
The WHA typeface, font-size scale and responsive breakpoints.
Typeface
The site uses Gentona (sans-serif) for everything, available as the Tailwind font-base family. There's no separate heading face; hierarchy comes from size and weight, not a second typeface.
Size scale
Font sizes are defined in theme.json and exposed both to the WordPress editor and to Tailwind (as text-{slug}). Use these tokens rather than arbitrary pixel values.
| Token | Size | Pixels | Typical use |
|---|---|---|---|
small | 0.875rem | 14px | Fine print, captions, metadata |
regular | 1rem | 16px | Body text — the base size |
large | 1.125rem | 18px | Lead paragraphs and emphasized body |
xl | 1.25rem | 20px | Small headings and large UI labels |
xxl | 1.5rem | 24px | Sub-section headings |
xxxl | 1.875rem | 30px | Section and page headings |
16px is the base body size. Don't set body copy smaller than regular, and keep small for genuinely secondary text. Readability matters for an older patient audience.
Breakpoints
Layout responds at these widths, from the theme's Tailwind config:
| Breakpoint | Width | Notes |
|---|---|---|
xs | 480px | Large phones |
sm | 600px | Small tablets |
md | 782px | Tablets, the WordPress admin breakpoint |
lg | 960px | Content width (contentSize) |
xl | 1280px | Wide width (wideSize) |
The content column maxes out at 960px, and full-width sections extend to 1280px.