Typography in Tables

Technical Deep Dive & Specifications

The OpenType font-variant-numeric Property

Modern web typography provides the standard CSS font-variant-numeric property (and its low-level counterpart font-feature-settings) to activate OpenType font layout tables:

.tabular-data {
  /* High-Level Standard Property */
  font-variant-numeric: tabular-nums;

  /* Low-Level Fallback for Older Engines */
  font-feature-settings: "tnum" 1;
}

+----------------------------------------------------------------------------------------+
|                          OPENTYPE NUMERIC FEATURE MATRIX                               |
+----------------------------------------------------------------------------------------+
| CSS Property Value                   | OpenType Tag | Function                         |
+--------------------------------------+--------------+----------------------------------+
| font-variant-numeric: tabular-nums;  | "tnum" 1     | Equal-width digits (0–9)         |
| font-variant-numeric: proportional-nums; | "pnum" 1 | Natural variable-width digits    |
| font-variant-numeric: lining-nums;   | "lnum" 1     | All digits rest on baseline      |
| font-variant-numeric: oldstyle-nums; | "onum" 1     | Digits with ascenders/descenders |
| font-variant-numeric: slashed-zero;  | "zero" 1     | Renders '0' with diagonal slash  |
| font-variant-numeric: diagonal-fractions; | "frac" 1| Renders 1/2 as typographic ½     |
+----------------------------------------------------------------------------------------+

You can combine multiple values in a single declaration:

.financial-cell {
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
}

The Fundamental Rules of Enterprise Data Alignment

Enterprise data grids and financial platforms (Bloomberg, Stripe, Goldman Sachs) adhere to three non-negotiable typography alignment rules:

+-------------------------------------------------------------------------------+
|                      DATA ALIGNMENT SPECIFICATION MATRIX                      |
+-------------------------------------------------------------------------------+
| Data Type            | Alignment | Header Alignment | Example                 |
+----------------------+-----------+------------------+-------------------------+
| Text / Strings       | Left      | Left             | "Engineering Division"  |
| Quantities / Money   | Right     | Right            | "$ 14,250.00"           |
| Dates / Timestamps   | Left/Right| Matches Column   | "2026-08-21 14:00"      |
| Status Badges / Icons| Center    | Center           | [ Active ]              |
| Actions / Buttons    | Right     | Right            | [ Edit ] [ Delete ]     |
+-------------------------------------------------------------------------------+

+-------------------------------------------------------------------------------+
| WHY HEADER & DATA ALIGNMENT MUST MATCH                                        |
+-------------------------------------------------------------------------------+
| ❌ WRONG: Left-aligned Header with Right-aligned Data                         |
| Balance (USD)                                                                 |
|                                                                    $14,200.00 |
| (Eye must travel 500px across empty space to connect header with number)      |
|                                                                               |
| ✅ CORRECT: Synchronized Right-aligned Header & Data                           |
|                                                                 Balance (USD) |
|                                                                    $14,200.00 |
| (Header directly caps the numeric column)                                     |
+-------------------------------------------------------------------------------+

Decimal Alignment Strategies

When rendering currency, numbers often have varying decimals ($12.5$ vs $1,420.00$).

Strategy 1: Deterministic Formatting + Right Alignment

The most reliable cross-browser standard is formatting numbers with uniform decimal places (e.g. via Intl.NumberFormat or toFixed(2)) combined with font-variant-numeric: tabular-nums and text-align: right.

Strategy 2: The Two-Span Decimal Split Pattern

For datasets with uneven decimal lengths where you cannot format to fixed decimals:

<td class="decimal-cell">
  <span class="integer-part">1,450</span>.<span class="fractional-part">85</span>
</td>

.decimal-cell {
  display: flex;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.fractional-part {
  width: 3ch; /* Reserve exactly 3 characters for decimals */
  text-align: left;
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 57–60 (.proportional-numbers): Leaves numbers in proportional mode. The 11,111.11 line is visibly shorter than 88,888.88, creating ragged decimal alignment.
• Line 63–67 (.tabular-numbers td.num, .tabular-numbers th.num): Applies font-variant-numeric: tabular-nums slashed-zero;. All numbers (1, 8, 0) occupy the identical advance width. Digits and decimals align in razor-sharp vertical columns.
• Line 83 (th.align-right matching td.align-right): Ensures column headers align to the right alongside their respective numeric figures, preventing visual disconnection.

Expected Browser Render Output

[PROPORTIONAL (WOBBLY)]             [TABULAR (RAZOR SHARP)]
Asset     Holdings    Market Value  Asset     Holdings    Market Value
USDC      11,111.11    $11,111.11   USDC      11,111.11    $11,111.11
ETH       88,888.88    $88,888.88   ETH       88,888.88    $88,888.88
BTC       10,010.01    $10,010.01   BTC       10,010.01    $10,010.01
(Ragged vertical drift)             (Flawless vertical alignment down every digit)