Skip to content

Commit

Permalink
[docs][material-ui] Revise the Typography page (mui#38543)
Browse files Browse the repository at this point in the history 
Co-authored-by: Sam Sycamore <[email protected]>
  • Loading branch information
@danilo-leal @samuelsycamore
danilo-leal and samuelsycamore authored Sep 5, 2023
1 parent ab1c307 commit 95a9ebc
Showing 1 changed file with 51 additions and 52 deletions.
103 changes: 51 additions & 52 deletions docs/data/material/components/typography/typography.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,87 +10,90 @@ materialDesign: https://m2.material.io/design/typography/the-type-system.html

<p class="description">Use typography to present your design and content as clearly and efficiently as possible.</p>

Too many type sizes and styles at once can spoil any layout.
A [typographic scale](https://m2.material.io/design/typography/#type-scale) has a limited set of type sizes that work well together along with the layout grid.

{{"component": "modules/components/ComponentLinkHeader.js"}}

## General

The _Roboto_ font will **not** be automatically loaded by Material UI.
You are responsible for loading any fonts used in your application.
Roboto Font has a few easy ways to get started. For more advanced configuration, check out
[the theme customization section](/material-ui/customization/typography/).
## Roboto font

## Roboto Font CDN
Material UI uses the [Roboto](https://fonts.google.com/specimen/Roboto) font by default.
Add it to your project via Fontsource, or with the Google Fonts CDN.

Shown below is a sample link markup used to load the Roboto font from a CDN:
<codeblock storageKey="package-manager">

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
/>
```bash npm
npm install @fontsource/roboto
```

## Install with npm

You can [install it](https://www.npmjs.com/package/@fontsource/roboto) by running one of the following commands in your terminal:

With **npm**:

`npm install @fontsource/roboto`
```bash yarn
yarn add @fontsource/roboto
```

Or **yarn**:
```bash pnpm
pnpm add @fontsource/roboto
```

`yarn add @fontsource/roboto`
</codeblock>

Then, you can import it in your entry-point.
Then you can import it in your entry point like this:

```js
```tsx
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
```

For more info check out [Fontsource](https://github.com/fontsource/fontsource).
:::info
Fontsource can be configured to load specific subsets, weights, and styles. Material UI's default typography configuration relies only on the 300, 400, 500, and 700 font weights.
:::

### Google Web Fonts

Fontsource can be configured to load specific subsets, weights and styles.
Material UI default typography configuration only relies on 300, 400, 500, and 700 font weights.
To install Roboto through the Google Web Fonts CDN, add the following code inside your project's <head /> tag:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
/>
```

## Component

The Typography component makes it easy to apply a default set of font weights and sizes in your application.
### Usage

The Typography component follows the [Material Design typographic scale](https://m2.material.io/design/typography/#type-scale) that provides a limited set of type sizes that work well together for a consistent layout.

{{"demo": "Types.js"}}

## Theme
### Theme keys

In some situations you might not be able to use the `Typography` component.
In some situations you might not be able to use the Typography component.
Hopefully, you might be able to take advantage of the [`typography`](/material-ui/customization/default-theme/?expand-path=$.typography) keys of the theme.

{{"demo": "TypographyTheme.js"}}

## Changing the semantic element
## Customization

### Adding & disabling variants

In addition to using the default typography variants, you can add custom ones, or disable any you don't need. See the [Adding & disabling variants](/material-ui/customization/typography/#adding-amp-disabling-variants) page for more info.

### Changing the semantic element

The Typography component uses the `variantMapping` prop to associate a UI variant with a semantic element.
It's important to realize that the style of a typography component is independent from the semantic underlying element.

- You can change the underlying element for a one-off situation with the `component` prop:
To change the underlying element for a one-off situation, like avoiding two `h1` elements in your page, use the `component` prop:

```jsx
{
/* There is already an h1 in the page, let's not duplicate it. */
}
<Typography variant="h1" component="h2">
h1. Heading
</Typography>;
</Typography>
```

- You can change the mapping [globally using the theme](/material-ui/customization/typography/#adding-amp-disabling-variants):
To change the typography element mapping globally, [use the theme](/material-ui/customization/typography/#adding-amp-disabling-variants):

```js
const theme = createTheme({
Expand All @@ -115,23 +118,19 @@ const theme = createTheme({
});
```

## Adding & disabling variants

In addition to using the default typography variants, you can add custom ones, or disable any you don't need. See the [Adding & disabling variants](/material-ui/customization/typography/#adding-amp-disabling-variants) example for more info.

## System props
### System props

As a CSS utility component, the `Typography` supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component.
For instance, a margin-top:
As a CSS utility component, the Typography component supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component.
For example, here's how you'd add a margin-top:

```jsx
<Typography mt={2}>
```

## Accessibility

A few key factors to follow for an accessible typography:
Key factors to follow for an accessible typography:

- **Color**. Provide enough contrast between text and its background, check out the minimum recommended [WCAG 2.0 color contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) (4.5:1).
- **Font size**. Use [relative units (rem)](/material-ui/customization/typography/#font-size) to accommodate the user's settings.
- **Heading hierarchy**. [Don't skip](https://www.w3.org/WAI/tutorials/page-structure/headings/) heading levels. In order to solve this problem, you need to [separate the semantics from the style](#changing-the-semantic-element).
- **Font size**. Use [relative units (rem)](/material-ui/customization/typography/#font-size), instead of pixels, to accommodate the user's browser settings.
- **Heading hierarchy**. Based on [the W3 guidelines](https://www.w3.org/WAI/tutorials/page-structure/headings/), don't skip heading levels. Make sure to [separate the semantics from the style](#changing-the-semantic-element).

0 comments on commit 95a9ebc

Please sign in to comment.