aforemny / material-components-web-elm / Material.Typography

Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.

Table of Contents

Resources

Basic Usage

For typography to work best, it is necessary to set the font to Roboto. This is archieved by the mdc-typography class, and we recommend to set it globally to the root of your page.

import Material.Typography as Typography

Html.h1 [ Typography.headline1 ] [ text "Headline" ]

Typography Variants

Typography elements come in the following thirteen variants.

headline1 : Html.Attribute msg

Sets font properties as Headline 1

headline2 : Html.Attribute msg

Sets font properties as Headline 2

headline3 : Html.Attribute msg

Sets font properties as Headline 3

headline4 : Html.Attribute msg

Sets font properties as Headline 4

headline5 : Html.Attribute msg

Sets font properties as Headline 5

headline6 : Html.Attribute msg

Sets font properties as Headline 6

body1 : Html.Attribute msg

Sets font properties as Body 1

body2 : Html.Attribute msg

Sets font properties as Body 2

subtitle1 : Html.Attribute msg

Sets font properties as Subtitle 1

subtitle2 : Html.Attribute msg

Sets font properties as Subtitle 2

caption : Html.Attribute msg

Sets font properties as Caption

button : Html.Attribute msg

Sets font properties as Button

overline : Html.Attribute msg

Sets font properties as Overline

typography : Html.Attribute msg

Sets the font to Roboto