How to design a leaderboard people actually read

A leaderboard looks like a table, but people read it like a story: who is winning, by how much, and where am I. A design that answers those three questions in order gets read. One that treats every column as equal gets scanned and closed.

Each row carries four things

1. The rank, set large enough to scan down, in figures that line up.
2. The name, with an avatar or mark only if it helps recognition.
3. The value, right-aligned, in tabular figures, with its unit in the header.
4. The change since last time, with a sign, in colour only if it moved.

A bar against the leader

The most useful thing a leaderboard can add is a thin bar under or behind each value, sized as a share of the first-place value. It turns the table into a chart without adding a chart. A reader sees in one look that the top two are close and the rest are far behind, which is usually the actual news.

<li class="row">
  <span class="rank">4</span>
  <span class="name">Ada Park</span>
  <span class="value">$1,204,500</span>
  <span class="bar" style="--share: 0.62"></span>
</li>

.bar { height: 2px; width: calc(var(--share) * 100%); background: var(--accent); }

Separate the rows

Rows with a little space between them read as entries; rows packed under hairlines read as a spreadsheet. On a dark board, give each row its own slightly raised surface. On paper, a hairline and generous padding does the same job.

The podium, and only the podium

Gold, silver and bronze marks on the top three are enough. Do not colour every row by tier and do not animate the leader. If the user has a row of their own, pin it at the bottom of the viewport with their rank, so they never scroll to find themselves.

Timestamp the whole board

A ranking without a date is an opinion. Put "as of" with a date and time in the header, and say how often it updates. If the values are money, say which currency. These lines make a board look like reporting rather than decoration, which is also the point of editorial web design.

On a phone

Drop secondary columns, keep rank, name, value and the bar, and let the name wrap rather than truncate. Test with the longest real name in the data, not a placeholder.

Editorial Ledger UI includes this as a recipe, written from richlist.online: separated rows, mono figures, a bar per row against the leader, podium marks on the top three only, and a timestamped header.