While working on a session countdown, I noticed a small but annoying UI issue: the button slightly changed its width every time the counter updated.

With a senior developer’s eye, even the smallest movement becomes noticeable.

Why Does It Happen?

In most fonts, digits do not have the same width. For example, 1 is usually narrower than 8.

When the countdown changes:

Yes 4:50 Yes 4:49 Yes 4:48

the text width changes too. If the button does not have a fixed width, it grows and shrinks by a few pixels, creating a distracting shaking effect.

The Simple Fix: tabular-nums

The CSS property font-variant-numeric: tabular-nums gives every digit the same horizontal width.

With Tailwind CSS, we can enable it using one class:

<button className="tabular-nums"> Yes {formattedTime} </button>

Now, 1, 4, 8, and every other digit occupy the same amount of space. The countdown can change without affecting the button’s width.

Why Not Use a Fixed Width?

A fixed width may hide the issue, but it is not always flexible. It can break when the text changes, the interface is translated, or a different font size is used.

tabular-nums solves the actual problem while keeping the component responsive.

Where Is It Useful?

Use tabular-nums for any frequently changing numeric value:

  • Countdown timers
  • Digital clocks
  • Prices and financial values
  • Dashboard statistics
  • Live scores
  • Data tables
  • Progress indicators

It is a small CSS detail, but it makes the interface feel more stable and polished.

Notice the details. Read more. Code smart.