14.0.0 • Published 12 months ago

@material/typography v14.0.0

Weekly downloads
109,385
License
MIT
Repository
github
Last release
12 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 ...
playtwo-core-cms-sections@frannca/ngx-adminjuan-demo-apppwa-test-hpwa-test1pwa-test2sot-incubatorrxmx-coremdwrapper@beezydev/typographyopenstamanagermrcw@everything-registry/sub-chunk-584svmdsvelterialtest-chipstest-rsmdcteststeppersvelte-arcadiavoyager-components@code-monsters/iti_sass@defense-unicorns/unicorn-ui@detachhead/smui-extra-accordion@detachhead/smui-extra-badge@detachhead/smui-paper@cpangular/ng-material-theme@blackpurl/web-componentsjsonresume-theme-material-designjsonforms-sveltejsonforms-svelte-test@aurelia-mdc-web/typography@authentic/mwc-list@authentic/mwc-table@authentic/mwc-tooltip@authentic/mwc-typography@aurelia2-mdc-web/typography@backlight-dev/aodocs.aodocs-design-systemvue-material-design-components@fine-app-design/some-thing@freon4dsl/webapp-lib@gmvdev/materials@infinitebrahmanuniverse/nolb-_mate@inovex.de/elements@labstack/data-table@lcap-ui/typography@lucasecdb/rmdc@listo-paye/sdk-ui@mhamrah/svelte-material-ui@mycause/ui@material/toolbar@material/tabs@material/textfield@material/top-app-bar@material/tooltip@material/list@material/select@material/slider@material/snackbar@material/tab@material/tab-bar@material/segmented-button@material/banner@material/button@material/form-field@material/grid-list@material/image-list@material/floating-label@material/react-typography@material/dialog@material/drawer@material/chips@material/fab@material/data-table@emuanalytics/flow-rdf@exmg/exmg-grid@exmg/test-exmg-button@exmg/exmg-paper-sidemenu@exmg/exmg-sidemenu@exmg/exm-form@exmg/exm-form-drawer@exmg/exm-grid@exmg/exmg-breadcrumbs@exmg/exmg-button@exmg/exm-breadcrumbs@mcwv/typography@mcw/typography@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@materialr/typography@mirana/materialize@mdcext/data-table@mdcext/date-picker@mdcext/input-dialog@mdcext/multiselect@mdcext/pagination@mdcext/treeview@mdc-stencil/typography@moreillon/svelte-application-template
14.0.0

3 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.0

5 years ago

7.0.0

5 years ago

6.0.0

5 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago

4.0.0-alpha.0

6 years ago

3.1.0

6 years ago

3.0.0

6 years ago

3.0.0-alpha.1

6 years ago

3.0.0-alpha.0

6 years ago

2.3.0

6 years ago

1.0.0

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.44.1

6 years ago

0.44.0

6 years ago

0.43.0

6 years ago

0.42.0

7 years ago

0.41.0

7 years ago

0.40.1

7 years ago

0.39.0

7 years ago

0.39.0-0

7 years ago

0.38.0

7 years ago

0.37.1

7 years ago

0.35.0

7 years ago

0.34.0

7 years ago

0.28.0

7 years ago

0.3.0

8 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago