| 1 | |
| 2 | title: "Typography"
|
| 3 | layout: detail
|
| 4 | section: components
|
| 5 | excerpt: "Typographic scale that handles a set of type sizes"
|
| 6 | iconId: typography
|
| 7 | path: /catalog/typography/
|
| 8 | -->
|
| 9 |
|
| 10 | # Typography
|
| 11 |
|
| 12 | Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
|
| 13 |
|
| 14 | MDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from thirteen styles:
|
| 15 |
|
| 16 | * Headline 1
|
| 17 | * Headline 2
|
| 18 | * Headline 3
|
| 19 | * Headline 4
|
| 20 | * Headline 5
|
| 21 | * Headline 6
|
| 22 | * Subtitle 1
|
| 23 | * Subtitle 2
|
| 24 | * Body 1
|
| 25 | * Body 2
|
| 26 | * Caption
|
| 27 | * Button
|
| 28 | * Overline
|
| 29 |
|
| 30 | ## Design & API Documentation
|
| 31 |
|
| 32 | <ul class="icon-list">
|
| 33 | <li class="icon-list-item icon-list-item--spec">
|
| 34 | <a href="https://material.io/go/design-typography">Material Design guidelines: Typography</a>
|
| 35 | </li>
|
| 36 | <li class="icon-list-item icon-list-item--link">
|
| 37 | <a href="https://material-components.github.io/material-components-web-catalog/#/component/typography">Demo</a>
|
| 38 | </li>
|
| 39 | </ul>
|
| 40 |
|
| 41 | ## Installation
|
| 42 |
|
| 43 | ```
|
| 44 | npm install @material/typography
|
| 45 | ```
|
| 46 |
|
| 47 | ## Basic Usage
|
| 48 |
|
| 49 | ### HTML Structure
|
| 50 |
|
| 51 | We recommend using Roboto from Google Fonts:
|
| 52 |
|
| 53 | ```html
|
| 54 | <head>
|
| 55 | <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
| 56 | </head>
|
| 57 | <body class="mdc-typography">
|
| 58 | <h1 class="mdc-typography--headline1">Big header</h1>
|
| 59 | </body>
|
| 60 | ```
|
| 61 |
|
| 62 | ### Styles
|
| 63 |
|
| 64 | ```css
|
| 65 | @use "@material/typography/mdc-typography";
|
| 66 | ```
|
| 67 |
|
| 68 | ## Style Customization
|
| 69 |
|
| 70 | ### Typography styles
|
| 71 |
|
| 72 | The typography styles (referred to as `<STYLE>` below) used in the type system:
|
| 73 |
|
| 74 | Scale | Description
|
| 75 | --- | ---
|
| 76 | `headline1` | The largest text on the screen, reserved for short, important text or numerals
|
| 77 | `headline2` | Headline variant 2
|
| 78 | `headline3` | Headline variant 3
|
| 79 | `headline4` | Headline variant 4
|
| 80 | `headline5` | Headline variant 5
|
| 81 | `headline6` | Headline variant 6
|
| 82 | `subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length
|
| 83 | `subtitle2` | Subtitle variant 2
|
| 84 | `body1` | Used for long-form writing
|
| 85 | `body2` | Body variant 2
|
| 86 | `caption` | Used sparingly to annotate imagery
|
| 87 | `button` | A call to action used by different types of buttons
|
| 88 | `overline` | Used sparingly to introduce a headline
|
| 89 |
|
| 90 | ### CSS Classes
|
| 91 |
|
| 92 | Some components have a set typographic style. For example, a raised MDC Card uses Body 1, Body 2, and Headline styles.
|
| 93 |
|
| 94 | If you want to set the typographic style of an element, which is not a Material Design component, you can apply the following CSS classes.
|
| 95 |
|
| 96 | CSS Class | Description
|
| 97 | --- | ---
|
| 98 | `mdc-typography` | Sets the font to Roboto
|
| 99 | `mdc-typography--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)
|
| 100 |
|
| 101 | For example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.
|
| 102 |
|
| 103 | ### CSS Custom Properties
|
| 104 |
|
| 105 | CSS Custom property | Description
|
| 106 | --- | ---
|
| 107 | `--mdc-typography-font-family` | The base font-family
|
| 108 | `--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)
|
| 109 | `--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)
|
| 110 | `--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)
|
| 111 | `--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)
|
| 112 | `--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)
|
| 113 | `--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)
|
| 114 | `--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)
|
| 115 |
|
| 116 | ### Sass Variables and Mixins
|
| 117 |
|
| 118 | Mixin | Description
|
| 119 | --- | ---
|
| 120 | `base` | Sets the font to Roboto
|
| 121 | `typography($style)` | Applies one of the typography styles, including setting the font to Roboto
|
| 122 | `smooth-font` | Adds antialiasing for typography
|
| 123 | `overflow-ellipsis` | Truncates overflow text to one line with an ellipsis
|
| 124 | `baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.
|
| 125 | `zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.
|
| 126 | `text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.
|
| 127 |
|
| 128 | > **A note about `overflow-ellipsis`**, `overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`.
|
| 129 |
|
| 130 | #### `$style` Values
|
| 131 |
|
| 132 | These styles can be used as the `$style` argument for the `mdc-typography` mixin.
|
| 133 |
|
| 134 | * `headline1`
|
| 135 | * `headline2`
|
| 136 | * `headline3`
|
| 137 | * `headline4`
|
| 138 | * `headline5`
|
| 139 | * `headline6`
|
| 140 | * `subtitle1`
|
| 141 | * `subtitle2`
|
| 142 | * `body1`
|
| 143 | * `body2`
|
| 144 | * `caption`
|
| 145 | * `button`
|
| 146 | * `overline`
|
| 147 |
|
| 148 | #### Overriding Styles
|
| 149 |
|
| 150 | All styles can be overridden using CSS custom properties or Sass module/global variables.
|
| 151 |
|
| 152 | When using Sass **module** variables, the module must be configured _before_ any other `@use`
|
| 153 | statements with a variable named `$styles-{style}`. The variable should be assigned to a map
|
| 154 | that contains all the properties you want to override for a particular style.
|
| 155 |
|
| 156 | When using Sass **global** variables, they must be defined _before_ the component is imported by setting a global
|
| 157 | variable named `$mdc-typography-styles-{style}`.
|
| 158 |
|
| 159 | **Example:** Overriding the button `font-size` and `text-transform` properties.
|
| 160 |
|
| 161 | CSS custom properties:
|
| 162 |
|
| 163 | ```css
|
| 164 | html {
|
| 165 | --mdc-typography-button-font-size: 16px;
|
| 166 | --mdc-typography-button-text-transform: none;
|
| 167 | }
|
| 168 | ```
|
| 169 |
|
| 170 | Sass module variables:
|
| 171 |
|
| 172 | ```scss
|
| 173 | @use "@material/typography" with (
|
| 174 | $styles-button: (
|
| 175 | font-size: 16px,
|
| 176 | text-transform: none,
|
| 177 | )
|
| 178 | );
|
| 179 |
|
| 180 | @use "@material/button";
|
| 181 | @include button.core-styles;
|
| 182 | ```
|
| 183 |
|
| 184 | Sass global variables:
|
| 185 |
|
| 186 | ```scss
|
| 187 | $mdc-typography-styles-button: (
|
| 188 | font-size: 16px,
|
| 189 | text-transform: none,
|
| 190 | );
|
| 191 |
|
| 192 | @import "@material/button/mdc-button";
|
| 193 | ```
|
| 194 |
|
| 195 | **Example:** Overriding the global `font-family` property.
|
| 196 |
|
| 197 | CSS custom properties:
|
| 198 |
|
| 199 | ```css
|
| 200 | html {
|
| 201 | --mdc-typography-font-family: Arial, Helvetica, sans-serif;
|
| 202 | }
|
| 203 | ```
|
| 204 |
|
| 205 | Sass module variables:
|
| 206 |
|
| 207 | ```scss
|
| 208 | @use "@material/typography" with (
|
| 209 | $font-family: unquote("Arial, Helvetica, sans-serif")
|
| 210 | );
|
| 211 |
|
| 212 | @use "@material/button";
|
| 213 | @include button.core-styles;
|
| 214 | ```
|
| 215 |
|
| 216 | Sass global variables:
|
| 217 |
|
| 218 | ```scss
|
| 219 | $mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");
|
| 220 |
|
| 221 | @import "@material/button/mdc-button";
|
| 222 | ```
|
| 223 |
|
| 224 | **Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.
|
| 225 |
|
| 226 | CSS custom properties:
|
| 227 |
|
| 228 | ```css
|
| 229 | html {
|
| 230 | --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;
|
| 231 | --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;
|
| 232 | --mdc-typography-headline2-font-size: 3.25rem;
|
| 233 | }
|
| 234 | ```
|
| 235 |
|
| 236 | Sass module variables:
|
| 237 |
|
| 238 | ```scss
|
| 239 | @use "@material/typography" with (
|
| 240 | $styles-headline1: (
|
| 241 | font-family: unquote("Arial, Helvetica, sans-serif")
|
| 242 | ),
|
| 243 | $styles-headline2: (
|
| 244 | font-family: unquote("Arial, Helvetica, sans-serif"),
|
| 245 | font-size: 3.25rem
|
| 246 | )
|
| 247 | );
|
| 248 |
|
| 249 | @use ...
|
| 250 | ```
|
| 251 |
|
| 252 | Sass global variables:
|
| 253 |
|
| 254 | ```scss
|
| 255 | $mdc-typography-styles-headline1: (
|
| 256 | font-family: unquote("Arial, Helvetica, sans-serif")
|
| 257 | );
|
| 258 | $mdc-typography-styles-headline2: (
|
| 259 | font-family: unquote("Arial, Helvetica, sans-serif"),
|
| 260 | font-size: 3.25rem
|
| 261 | );
|
| 262 |
|
| 263 | @import ...
|
| 264 | ```
|