14.0.0 • Published 5 months ago

@material/typography v14.0.0

Weekly downloads
109,385
License
MIT
Repository
github
Last release
5 months ago

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

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body class="mdc-typography">
  <h1 class="mdc-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 ClassDescription
mdc-typographySets the font to Roboto
mdc-typography--headline1Sets font properties as Headline 1
mdc-typography--headline2Sets font properties as Headline 2
mdc-typography--headline3Sets font properties as Headline 3
mdc-typography--headline4Sets font properties as Headline 4
mdc-typography--headline5Sets font properties as Headline 5
mdc-typography--headline6Sets font properties as Headline 6
mdc-typography--subtitle1Sets font properties as Subtitle 1
mdc-typography--subtitle2Sets font properties as Subtitle 2
mdc-typography--body1Sets font properties as Body 1
mdc-typography--body2Sets font properties as Body 2
mdc-typography--captionSets font properties as Caption
mdc-typography--buttonSets font properties as Button
mdc-typography--overlineSets font properties as Overline

Sass Variables and Mixins

MixinDescription
mdc-typography-baseSets the font to Roboto
mdc-typography($style)Applies one of the typography styles, including setting the font to Roboto
mdc-typography-overflow-ellipsisTruncates overflow text to one line with an ellipsis

A note about mdc-typography-overflow-ellipsis, mdc-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 mdc-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 $mdc-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.

$mdc-typography-styles-button: (
  font-size: 16px,
  text-transform: none,
);

@import "@material/button/mdc-button";

Example: Overriding the global font-family property.

$mdc-typography-font-family: "Arial, Helvetica, sans-serif";

...
@import ...

Example: Overriding the font-family property for headline1 and headline2.

$mdc-typography-styles-headline1: (
  font-family: "Arial, Helvetica, sans-serif";
);
$mdc-typography-styles-headline2: (
  font-family: "Arial, Helvetica, sans-serif";
);

...
@import ...
@material/form-field@material/list@material/image-list@material/floating-label@material/drawer@material/dialog@material/fab@material/data-table@material/button@material/chips@material/banner@material/select@material/top-app-bar@material/tooltip@material/slider@material/textfield@material/snackbar@material/tab@material/tab-bar@material/segmented-buttonplaytwo-core-cms-sections@frannca/ngx-adminjuan-demo-apppwa-test-hpwa-test1pwa-test2sot-incubatorrxmx-coremdwrapper@beezydev/typographyopenstamanagermrcwmaterial-components-web@everything-registry/sub-chunk-584@listo-paye/sdk-ui@moreillon/svelte-application-template@o-rango/orango-material-design@mcw/typography@mcwv/typography@mhamrah/svelte-material-ui@mdc-stencil/typography@mdcext/input-dialog@mdcext/multiselect@mdcext/pagination@mdcext/treeview@mdcext/data-table@mdcext/date-picker@lucasecdb/rmdc@mycause/ui@mirana/materialize@rfoxlabs/rfox-nft-webcomponents@react-universal-dialogs/android@react-mdc/typography@rmwc/typography@robertkern/vue-materialjsonforms-sveltejsonforms-svelte-test@pitaya-components/typography@plonquo/ember-material-components@pmwcs/typography@preact-material-components/typography@preact-material-components/sliderjsonresume-theme-material-designnang-mdc-test@blackpurl/web-components@angular/material-experimental@angular/materialngx-dso@backlight-dev/aodocs.aodocs-design-system@smui/paper@smui-extra/accordion@smui-extra/badge@aurelia-mdc-web/typography@aurelia2-mdc-web/typography@authentic/mwc-list@authentic/mwc-table@authentic/mwc-tooltip@authentic/mwc-typographyaurelia-material-uiaurelia-mdc-uimaterial-toolboxmaterial-imbabw-material@code-monsters/iti_sassaapp-chat.js@xdam/ember-partials@virtualpatterns/portomde-ultimatemdsc-navigationmdc-react-gumballmdc-data-table@detachhead/smui-paper@detachhead/smui-extra-accordion@detachhead/smui-extra-badgereact-mdcreact-material-stepperpreact-material-componentspreact-material-components-mgrpug-material-designclosure-react-typography
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.42.0

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.35.0

6 years ago

0.34.0

6 years ago

0.28.0

6 years ago

0.3.0

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago