| name | small-caps-and-figures |
| description | Use when adding typographic finesse. Small caps for labels, tabular figures for numbers, oldstyle vs lining figures intentionally.
|
Small Caps and Figures
True small caps (font-feature: smcp) > faked uppercase. Tabular figures (font-feature: tnum) for aligned numbers. Oldstyle vs lining figures: depends on context.
Small caps
True small caps use a separate font glyph (slightly heavier, taller than scaled-down caps). CSS:
.label {
font-variant-caps: all-small-caps;
font-feature-settings: 'smcp' 1;
letter-spacing: 0.05em;
}
Use for: labels, footers, captions, brand signatures. Adds editorial polish.
Tabular vs proportional figures
Tabular figures (font-feature: tnum) have equal width — great for tables and column-aligned numbers.
Proportional figures vary width — natural in flowing text.
CSS:
.data { font-feature-settings: 'tnum' 1; }
Oldstyle vs lining figures
Oldstyle figures (1234567890) flow with text — varying heights like lowercase letters. Better in body text.
Lining figures (1234567890) sit on baseline at cap height. Better in tables.
CSS:
body { font-feature-settings: 'onum' 1; }
table { font-feature-settings: 'lnum' 1, 'tnum' 1; }
Where this fits in the X3 empire
Used in CardPrepAI for tabular data and editorial body.
