From the Material Design Lite documentation:
The Material Design Lite (MDL) typography component is a comprehensive approach to standardizing the use of typefaces in applications and page displays. MDL typography elements are intended to replace the myriad fonts used by developers (which vary significantly in appearance) and provide a robust, uniform library of text styles from which developers can choose.
The "Roboto" typeface is the standard for MDL display; it can easily be integrated into a web page using the CSS3 @font-face rule. However, Roboto is most simply accessed and included using a single standard HTML element, which can be obtained at this Google fonts page.
Because of the many possible variations in font display characteristics in HTML and CSS, MDL typography aims to provide simple and intuitive styles that use the Roboto font and produce visually attractive and internally consistent text results. See the typography component's Material Design specifications page for details.
See also the Material Design Specification.
Refer to this site for a live demo.
The Material Design
specification
stipulates that typography has particular color contrast. The styles in this
file gives correct contrast for black and white only; for colored typography or backgrounds, use the
contrast
option to regulate color contrast.
Regular 34px
Regular 45px
Regular 56px
Light 112px
Regular 14px (Device), Regular 13px (Desktop)
Medium 14px (Device), Medium 13px (Desktop)
Regular 24px
Medium 20px
Regular 16px (Device), Regular 15px (Desktop)
Regular 12px
Medium (All Caps) 14px
Medium 14px (Device), Medium 13px (Desktop)
Modify contrast of typography. Implemented under the hood by setting CSS
opacity
.
Capitalized text
Lowercased text
Uppercased text
Left aligned text
Center aligned text
Right aligned text
Justified text
No wrap text
Striped table
module Material.Typography
exposing
( display1
, display2
, display3
, display4
, body1
, body2
, headline
, subhead
, caption
, button
, menu
, title
, contrast
, capitalize
, lowercase
, uppercase
, left
, center
, right
, justify
, nowrap
, tableStriped
)
{-| From the [Material Design Lite documentation](https://github.com/google/material-design-lite/tree/mdl-1.x/src/typography#introduction):
> The Material Design Lite (MDL) typography component is a comprehensive approach
> to standardizing the use of typefaces in applications and page displays. MDL
> typography elements are intended to replace the myriad fonts used by developers
> (which vary significantly in appearance) and provide a robust, uniform library
> of text styles from which developers can choose.
>
> The "Roboto" typeface is the standard for MDL display; it can easily be
> integrated into a web page using the CSS3 @font-face rule. However, Roboto is
> most simply accessed and included using a single standard HTML <link> element,
> which can be obtained at this Google fonts page.
>
> Because of the many possible variations in font display characteristics in HTML
> and CSS, MDL typography aims to provide simple and intuitive styles that use the
> Roboto font and produce visually attractive and internally consistent text
> results. See the typography component's [Material Design specifications](https://material.google.com/style/typography.html) page for
> details.
See also the
[Material Design Specification](https://www.google.com/design/spec/style/typography.html).
Refer to [this site](http://debois.github.io/elm-mdl/#typography)
for a live demo.
# Styles
The [Material Design
specification](https://material.google.com/style/typography.html#typography-other-typographic-guidelines)
stipulates that typography has particular color contrast. The styles in this
file gives correct contrast for black and white only; for colored typography or backgrounds, use the
`contrast` option to regulate color contrast.
@docs display1
@docs display2
@docs display3
@docs display4
@docs body1
@docs body2
@docs headline
@docs title
@docs subhead
@docs caption
@docs button
@docs menu
## Color contrast
@docs contrast
# Transforms
@docs capitalize
@docs lowercase
@docs uppercase
# Alignment
@docs left
@docs center
@docs right
@docs justify
# Utility
@docs nowrap
@docs tableStriped
-}
import Material.Options as Options exposing (cs, css)
{- The material specification requires many typographic elements to have
particular color contrasts. MDL implements this by having both a default style
(e.g., `mdl-typography--display-1`) and one with reduced contrast adhering to
the spec when drawn black on white (e.g.,
`mdl-typography--display-1-color-contrast`). The latter are implemented
exclusively by setting opacity (e.g., `opacity: 0.54`).
We achieve a nicer API not duplicating every stylename by inversion: The
default `display1` style is drawn at `opacity: 0.54`; you can override it by
adding a `contrast` style.
-}
-- Styles
{-| Regular 34px
-}
display1 : Options.Property c m
display1 =
cs "mdl-typography--display-1-color-contrast"
{-| Regular 45px
-}
display2 : Options.Property c m
display2 =
cs "mdl-typography--display-2-color-contrast"
{-| Regular 56px
-}
display3 : Options.Property c m
display3 =
cs "mdl-typography--display-3-color-contrast"
{-| Light 112px
-}
display4 : Options.Property c m
display4 =
cs "mdl-typography--display-4-color-contrast"
{-| Regular 24px
-}
headline : Options.Property c m
headline =
cs "mdl-typography--headline-color-contrast"
{-| Medium 20px
-}
title : Options.Property c m
title =
cs "mdl-typography--title-color-contrast"
{-| Regular 16px (Device), Regular 15px (Desktop)
-}
subhead : Options.Property c m
subhead =
cs "mdl-typography--subhead-color-contrast"
{-| Regular 14px (Device), Regular 13px (Desktop)
-}
body1 : Options.Property c m
body1 =
cs "mdl-typography--body-1-force-preferred-font-color-contrast"
{-| Medium 14px (Device), Medium 13px (Desktop)
-}
body2 : Options.Property c m
body2 =
cs "mdl-typography--body-2-force-preferred-font-color-contrast"
{-| Regular 12px
-}
caption : Options.Property c m
caption =
cs "mdl-typography--caption-force-preferred-font-color-contrast"
{-| Medium (All Caps) 14px
-}
button : Options.Property c m
button =
cs "mdl-typography--button-color-contrast"
{-| Medium 14px (Device), Medium 13px (Desktop)
-}
menu : Options.Property c m
menu =
cs "mdl-typography--menu-color-contrast"
-- Modifiers
{-| Modify contrast of typography. Implemented under the hood by setting CSS
`opacity`.
-}
contrast : Float -> Options.Property c m
contrast x =
css "opacity" (toString x)
-- Utility
{-| No wrap text
-}
nowrap : Options.Property c m
nowrap =
cs "mdl-typography--text-nowrap"
{-| Striped table
-}
tableStriped : Options.Property c m
tableStriped =
cs "mdl-typography--table-striped"
-- Align
{-| Center aligned text
-}
center : Options.Property c m
center =
cs "mdl-typography--text-center"
{-| Left aligned text
-}
left : Options.Property c m
left =
cs "mdl-typography--text-left"
{-| Right aligned text
-}
right : Options.Property c m
right =
cs "mdl-typography--text-right"
{-| Justified text
-}
justify : Options.Property c m
justify =
cs "mdl-typography--text-justify"
-- Transform
{-| Capitalized text
-}
capitalize : Options.Property c m
capitalize =
cs "mdl-typography--text-capitalize"
{-| Lowercased text
-}
lowercase : Options.Property c m
lowercase =
cs "mdl-typography--text-lowercase"
{-| Uppercased text
-}
uppercase : Options.Property c m
uppercase =
cs "mdl-typography--text-uppercase"