Typography for Data Tables — Font Size and Family Best Practices

Data Table Typography

Data tables present unique typographic challenges. Information must be scannable horizontally and vertically, numbers must align properly, and the font must remain readable at small sizes.

Font Selection for Tables

Choose fonts with these characteristics:

• Tabular numbers (font-variant-numeric: tabular-nums) for column alignment
• Clear distinction between O/0 and l/1/I
• Good readability at 12-14px

Recommended table fonts:

.data-table {
  font-family: 'Inter', 'Roboto', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

Size Hierarchy in Tables

.table-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.table-cell {
  font-size: 14px;
  font-weight: 400;
}

.table-total {
  font-size: 14px;
  font-weight: 700;
}

Number Formatting

For financial data, use monospace or tabular figures so decimal points align vertically:

.currency {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

Responsive Tables

On mobile, increase font size to 15-16px since users cannot zoom into individual cells as easily. Consider switching from table to card layout below 640px viewport width.