Typography Showcase
Letterforms, punctuation, numerals, and inline styles for visual type QA.
Typography at a Glance
Short Heading
A very short heading is useful because it reveals whether the heading has too much padding or an awkward minimum width.
Understanding How a Long Heading Behaves When It Needs to Wrap Across Several Lines in a Narrow Reading Column
This paragraph follows a long heading so that the relationship between heading width, line height, and following content is easy to inspect.
The Six Heading Levels
Heading Four
Heading Five
Heading Six
The visual steps between levels should feel intentional. The smallest heading should not become indistinguishable from bold body text, and the largest should not dominate the article merely because the viewport is wide.
Letter Set
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Symbols and Punctuation
! @ # $ % ^ & * ( ) - _ + = [ ] { } ; : ’ " , . < > / ?
Typography has to make ordinary punctuation quiet and unusual punctuation legible. Consider the difference between a hyphen - a short dash – an en dash — an em dash, and an ellipsis … . Also check parentheses (round), brackets [square], braces {curly}, and angle brackets <pointed>.
Numerals and Dates
| Value | Purpose |
|---|---|
| 0 | A single zero |
| 1 | A single one |
| 10 | Two digits |
| 100 | Three digits |
| 1,000 | Thousands separator |
| 10,000 | Larger grouped number |
| 1,000,000 | Seven-character number |
| 3.1415926 | Decimal precision |
| 99.99% | Percentage |
| $1,234.56 | Currency |
| 2026-08-30 | ISO date |
| 14:30:00 | Time |
Inline Texture
This sentence contains bold, italic, and bold italic words alongside inline code, a nearby link, and a long token such as --article-content-max-width.
Superscript-like glyphs can appear in a footnote-like expression: x² + y² = z². Subscript-like glyphs can appear in a chemical formula: H₂O. These small glyphs should align with the surrounding line instead of changing the paragraph height dramatically; this project keeps Goldmark’s raw HTML disabled, so the Unicode form is the reliable baseline here.
A Quiet Quote
Good typography does not ask to be admired at every turn. It gives each word enough room to be understood, then gets out of the way.
Lists and Rhythm
- A short item
- A longer item with emphasis,
code, and a link - A final item that closes the list
The space after a list should be proportional to the space after a paragraph. Rhythm is a relationship between neighboring elements, not a collection of isolated margins.