data-typographylisted

# Data typography Most "this table is hard to read" problems are typographic, and most of them are three fixes: tabular figures, right alignment, and consistent precision. --- ## Tabular figures — the single highest-value line of CSS By default most fonts use proportional digits: a `1` is narrower than a `0`. In a column of numbers, digits fail to stack and the eye cannot compare magnitudes by length. ```css .num, td, th, .figure { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; /* fallback for older engines */ } ``` Apply it to **every** numeric context: tables, KPI figures, axis ticks, data labels, tooltips. --- ## Alignment rules | Content | Alignment | Why | |---|---|---| | Numbers | **Right** | Magnitude is comparable by digit position | | Text labels | Left | Reading order | | Column headers | Match their column | A left-aligned header over right-aligned numbers looks broken | | Units and currency | Attached to the number, not a separate column | Splitting them doubles the eye's work | | Dates | Left, in a fixed format | `2026-08-19` sorts and aligns; `Aug 19, 2026` does neither | Align a numeric column on the **decimal point** by giving every cell the same decimal places. Ragged precision within a column is the most common cause of a column that will not scan. --- ## Precision — decided per column, never per cell State the rule once, apply it to the whole column: | Context | Precision | |---|---| | Currency in a summary | Whole