Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
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 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