From df045214df72752d8a2e32de000f0d38f732d48c Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 18 Aug 2023 11:02:22 -0300 Subject: [PATCH] revise the typography page --- .../components/typography/typography.md | 103 +++++++++--------- 1 file changed, 51 insertions(+), 52 deletions(-) diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md index 42e111673791df..bc2ebf55175dc6 100644 --- a/docs/data/material/components/typography/typography.md +++ b/docs/data/material/components/typography/typography.md @@ -10,87 +10,90 @@ materialDesign: https://m2.material.io/design/typography/the-type-system.html

Use typography to present your design and content as clearly and efficiently as possible.

-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: + -```html - - - +```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` + -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 tag: + +```html + + + +``` ## 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. */ -} h1. Heading -; + ``` -- 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({ @@ -115,14 +118,10 @@ 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 @@ -130,8 +129,8 @@ For instance, a margin-top: ## 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).