better-typography
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
Install
npx skills add https://github.com/jakubkrehel/skills --skill better-typographyWrapping and punctuation
Line length, typographic characters and mixed-direction text.
Measure (line length)
Any unit works. 65ch measures characters directly, one ch being the width of the 0 in the current font, and a pixel or rem cap is just as good. At a 16px body size the 60–75 character range lands roughly between 560px and 680px depending on the font. Tailwind's max-w-xl (576px), max-w-2xl (672px) and max-w-prose (65ch) all fit. Recheck the cap if the body font size changes.
Smart punctuation
Internationalization
- Long paragraphs align by their own language. A one- or two-line snippet follows the surrounding UI's direction. A paragraph of three or more lines aligns to its own script instead, so an English paragraph stays start-aligned LTR even inside an RTL interface.
text-align: startwith the correctlanganddiron the paragraph element handles this. - Digits keep their order. A phone number or "541" reads identically in RTL, because the Unicode bidi algorithm keeps digit runs left to right.
<bdi>repairs a value whose order adjacent RTL text disturbs.