The Typographic Detail That Keeps Live Scores from Shifting

A match clock can reveal a lot about a typeface. Watch the seconds change and, sometimes, the whole display seems to fidget. The colon slips sideways, the numbers spread out or pull together, and a nearby label moves.

Behind that movement is a question of spacing. Different digits can take up different amounts of room. Tabular figures give them equal-width positions, a detail that helps designers keep live information steady as the numbers change.

Why the Clock Moves

In proportional numerals, the space given to each digit reflects its shape. A slender 1 may take up less room than a broad 8. That spacing helps numbers sit comfortably among letters in a paragraph.

A clock puts those figures to another use. As 11:11 becomes 11:10, replacing the final digit can change the width of the time. A centred clock may appear to shuffle, while a closely placed label can be pushed sideways.

The same problem appears in broadcast scoreboards, live-results apps and online betting interfaces, where scores, clocks and prices update in compact spaces.

Giving Each Digit the Same Space

Tabular figures give every digit from 0 to 9 the same amount of room. The shapes keep their character: a 1 can remain slender while occupying a space as wide as an 8.

Imagine each digit sitting inside an invisible box. With tabular figures, those boxes have matching widths. As one digit replaces another, its neighbours stay put, provided the format and font settings remain consistent.

Place proportional and tabular versions of the same clock side by side and the difference becomes easy to see. Keep the font, size and alignment identical, and follow the position of the colon through several updates.

Many typefaces include both sets of numerals. Designers can keep the familiar spacing of the letters while choosing steadier figures for the score.

A Closer Look at the Digit 1

Fitting ten different shapes into equally wide positions takes care. The 1 is revealing because its narrow form leaves more space around it.

A horizontal base can help a tabular 1 occupy that space more comfortably. Other numerals may receive subtle changes to their proportions. These small drawing decisions give the figures a more balanced appearance within their allotted widths.

Height matters too. Lining figures share a consistent height and baseline, producing an even row. Oldstyle figures vary in height, with some extending below the baseline, much like lowercase letters. Either style can have tabular spacing.

For the clock, tabular lining figures make a straightforward choice. Their even height suits the compact display, while the spacing keeps each digit in position. Look closely at the 1 beside an 8 to appreciate how differently they fill the same space.

Choosing Figures That Suit the Design

Numerals deserve a place in a typeface comparison alongside headlines and sample paragraphs. Try a clock, a two-digit score and a short column of prices to see how the font handles them.

Inter’s official documentation includes samples of its tabular figures. These offer a starting point for examining the shapes and spacing before bringing them into a layout.

The choice carries through to design software. Figma calls equal-width numerals monospace figures; Illustrator offers Tabular Lining in its OpenType panel.

For a website, the same choice can be expressed with one CSS declaration: font-variant-numeric: lining-nums tabular-nums. It asks a supporting font for lining figures with equal-width spacing. The CSS documentation explains the available options.

Once the figures are in place, watch them change at their intended size. A large specimen reveals the drawing; the finished layout shows how it reads.

Leaving Room for the Next Digit

Equal-width figures settle one kind of movement. A score changing from 9 to 10 introduces another: the display now needs space for two digits.

Leaving enough room for the expected score range keeps the composition balanced as that extra digit appears. Consider it beside the team names and status indicators, where every element has to share the available space.

Alignment helps organise the view. Right-aligned numerical columns give readers a consistent edge for comparison. For prices, keeping the same number of decimal places helps the decimal points line up when tabular figures are used.

Together, these choices give changing information a settled place in the design. The clock can tick and the score can grow while the surrounding labels stay where readers expect them.