Optical balance

Medido sobre Mona Sans: centra letras por la altura de mayúsculas, alinea los encabezados grandes al borde del texto y cuelga las comillas de apertura.

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

Instalación

$ pnpm dlx shadcn@latest add @ssntl/optical

Uso

css

/* app/globals.css */
@import "../styles/ssntl/optical.css";

/* En tu JSX */
<h1 class="optical-edge text-headline">Buen trabajo</h1>
<blockquote class="hang-quote">“Hazlo simple, luego hazlo bien.”</blockquote>
<span class="text-trim">OS</span>

Reglas

Lo que este componente espera de ti, tal como se instala en styles/ssntl/optical.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

styles/ssntl/optical.md

## Reglas de Optical balance

- Valores medidos sobre Mona Sans, en em, así escalan con cualquier tamaño.
- **Alineación de letras.** Optical-edge recorre 0.04em los tamaños display, headline y title, el espacio lateral de las letras con que suelen empezar los encabezados.
- **Comillas colgantes.** Hang-quote sangra la primera línea −0.39em, el ancho de “ en peso 500, así las letras se alinean con el texto alrededor.
- **Rebase de glifos.** Text-trim recorta la caja de línea a la altura de mayúsculas y la línea base, así un badge o avatar centra las letras y no la caja. Las letras redondas igual rebasan cerca de 1%, por diseño.
- Heading de Typography aplica `optical-edge` por ti; Blockquote aplica `hang-quote`; Avatar aplica `text-trim`.

Abrir el archivo de reglas completo

Código

styles/ssntl/optical.css

/* 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;
}