Menu

tidy-typography.css is a reset that only touches the text
📰

tidy-typography.css is a reset that only touches the text

DEV Community: css·Leo·3 days ago
#dgNxa9xQ
#devtocss#devto#dev#font#robson
Reading 0:00
15s threshold

You drop a heading into a 300px sidebar. Your fluid type scale runs on vw , so the heading sizes itself for the whole window. It comes out huge. It wraps onto four lines, and the last line is one word. Then the webfont arrives and the block jumps again.

Three bugs. All typography. None of them is fixed by the margin-and-box-sizing reset you already ship.

Stu Robson's new CSS-Tricks article goes after exactly that layer. He has collected the useful modern type declarations into one default stylesheet, tidy-typography.css, covering rendering and fallback rules, fluid sizing, vertical rhythm, wrapping, hyphenation and OpenType detail. Take the whole file or take the one declaration that fixes today's irritation. He is upfront that some of it is experimental and that support is uneven, so it needs guardrails rather than blind inclusion.

Size against the column

Robson's point is simple: viewport-based fluid type has no idea how wide its element is.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.