I have a text block that I need to center horizontaly, however when it changes, it moves a bit, and I don't quite like it. A similar counter in iPhone countdown app somehow manages to avoid this problem. How would you suggest to handle it? I guess it can be solved with another font, but I like current one and I wonder if there some other design approaches for things like that.

enter image description here

  • Is it a part of some iOS app?
    – Vikas
    Jul 24 '21 at 19:31
  • You could use a monospace (at least for the number characters) font or more "manually" fix the colon in place (the other spacing would be arguably off in that case). Another option is to animate the change in position so it's less noticeable. Jul 24 '21 at 20:06

There are two options for this.

Either you use a monospaced font (or even some non-mono fonts have tabular numbers that solve this issue)

The other option is to make it appear centre aligned even though it technically is not. So you could have the ":" at a fixed position, the "1" right aligned and the "41" left aligned. This of course is pretty hard to do if you want to code this responsively...

  • Why would this be hard to code? Do you mean that the api has no way of querrying width of text?
    – joojaa
    Jul 25 '21 at 22:40
  • @joojaa If you have a fixed width it is easy. But with flexible width it could be a little more tricky – not rocket science either though. You essentially need 3 div's with fixed widths and a wrapper that is centred. The tricky part is to make sure that the text never overflows and spacings remain balanced etc. Jul 25 '21 at 22:54
  • Lots of things that could break this... – Font-size media queries need to be accounted for – What when user zooms – What if there are also bigger numbers like 1000:41 (then would not be in center and probably overflowing) – Later font size changes – etc. Jul 25 '21 at 23:05
  • 1
    Everything breaks if you push it hard enough.
    – joojaa
    Jul 25 '21 at 23:08

This is called tabular lining. It's where all the numbers take up the same space, regardless of their glyphs' size--similar to how a monospaced font would act.

In css you can use font-variant-numeric: tabular-nums;However it may not work on every font, I think it requires OpenType format and require the font creator added the functionality.

If you right aligned the type, and were able to set that css property, it should behave how you'd want.

Mozilla: "tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values tnum."

More here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

Visual Example: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.