jakubkrehel / skills

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.

View source Typography Visual Accessibility

Install

npx skills add https://github.com/jakubkrehel/skills --skill better-typography

Spacing and sizing

Units, a starting type scale, the heading mapping, line-height for wrapping text and text trimming.

Units

Unit	Behavior
`px`	Fixed
`em`	Scales with the current font size
`rem`	Scales with the root font size
`%` on `font-size`	Relative to the parent's font size, behaves like `em`

Type scale

Pick an existing scale or define one. Tailwind's text-xs through text-9xl, each pairing a size with a line height, is a solid ready-made choice.

A starting point for a product interface, named by role:

Role	Size	Line-height	Weight
Display	`2.25rem` (36px)	`1.1`	`600`
Title	`1.5rem` (24px)	`1.2`	`600`
Heading	`1.125rem` (18px)	`1.3`	`600`
Body	`1rem` (16px)	`1.5`	`400`
Caption	`0.8125rem` (13px)	`1.4`	`400`

Emphasis within a role is one weight step up (400 → 500), not a size change.

Heading hierarchy

In Tailwind, centralize the per-level classes in a component or @layer base rather than repeating them inline.

Line-height for wrapping text

Text trimming with text-box

text-box takes which edges to trim (trim-both, trim-start, trim-end) and where. Name both edges, start then end. cap, ex and alphabetic need a second edge value, so trim-start cap is dropped and trim-start cap text is not.

Keyword	Trims at
`cap`	The cap height (top)
`alphabetic`	The baseline (bottom)
`text`	The font's own text edge, keeping room for descenders

css

/* trim top and bottom */.badge {  text-box: trim-both cap alphabetic;}
/* trim only the top */.heading {  text-box: trim-start cap text;}
/* trim only the bottom */.label {  text-box: trim-end text alphabetic;}

Supported in Chromium 133+ and Safari 18.2+, not yet Firefox. Unsupported browsers keep the default leading.

Design engineering

Frameworks & libraries