Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Basic specimen
<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 scale only
<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.
Full specimen
<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
Custom sample
<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>Editable Mode
Add the editable attribute to turn the font label into a live input with quick-pick chips. Changes write to a CSS custom property (default: --font-family-base) on the target selector (default: :root), so any element using that token updates immediately.
Live font editing
<type-specimen font-family="Georgia" editable show-characters show-weights></type-specimen>Restrict overrides to a scoped subtree by pointing target at any selector:
Scoped target
<div id="preview-scope"> <h2>Preview</h2> <p>Edits only affect this block.</p></div> <type-specimen font-family="Georgia" editable target="#preview-scope" token="font-family-base" show-scale></type-specimen>Listen for type-specimen:change events to collect the edits elsewhere:
Collecting edits
document.querySelector('type-specimen') .addEventListener('type-specimen:change', (e) => { console.log(e.detail); // { fontFamily: "Inter, sans-serif", token: "font-family-base", target: ":root" } });Accessibility
- The sample text uses
contenteditable="plaintext-only"withspellcheck="false"to avoid intrusive browser features. - All sections use semantic markup for screen reader navigation.
Related
- Fluid Scaling — the VB type scale system
- Tools — Type Explorer font pairing tool (planned)