Typography
Type Specimen
A specimen is not a demo. It is a diagnostic. It shows how a typeface behaves under load — at every size, weight, and context where you will actually use it. The scale, the pairs, the rules: each is a lens for seeing type as infrastructure, not decoration.
Pixel / Type Systems
Type Specimen
A reference, not a suggestion.
Modular scale · 1.25 ratio · 16px base
Alphabet · lowercase
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9 . , : ; ! ? ( ) — – " "
Body · 16px / 1.6
Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. The wrong font at the wrong time can injure a communication. The right one can make it sing.
Caption · 14px / 1.5
Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. The wrong font at the wrong time can injure a communication. The right one can make it sing.
Fonts vs. Voices
A font is a file. A voice is what happens when that file meets content, hierarchy, and spacing. The same typeface can whisper or shout depending on weight, size, tracking, and context. The specimen above isolates those variables so you can hear the voice before you commit to it.
Most type selection happens by aesthetics: "this looks modern" or "this feels premium." That is choosing a voice by accent alone. A specimen forces you to test the voice at body size, at caption size, in a paragraph, in a heading. The typeface that looks elegant at 72px may be unreadable at 14px.
What a Specimen Reveals
Scale Behavior
A modular scale is a ratio applied to a base size. 1.25 is gentle — each step is 25% larger. The specimen shows how this feels in practice: whether your H3 and Body are too close, whether your Display overwhelms your H1. The ratio is math. The result is perception.
Tracking at Size
Large type needs tighter tracking. Small type needs looser tracking. This is not style — it is optics. At 72px, default letter-spacing creates gaps that fracture the word shape. At 12px, default spacing packs letters too tight for comfortable scanning.
Weight Distribution
Not all weights are created equal. Some typefaces have thin strokes at regular weight that disappear on low-resolution screens. The specimen shows each weight so you can verify that your body weight is legible and your bold actually contrasts against it.
Pairing Tension
Font pairing is not about contrast alone. It is about tension with resolution — two typefaces that differ enough to create visual interest but share enough structure to feel composed. Serif with sans works when their x-heights align. Otherwise it is friction, not harmony.
Why Type Comes First
Typography carries your content. Color supports it. Spacing frames it. Layout organizes it. But if the type is wrong — wrong size, wrong weight, wrong measure — no amount of color or spacing can compensate. The page will feel off and no one will know why.
This is why a type specimen is the foundation page: the decisions you make here cascade into every other tool. The type scale builds on these fundamentals. The density tool measures how they perform under pressure. Start here.