Skip to content

Commit

Permalink
docs(design-foundations): Documents tabular font modifier. (#4266)
Browse files Browse the repository at this point in the history
* docs(design-foundations): Documents tabular font modifier.

* Update link
  • Loading branch information
edonehoo authored Sep 19, 2024
1 parent 9ef3e65 commit 1e125fd
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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.

Expand Down

0 comments on commit 1e125fd

Please sign in to comment.