# @material/typography
> Typography classes, mixins, and variables for Material Components for the web
Latest version **14.0.0** (published 2022-04-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install @material/typography
pnpm add @material/typography
yarn add @material/typography
bun add @material/typography
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: no vulnerabilities; popular repo.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 14.0.0 |
| Published | 2022-04-28 |
| First published | 2016-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 123 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17051 |
| Maintainers | material-admin, yefim, abhiomkar, azakus, bicknellr, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material components, material design, typography, font |
## Links
- npm: https://www.npmjs.com/package/@material/typography
- Repository: https://github.com/material-components/material-components-web
- Homepage: https://github.com/material-components/material-components-web#readme
- Issues: https://github.com/material-components/material-components-web/issues
- npm.io page: https://npm.io/package/@material/typography
## Dependencies (3)
- [tslib](https://npm.io/package/tslib.md) ^2.1.0
- [@material/theme](https://npm.io/package/@material/theme.md) ^14.0.0
- [@material/feature-targeting](https://npm.io/package/@material/feature-targeting.md) ^14.0.0
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 14.0.0 (latest) — 2022-04-28
- 15.0.0-canary.423edc3dc.0 (canary) — 2024-06-26
- 12.0.0-nightly.778a0e8a.0 (nightly) — 2021-07-20
- 4.0.0-alpha.0 (next) — 2019-08-07
- 15.0.0-canary.cfec83c74.0 — 2024-05-20
- 15.0.0-canary.2f5b899bc.0 — 2024-05-20
- 15.0.0-canary.f80ac92b0.0 — 2024-05-02
- 15.0.0-canary.4b35cb7d0.0 — 2024-05-02
- 15.0.0-canary.65c10a622.0 — 2024-04-25
- 15.0.0-canary.311f29a60.0 — 2024-04-23
- 15.0.0-canary.5bebc0064.0 — 2024-04-11
- 15.0.0-canary.68edc03c6.0 — 2024-04-08
- 15.0.0-canary.453a6248a.0 — 2024-03-25
- 15.0.0-canary.819498d8c.0 — 2024-03-15
- 15.0.0-canary.c43b3438b.0 — 2024-02-23
- … 1652 more at https://npm.io/package/@material/typography/versions
## README
# 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
```
## Basic Usage
### HTML Structure
We recommend using Roboto from Google Fonts:
```html
Big header
```
### Styles
```css
@use "@material/typography/mdc-typography";
```
## Style Customization
### Typography styles
The typography styles (referred to as `