4 ms·
Sadly, digits have a different width, so if you have e.g. a right-aligned, increasing numerical value in your UI, the left digit of it will "wiggle around" if t
by tgsovlerkhgsel 9y ago
Sadly, digits have a different width, so if you have e.g. a right-aligned, increasing numerical value in your UI, the left digit of it will "wiggle around" if the last digit iterates through 0-9, and if you have numerical values, they won't align.
This may be OK for text, but specifically for user interfaces, this is the very first thing I check when considering whether a font is usable.
With a good font, it will be immediately obvious which of these amounts is more, while this font would likely mislead you:
$ 100000
$ 111111
Ironically, Roboto seems to get it right.
- rvern 9y agoThis has nothing to do with "good" or "usable" fonts. Whether digits align is controlled with the pnum and tnum OpenType features.
- rasmusfabbe 9y agoNormally 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`
- rasmusfabbe 9y agoTabular numbers added and will be included in the next release (1.2) https://github.com/rsms/interface/issues/10#issuecomment-324559439 https://github.com/rsms/interface/issues/10#issuecomment-324...
- majewsky 9y agoWhat 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?