Skip to content

Commit

Permalink
docs(typography): Updates content with tokens. (#4117)
Browse files Browse the repository at this point in the history 
* Begin editing content.

* Updates with tokens.

* Update with rems info.

* Update image.

* Add mention of hero and super hero.

* Update customizing headings section.
  • Loading branch information
@edonehoo
edonehoo authored Jul 17, 2024
1 parent 44dade7 commit 21bcb4a
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 139 deletions.
Binary file added ...ite/patternfly-docs/content/design-guidelines/styles/typography/line-height.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
194 changes: 55 additions & 139 deletions ...-site/patternfly-docs/content/design-guidelines/styles/typography/typography.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,177 +3,93 @@ id: Typography
section: design-foundations
---

import { Button, Grid, GridItem } from '@patternfly/react-core';
import { Button, EmptyState, EmptyStateBody, EmptyStateVariant, Grid, GridItem, Text, TextContent, TextVariants, Title } from '@patternfly/react-core';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
import { TypographyGrid, LineHeightTitle, SpacingContentItem, Spacer, TitleLevel, styleProps } from './typography';
import correct from './typography_correct_spacing.png';
import incorrect from './typography_incorrect_spacing.png';
import './typography.css';

## PatternFly fonts

PatternFly's fonts include **Red Hat Display** and **Red Hat Text**. For larger text, such as headings, use Red Hat Display. For smaller text, subheadings, and body text, use Red Hat Text, which is more readable for long-form text. You can [download PatternFly's fonts from GitHub.](https://github.com/RedHatOfficial/RedHatFont)

## Usage

Use typography to create visual hierarchy. A consistent and logical hierarchy makes it easier for users to quickly scan and understand information on a page.

There are two PatternFly components that can be used to place text content on a page: the [text component](/components/text) and the [title component](/components/title). The text component should be used to create formatted blocks of text content. It accepts all general HTML text formatting tags, including heading, paragraph, and list styles. The title component is intended to be used specifically for headings or title text in components. This component is flexible and allows you to set the size of the text and heading level independently.

## PatternFly text styles

The following sections outline common text styles that are used in PatternFly applications, how they should be used, and list settings in a table. These tables include the following information:

- **Text style:** The name used to refer to that text style in the [PatternFly design kit](/get-started/design#getting-the-design-kit).

- **Font family, font weight, line height, and font size:** The styles applied to the text style.

- **Font size CSS variable:** The CSS variable that controls the size of your text. You can customize type sizes in your application by modifying the values associated with these variables. In general, this is not advised, and should be done with caution, as changes to text style can have far reaching side effects on spacing within certain components.
You can use **typography** to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.

### Super hero heading (4xl)
This page outlines PatternFly's typography principles and standards, including token values and usage information.

**Note:** Use only for extra large titles in cards or similar locations. Do not use for page titles.
You can place text content on a page using the text or title component:
- **[Text component:](/components/text)** Used to create formatted blocks of text content. Text accepts all general HTML text formatting tags, including heading, paragraph, and list styles.
- **[Title component:](/components/title)** Used specifically for headings or title text in components. Title is flexible and allows you to set the size of the text and heading level independently.

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps={styleProps.superHero} />

<div class="pf-v6-u-mt-lg">
</div>

### Hero heading (3xl)

**Note:** Use only for extra large titles in cards or similar locations. Do not use for page titles.

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps={styleProps.hero} />
<div class="pf-v6-u-mt-lg">
</div>
## PatternFly fonts

### First level heading (2xl, H1)
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.

**Note**: Only 1 first level/H1 heading should ever exist on a page.
[Download PatternFly's fonts from GitHub.](https://github.com/RedHatOfficial/RedHatFont)

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps={styleProps.first} />
<div class="pf-v6-u-mt-lg">
</div>
### Font sizing: rem vs pixel

### Second level heading (xl, H2)
Font size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage's HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px.

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps={styleProps.second} />
<div class="pf-v6-u-mt-lg">
</div>
PatternFly's default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same).

### Third level heading (lg, H3)
## Headings

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps={styleProps.third} />
<div class="pf-v6-u-mt-lg">
</div>
All headings use Red Hat Display bold.

### Fourth level heading (md, H4)
| Example | Tokens | Size | Line height | Usage |
| --- | --- | --- | --- | --- |
| <Title headingLevel="h5" size='2xl'> Aa </Title> | --pf-t--global--font--size--heading--h1 | 1.375rem (22px) | 1.3 | Super hero headings <br /> H1 <br /> Page titles |
| <Title headingLevel="h5" size='xl'> Aa </Title> | --pf-t--global--font--size--heading--h2 | 1.25rem (20px) | 1.3 | Hero headings <br /> H2 |
| <Title headingLevel="h5" size='lg'> Aa </Title> | --pf-t--global--font--size--heading--h3 | 1.125rem (18px) | 1.3 | H3 |
| <Title headingLevel="h5" size='md'> Aa </Title> | --pf-t--global--font--size--heading--h4 <br /> --pf-t--global--font--size--heading--h5 <br /> --pf-t--global--font--size--heading--h6 |1rem (16px) | 1.3 | H4 <br /> H5 <br /> H6 |

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps = {styleProps.fourth} />
<div class="pf-v6-u-mt-lg">
</div>
### Customizing heading levels
The [title component](/components/title) allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility.

### Default body text
The following table shows the default mapping of PatternFly heading levels to text size:

**Note:** This is the default text style for paragraphs, lists, tables, etc. Some components instead use Red Hat Text at 700 font weight, which is Red Hat Text Medium (such as alerts and navigation).
| Heading level | Default size |
|----|-----------|
| H1 | 2xl (1.375rem, 22px)|
| H2 | xl (1.25rem, 20px) |
| H3 | lg (1.125rem, 18px) |
| H4 | md (1 rem, 16px) |
| H5 | md (1 rem, 16px) |
| H6 | md (1 rem, 16px) |

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps = {styleProps.body} />
<div class="pf-v6-u-mt-lg">
</div>
If you use the title component, you can change the text size of your heading levels to customize beyond this default behavior.

### Small text
For example, you may decide that the default size of 20px for secondary headings is too large and you want to decrease the size from 20px (xl) to 18px (lg). Instead of making your secondary headings H3’s to set the size, you should use the title component to keep them as H2 headings and change the `size` property from `xl` to `lg`.

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps = {styleProps.small} />
<div class="pf-v6-u-mt-lg">
</div>
Example:

### Tiny text
<Title headingLevel="h2"> This is a default "xl" H2. </Title>
```<Title headingLevel="h2" size='lg'> Aa </Title>```

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps = {styleProps.tiny} />
<div class="pf-v6-u-mt-lg">
</div>
<Title headingLevel="h2" size='lg'> This is a customized "lg" H2. </Title>
```<Title headingLevel="h2" size='lg'> Aa </Title>```

### Code
Make sure that you maintain good visual hierarchy and mapping between heading levels and text sizes. In most cases, H1 should always be your largest heading and subheadings should get progressively smaller as you move down the hierarchy. Rare exceptions to this rule do occur, but should only be used to highlight critical data. For example, there might be scenarios where card titles use a text size that is larger than the H1 page title.

**Note:** Used for code blocks.
Refer to the [title component examples](/components/title#custom-sizes) to understand the range of customization options.

<TitleLevel
className="pf-v6-c-title pf-m-lg ws-title-level-heading"
asGrid
styleProps = {styleProps.code} />
<div class="pf-v6-u-mt-lg">
</div>
## Body text

## Customizing heading levels
If you use the [title component](/components/title) to create headings on your page, you can modify the default relationship between heading levels and text sizes. When using title, you must specify a heading level that will apply to the target text. The following table shows the default mapping of heading level to text size:
All body text uses Red Hat Text.

| Heading level | Default size|
|----|-----------|
| H1 | 2xl (24px)|
| H2 | xl (20px) |
| H3 | lg (18px) |
| H4 | md (16px) |
| H5 | md (16px) |
| H6 | md (16px) |
| Example | Tokens | Size | Line height | Usage |
| --- | --- | --- | --- | --- |
|<p style="font-size:16px">Aa</p> | --pf-t--global--font--size--body--lg | 1rem (16px) | 1.5 | Use for larger body text, like in xl empty states. |
| <TextContent><Text component={TextVariants.p}>Aa</Text></TextContent> | --pf-t--global--font--size--body--default | 0.875rem (14px) | 1.5 | Use for standard body text. |
| <TextContent><Text component={TextVariants.small}>Aa</Text></TextContent> | --pf-t--global--font--size--body--sm | 0.75rem (12px) | 1.5 | User for smaller body text, like helper text. |

The title component allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility.
## Line height and spacing
The line height of your text impacts how you should use [spacers](/design-foundations/spacers) in your design.

For example, you may decide that 20px secondary headings are too large and you want to drop the size of these headings from 20px (xl) to 18px (lg). Rather than make your secondary headings H3’s, you should use the title component to keep them as H2 headings, but change the associated text size from `xl` to `lg`. You can also choose to use larger primary headers by changing the default text size as the title component will support text sizes up to 4xl (36px).
Your overall line height can be calculated by multiplying the font's built-in line height by the text size.

No matter which visual customizations you choose to make, you should always maintain good visual hierarchy and mapping between heading levels and text sizes. In most cases, H1 should always be your largest heading and subheadings should get progressively smaller as you move down the hierarchy. Exceptions to this rule do occur. For example, there might be cases where card titles will use a text size that is larger than the H1 page title. You should use this approach sparingly and only when it may be important to highlight critical data.
For example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs.

## Line height and spacing
Your text's line height has an impact on the use of [spacers](/design-foundations/spacers) in your design.

Line height is measured in in pixels, and can be calculated by multiplying the font's built-in line height by the text size.

For example, if a body of text uses a line height of 1.5 and the body text size is 16px, the final line height would be 24 px (16 * 1.5 = 24). In this case, include the 24px line height as part of the text when creating designs in the design software.

<Grid>
<GridItem span={12}>
<LineHeightTitle>
<CheckCircleIcon color="#52A549" />
<span style={{marginLeft: 'var(--pf-v6-global--spacer--sm)'}}>Correct</span>
</LineHeightTitle>
<div>Include line height space when laying out text with spacers.</div>
<img alt="correct line height space example" style={{maxHeight: '158px', padding: '16px'}} src={correct} />
</GridItem>
<GridItem span={12}>
<LineHeightTitle>
<TimesCircleIcon color="#CC0000" />
<span style={{marginLeft: 'var(--pf-v6-global--spacer--sm)'}}>Incorrect</span>
</LineHeightTitle>
<div>Don't align spacing solely to the text. Always include the line height space.</div>
<img alt="incorrect line height space example" style={{maxHeight: '124px', padding: '16px'}} src={incorrect} />
</GridItem>
</Grid>

Note that the [text](/components/text) and [title](/components/title) components will automatically apply the proper line height and spacing according to the specified text style.
![Correct and incorrect text spacing examples.](./line-height.png)

0 comments on commit 21bcb4a

Please sign in to comment.