Normally this is done with "tabular numbers", an alternate set of glyphs in the font where all digit glyphs is equally wide. However, another feature a font can provide is "proportional numbers"—the inverse of tabular numbers. Most fonts usually provide one or the other. Roboto for instance provides "proportional numbers" as an option, and uses tabular numbers by default. Interface by contrast uses proportional numbers by default, and the plan is to add tabular numbers as a feature that you opt in to for the scenarios you point out (e.g. tables.) In CSS you'd opt-in to tabular numbers with: `font-variant-numeric: tabular-nums`
What is the rationale for defaulting to proportional numbers? I always assumed that "tabular numbers" are just "numbers", and deviating from that standard sounds like a recipe for needless confusion. Sure, you can flip a CSS switch, but how many webdesigners know that these switches even exist? And what about native UI frameworks where these switches don't even exist?