diff --git a/publishing/typography.css b/publishing/typography.css index bff3652..ac5f978 100644 --- a/publishing/typography.css +++ b/publishing/typography.css @@ -32,10 +32,31 @@ body, letter-spacing: -0.01em; } -.md-typeset h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; } -.md-typeset h2 { font-size: 1.7rem; font-weight: 600; } -.md-typeset h3 { font-size: 1.25rem; font-weight: 600; } -.md-header__title { font-weight: 600; } +.md-typeset h1, +.md-typeset h2, +.md-typeset h3, +.md-typeset h4, +.md-header__title { + /* Never break a word mid-way; wrap at the space, and let the browser balance the + two lines rather than leaving one word on its own. */ + overflow-wrap: break-word; + word-break: normal; + hyphens: none; + text-wrap: balance; +} + +/* Fluid scale. Fixed rem sizes do not shrink on a phone -- Material keeps a 20px root + * even at 360px wide -- so a 2.6rem h1 stays 52px and "Cooperative" (297px at that + * size) runs out of room on anything narrower than ~370px and breaks mid-word. + * These track the viewport instead and land at the same desktop size. + */ +.md-typeset h1 { font-size: clamp(1.6rem, 1.5rem + 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; } +.md-typeset h2 { font-size: clamp(1.3rem, 1.1rem + 1.6vw, 1.7rem); font-weight: 600; } +.md-typeset h3 { font-size: clamp(1.1rem, 1rem + 0.7vw, 1.25rem); font-weight: 600; } +.md-header__title { font-size: clamp(0.85rem, 0.7rem + 0.8vw, 0.95rem); font-weight: 600; } + +/* Long prose stays readable; measured in characters rather than pixels. */ +.md-typeset { line-height: 1.65; } /* Colour is scheme-specific, so it stays out of the rules above. */ [data-md-color-scheme="default"] .md-typeset h1,