Optical balance
Measured on Mona Sans: center letters by cap height, align big headings to the text edge and hang opening quotes.
optical-edge · letter alignment
Good work
Starts at the line
Without
Good work
Starts at the line
With
hang-quote · hanging marks
“Make it simple, then make it right.”
Without
“Make it simple, then make it right.”
With
Installation
$ pnpm dlx shadcn@latest add @ssntl/opticalUsage
/* app/globals.css */
@import "../styles/ssntl/optical.css";
/* In your JSX */
<h1 class="optical-edge text-headline">Good work</h1>
<blockquote class="hang-quote">“Make it simple, then make it right.”</blockquote>
<span class="text-trim">OS</span>Rules
What this component expects from you, as it ships in styles/ssntl/optical.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.
## Rules for Optical balance
- Values measured on Mona Sans, in em, so they scale with any size.
- **Letter alignment.** Optical-edge pulls display, headline and title sizes back 0.04em, the side bearing of the letters headings start with.
- **Hanging marks.** Hang-quote indents the first line −0.39em, the width of “ at weight 500, so the letters line up with the text around it.
- **Glyph overshoot.** Text-trim trims the line box to cap height and baseline, so a badge or avatar centers the letters, not the box. Round letters still overshoot about 1%, by design.
- Heading in Typography applies `optical-edge` for you; Blockquote applies `hang-quote`; Avatar applies `text-trim`.Code
/* Optical balance: what looks right beats what measures right. The values
below were measured on Mona Sans, the system's typeface, so they are
proportions of the font (em), never fixed pixels, and scale with any size.
text-trim centers text by its cap height, not its line box
optical-edge pulls a large heading back to the text edge
hang-quote hangs an opening quote mark outside the text block
Icon area and case scale are handled by components: Avatar (a square is
drawn smaller than a circle) and Eyebrow (uppercase one step smaller). */
/* Glyph overshoot: round letters (O, S, G) rise about 1% above the flat
ones, so the line box is taller than the letters. Trimming it to the cap
height and the baseline lets a pill, a badge or an avatar center the
letters themselves. Browsers without text-box keep the normal box. */
@utility text-trim {
text-box: trim-both cap alphabetic;
}
/* Letter alignment: every glyph carries side bearing, about 0.04em on the
letters headings start with in Mona Sans (H 0.079, G 0.043, T 0.025), so
a big heading looks indented next to the body text. Use on display,
headline and title sizes; at body sizes the bearing is under a pixel. */
@utility optical-edge {
margin-inline-start: -0.04em;
}
/* Hanging marks: the opening quote is 0.39em wide in Mona Sans at weight
500, so a negative first-line indent of the same width puts it outside
the block and the letters line up with the text around it. */
@utility hang-quote {
text-indent: -0.39em;
}