solids

# Typography Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions. 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: * Headline 1 * Headline 2 * Headline 3 * Headline 4 * Headline 5 * Headline 6 * Subtitle 1 * Subtitle 2 * Body 1 * Body 2 * Caption * Button * Overline ## Design & API Documentation <ul class="icon-list"> <li class="icon-list-item icon-list-item--spec"> <a href="https://material.io/go/design-typography">Material Design guidelines: Typography</a> </li> <li class="icon-list-item icon-list-item--link"> <a href="https://material-components-web.appspot.com/typography.html">Demo</a> </li> </ul> ## Installation ``` npm install @material/typography ``` ## Usage We recommend you load Roboto from Google Fonts ```html <head> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> </head> <body class="typography"> <h1 class="typography--headline1">Big header</h1> </body> ``` ### CSS Classes Some components have a set typographic style. For example, a raised MDC Card uses Body 1, Body 2, and Headline styles. 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. CSS Class | Description --- | --- `typography` | Sets the font to Roboto `typography--headline1` | Sets font properties as Headline 1 `typography--headline2` | Sets font properties as Headline 2 `typography--headline3` | Sets font properties as Headline 3 `typography--headline4` | Sets font properties as Headline 4 `typography--headline5` | Sets font properties as Headline 5 `typography--headline6` | Sets font properties as Headline 6 `typography--subtitle1` | Sets font properties as Subtitle 1 `typography--subtitle2` | Sets font properties as Subtitle 2 `typography--body1` | Sets font properties as Body 1 `typography--body2` | Sets font properties as Body 2 `typography--caption` | Sets font properties as Caption `typography--button` | Sets font properties as Button `typography--overline` | Sets font properties as Overline ### Sass Variables and Mixins Mixin | Description --- | --- `typography-base` | Sets the font to Roboto `typography($style)` | Applies one of the typography styles, including setting the font to Roboto `typography-overflow-ellipsis` | Truncates overflow text to one line with an ellipsis > **A note about `typography-overflow-ellipsis`**, `typography-overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`. #### `$style` Values These styles can be used as the `$style` argument for the `typography` mixin. * `headline1` * `headline2` * `headline3` * `headline4` * `headline5` * `headline6` * `subtitle1` * `subtitle2` * `body1` * `body2` * `caption` * `button` * `overline` #### Overriding Styles All styles can be overridden using Sass global variables _before_ the component is imported by setting a global variable named `$typography-styles-{style}`. The variable should be assigned a map that contains all the properties you want to override for a particular style. Example: Overriding the button `font-size` and `text-transform` properties. ```scss $typography-styles-button: ( font-size: 16px, text-transform: none, ); @import "../button/mdc-button"; ``` Example: Overriding the global `font-family` property. ```scss $typography-font-family: "Arial, Helvetica, sans-serif"; ... @import ... ``` Example: Overriding the `font-family` property for `headline1` and `headline2`. ```scss $typography-styles-headline1: ( font-family: "Arial, Helvetica, sans-serif"; ); $typography-styles-headline2: ( font-family: "Arial, Helvetica, sans-serif"; ); ... @import ... ```