14.0.0 • Published 7 months ago

@material/typography v14.0.0

Weekly downloads
109,385
License
MIT
Repository
github
Last release
7 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-chipssariska-cobrowsingsariska-webapptest-rsmdcteststeppersvelte-arcadiavoyager-componentsjsonresume-theme-material-designjsonforms-sveltejsonforms-svelte-testmde-ultimatemdc-react-gumballmdc-data-tablenang-mdc-testmaterial-imbamaterial-toolboxmaterial-components-webmdsc-navigationpreact-material-componentspreact-material-components-mgrpug-material-designngx-dsoreact-mdcreact-material-stepper@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
14.0.0

3 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.0

4 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

5 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

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

6 years ago

0.41.0

6 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

7 years ago

0.35.0

7 years ago

0.34.0

7 years ago

0.28.0

7 years ago

0.3.0

7 years ago

0.2.3

7 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