type-specimen

Typography specimen web component with character grid, weight scale, type scale, and editable sample text.

Overview

The <type-specimen> component displays a font specimen for exploring typefaces. It renders an editable sample, a character grid, a weight scale, and the VB 9-step type scale.

<type-specimen font-family="Georgia" label="Georgia" show-characters show-weights> </type-specimen>

Attributes

Attribute Type Default Description
font-family string system-ui CSS font-family value.
label string Derived from font-family Display name for the font.
sample string The quick brown fox… Custom sample text.
show-scale boolean — Show VB type scale (xs–5xl).
show-weights boolean — Show weight scale with “Aa” samples.
show-characters boolean — Show uppercase, lowercase, digit, and punctuation grids.
weights string 300,400,500,600,700 Comma-separated font weights to display in the weight scale.

Features

Character Grid

Shows uppercase, lowercase, digits, and punctuation in the specified font.

Weight Scale

Renders “Aa” at each specified weight for quick comparison.

VB Type Scale

Displays the 9-step VB type scale from xs to 5xl.

<type-specimen font-family="system-ui" label="System UI" show-scale> </type-specimen>

Editable Sample

The large sample text is contenteditable — click it and type your own text to preview the font.

Full Specimen

Enable all features at once for a comprehensive view.

<type-specimen font-family="system-ui" label="System UI" show-characters show-weights show-scale weights="300,400,500,600,700"> </type-specimen>

Custom Sample Text

<type-specimen font-family="'Courier New', monospace" label="Courier New" sample="Pack my box with five dozen liquor jugs" show-characters weights="400,700"> </type-specimen>

Accessibility

  • The sample text uses contenteditable="plaintext-only" with spellcheck="false" to avoid intrusive browser features.
  • All sections use semantic markup for screen reader navigation.

Related