# 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
## Installation
```
npm install @material/typography
```
## Usage
We recommend you load Roboto from Google Fonts
```html
Big header
```
### 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 ...
```