RedHatOfficial/RedHatFont

Tabular figures

jkelstrup opened this issue · 9 comments

jkelstrup commented

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 commented

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

kelvah commented

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 commented

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

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

garrett commented

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 commented

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)
  • 👍1
garrett commented

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:

fonts-chart

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 commented

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

  • 🎉3
  • 🚀1
garrett commented

@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 commented

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