How it works
// 01 DPI and pixel density
Fonts are loaded through the standard CSS `@font-face` mechanism, subset to the Latin range to keep the payload under 40 kilobytes. Before drawing the specimen, the widget waits on `document.fonts.ready` so the first paint uses the real face instead of the fallback. Missing that promise is the most common cause of layout shift in type-heavy pages.
// 02 Bleed and cut tolerance
The live type area is a contenteditable div with controlled styling. Font size, line height, letter spacing, and italic state are applied as inline styles derived from the control panel values, which means every change is a style recomputation on a single element instead of a full re-render. That keeps the input feel immediate even when the sample string is a full paragraph.
// 03 Safe zone and trim accuracy
The glyph grid iterates the Latin Extended-A unicode range and renders each code point as a grid cell. Missing glyphs render as the browser's fallback (often a tofu square), which is the exact signal you want when you are auditing a face for a production ship. Hovering any glyph shows the character name and unicode code point.
// why this exists
typographic control
A type specimen is the page a type designer shows you so you can judge whether their font belongs in your project. Before committing to a face for a site, a logo, or a report template, you want to see it at display size, at body size, with real words, at different weights and in italic, against the colors you plan to pair it with. This widget is that page, interactive, pinned to the face I use most: DM Serif Display.
DM Serif Display is a high-contrast transitional serif with sharp brackets and a strong vertical axis. It is a display face (designed for large sizes, not body copy) with a calm personality at rest and real drama when set large in italic. The face is free, open source, and available through Google Fonts. This widget lets you type any string, pick a size, toggle italic, and tune line height to see how the face behaves under your actual constraints.
Live type specimens matter because static specimens lie. A font that looks beautiful in a 72-point headline on a designer's portfolio can collapse into mud at 24 points on a product page. The only way to know whether a face fits your use case is to see your words, your copy length, your line breaks, in the face you are considering. Paste a real headline into this widget. Adjust the size until it stops working. That breakpoint is where you learn the face's limits.
The widget also renders a full glyph grid so you can confirm the face has the characters you need. Ampersands, hash marks, slashed zeros, smart quotes, em dashes, currency symbols. Some open-source faces skip less common glyphs and you will only notice when a product page shows a tofu square where the trademark symbol belonged. A single glance at the grid catches it before you ship.
Copy the exact CSS rule (font family, weight, size, line height, letter spacing) with one click. Paste it into your stylesheet and the type you just tuned is the type that will render in production.
Frequently asked questions
What is DM Serif Display?
A free, high-contrast transitional serif designed by Colophon Foundry, available through Google Fonts. It is a display face, meant for headlines and display sizes, not body copy.
Can I swap in a different font?
Not from the UI, though the widget is a single file. Clone the component, change the `@font-face` source, and you have a specimen for any font you want.
Why does my headline look different here than on my site?
Almost always font loading timing or a different font-variant setting. If your site renders headlines before the font is ready, the fallback metrics shift the layout. Preload the font or gate paint on `document.fonts.ready`.
What size breaks DM Serif Display?
Below 18 pixels, the high contrast between thick and thin strokes starts to hinge on sub-pixel rendering and the face loses its character. Use it at 24 pixels and up for anything that matters.
How do I use italic for emphasis without it looking loud?
Pair italic with a dimmed color (roughly 60% opacity of the body text color). Italic at full brightness competes with the surrounding text. Italic dimmed reads as emphasis without shouting.
What is the right line height for a large serif headline?
Between 0.85 and 0.95. Default line height from the browser (1.2) leaves too much air between lines and makes the headline feel lazy. Tight line height is what makes display type look set, not typed.
Is DM Serif Display free for commercial use?
Yes. It is licensed under the Open Font License, which covers commercial and personal use.
How do I know if a free font has all the glyphs I need?
Scroll the glyph grid. If any character you need shows up as a tofu square, the font is missing that code point. That is a disqualifying issue for production text.
What is the difference between a display face and a text face?
Display faces are optimized for large sizes (above 24 pixels) and usually have higher contrast between thick and thin strokes. Text faces are optimized for body copy, with moderate contrast and larger x-heights for legibility at small sizes.