Tabular figures - Githubissues

jkelstrup commented 5 years ago

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 5 years ago

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

kelvah commented 4 years ago

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 4 years ago

@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 4 years ago

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 4 years ago

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 commented 3 years ago

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 3 years ago

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

garrett commented 3 years ago

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

(Meanwhile, I just opened an issue requesting that PatternFly update the version of the fonts @ https://github.com/patternfly/patternfly/issues/4021)

kelvah commented 3 years ago

Thank you @jeremymickel! And we got variable fonts too! :tada:

RedHatOfficial / RedHatFont

Tabular figures #27