Tabular figures

[jkelstrup]

As far as I can tell, Red Hat Font offers proportional figures only, it would be super nice if tabular figures was available as well. Maybe as an OTF feature.

I realize that some tweaking of the design of the figures is necessary to do this right. It wouldn't look right to just make the current figures monospaced.

Thank you for considering this!

[starryeyez024]

Thanks! This is something the brand team has acknowledged as a potential future feature. Keeping this issue open for visibility.

[kelvah]

I second @jkelstrup proposal.

In the meantime, do you have any recommendations about which font to use for numbers when tabular spacing is needed? I have tried some of the common web safe solutions (Courier New, Lucida Sans Typewriter, ...) but they don't look so great near Red Hat Font, maybe the weight is too different.

Thank you!

[jkelstrup]

@kelvah
I did a quick experiment and narrowed it down a bit:

I would probably go with Open Sans for tabular figures. I'm betting that most people won't notice.

[garrett]

It should be possible to do a hotfix workaround until RedHatText has proper tabular numbers.

Something like this: https://www.client9.com/css-georgia-font-stack-with-tabular-numbers/ but with different fonts. Either with Open Sans (which means shipping and including another font, as we cannot rely on it being installed on the system) or finding system fonts with tabular numbers that match well enough on Linux, Windows, and macOS.

Of course, that would just be a workaround until the Red Hat font is enhanced.

[garrett]

I used a subset of Open Sans for numbers in Cockpit and found that the metrics aren't close enough.

Around 14px on a standard DPI monitor they were pretty close — probably good enough, really. At around 16px, glyphs of Open Sans were taller in Firefox and Chrome even displayed the Open Sans glyphs both higher and lower than Red Hat Text. The larger the text, the worse it became, of course.

I did try font-size-adjust in the @font-face subset declaration, but it apparently doesn't affect things at that level.

If we're going to do a font subset of patching things in, it should probably be...:

• a system font with appropriate metrics. (Which means testing things on Linux, Windows, macOS, Android, and iOS individually. Which we'd want to do anyway, as each has their own way of rendering text.)
• opt-in with a class, for tables, progress bars, and other places where tabular matters a lot
• not used for headers or other display text
• on a project-level
• temporary, with the hopes that we'll get an updated RedHatText font soon (as tabular numbers support probably isn't as important for headings and other places where RedHatDisplay is used)

[garrett]

For an illustration of the issue in action, in Cockpit, we're hitting alignment problems on PatternFly 4 graphs as the numbers on the Y axis are all right-aligned and also proportional:

Look at how wrong that 1 looks in-between the much-wider 0 and 2.

We're also having similar alignment issues elsewhere in Cockpit, especially when digits after a decimal point are displayed.

[jeremymickel]

@garrett @jkelstrup @kelvah Tabular numbers have been added.

[garrett]

@jeremymickel: Thank you so much for all the updates! I can't wait to use all the new features. 🥳

(Meanwhile, I just opened an issue requesting that PatternFly update the version of the fonts @ patternfly/patternfly#4021)

[kelvah]

Thank you @jeremymickel! And we got variable fonts too! 🎉