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.
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...
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."