データテーブルのタイポグラフィ — フォントサイズとファミリーのベストプラクティス

データテーブルタイポグラフィ

データテーブルは独特のタイポグラフィの課題を提示します。情報は水平方向と垂直方向にスキャン可能でなければならず、数値は適切に配置され、フォントは小さなサイズでも読みやすくなければなりません。

テーブル用のフォント選択

以下の特性を持つフォントを選択してください：

• 列の配置のためのタブラーナンバー（font-variant-numeric: tabular-nums）
• O/0とl/1/Iの明確な区別
• 12-14pxでの良好な読みやすさ

テーブル内のサイズ階層

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

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

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

数値フォーマット

財務データの場合、小数点が垂直に揃うようにモノスペースまたはタブラーフィギュアを使用してください。

レスポンシブテーブル

モバイルでは、ユーザーが個々のセルにズームインしにくいため、フォントサイズを15-16pxに増やしてください。640px以下のビューポート幅ではテーブルからカードレイアウトへの切り替えを検討してください。