docs(design-foundations): Documents tabular font modifier. (#4266)

* docs(design-foundations): Documents tabular font modifier.

* Update link

packages/documentation-site/patternfly-docs/content/design-guidelines/components/table/table.md

@@ -82,6 +82,11 @@ See [when to use compact vs. default spacing](#compact-vs-default-spacing) for m
 
 <img src="./img/compact-and-default-table.png"  alt="Compact and default table"  width="857"/>
 
+### Numeral styling
+
+If needed, we offer a font modifier `.pf-v6-m-tabular-nums` that applies tabular styling to numerals. [Learn more about tabular font styling.](/design-foundations/typography#tabular-font-styling)
+
+
 ### Table capabilities
 Every table can be extended with these functionalities:
 

packages/documentation-site/patternfly-docs/content/design-guidelines/content/numerics.md

@@ -3,6 +3,10 @@ id: Numerics
 section: UX writing
 ---
 
+## Font styling
+
+If needed, we offer a font modifier `.pf-v6-m-tabular-nums` that applies tabular styling to numerals. [Learn more about tabular font styling.](/design-foundations/typography#tabular-font-styling)
+
 ## Date and time formats
 
 All date and time formats should be localizable, not hard-coded. When building localizable date and time formats, development teams should share the same library by using resources like [date-fns](https://date-fns.org/) or [Day.js](https://day.js.org/).

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/typography/typography.md

@@ -20,7 +20,7 @@ You can place text content on a page using the content or title component:
 We use 3 fonts in PatternFly:
 - **Red Hat Display:** Used for larger text, such as headings.
 - **Red Hat Text:** Used for smaller text, subheadings, and body text. More readable for long-form text. 
-- **Red Hat Mono:** Used to format text as code.
+- **Red Hat Mono:** A tabular font used to format text as code. [Read more about our use of tabular font styling.](#tabular-font-styling)
 
 [Download PatternFly's fonts from GitHub.](https://github.com/RedHatOfficial/RedHatFont)
 
@@ -81,6 +81,14 @@ All body text uses Red Hat Text.
 | <Content><Content component={ContentVariants.p}>Aa</Content></Content> | --pf-t--global--font--size--body--default | 0.875rem (14px) | 1.5 | Use for standard body text. |
 | <Content><Content component={ContentVariants.small}>Aa</Content></Content>  | --pf-t--global--font--size--body--sm | 0.75rem (12px) | 1.5 | User for smaller body text, like helper text. |
 
+## Tabular font styling 
+
+The primary fonts used in PatternFly (Red Hat Display and Red Hat Text) are proportional fonts, which typically offer better readability for standard blocks of text. When numerals are placed within long text bodies, as part of the text, it is best to use a proportional font. 
+
+Sometimes, numerals benefit from the use of a tabular font instead. **Tabular fonts** apply uniform width and spacing to helps maintain proper alignment of numbers. This can be particularly helpful when numbers are dynamically changing on screen, to prevent rough and jumpy movement. 
+
+Tabular font styling is used in a couple of PatternFly components, including slider and progress, but we also offer a modifier that allows you to apply tabular styling on your own: `.pf-v6-m-tabular-nums`, which sets `font-variant-numeric: tabular-nums;`
+
 ## Line height and spacing
 The line height of your text impacts how you should use [spacers](/design-foundations/spacers) in your design.