# Typogrphy

Magento UI library provides mixins for typography styling. To configure typography, global variables from _variables.less file are used.

To apply all Magento UI library typography, use the `.lib-typography-all()` mixin. It accumulates all typography mixins and sets all typography for the theme. This mixin is included in the `.lib-magento-reset()` mixin. So, if you use this reset, you don't have to call basic typography separately. Also, you don't have to apply this mixin to any class, just call it globally.

Additionally, Magento UI library provides number of mixins to customize typography parameters separately.

<h1>HTML Ipsum Presents <small>Sub text</small></h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat <kbd>Keyboard input</kbd> vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> <a href=#"> Aenean fermentum, elit eget tincidunt condimentum</a> </blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <pre><code> #header h1 a { display: block; width: 300px; height: 80px; } </code></pre> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <h4>Header Level 4</h4> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ol> </li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <h5>Header Level 5</h5> <dl><dt>Definition list</dt><dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd><dt>Lorem ipsum dolor sit amet</dt><dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd></dl> <h6>Header Level 6</h6>

    .lib-typography-all();

# Typography variables

                Mixin variable
                Default value
                Comment

                Predefined font family and font colors

                @font-family__sans-serif
                'Helvetica Neue', Helvetica, Arial, sans-serif
                Sans-serif font family

                @font-family__serif
                Georgia, 'Times New Roman', Times, serif
                Serif font family

                @font-family__monospace
                Menlo, Monaco, Consolas, 'Courier New', monospace
                Monospace font family

                @font-path
                "../../fonts/"
                Path to custom font

                @primary__color
                #555
                Primary color

                @primary__color__dark
                darken(@primary__color, 35%) // #000
                Dark primary color

                @primary__color__darker
                darken(@primary__color, 13.5%) // #111
                Darker primary color

                @primary__color__lighter
                lighten(@primary__color, 23%) // #7d7d7d
                Lighter primary color

                @primary__color__light
                lighten(@primary__color, 45%) // #a6a6a6
                Light primary color

                @border-color__base
                darken(@page__background-color, 18%)
                Base border color

                @border-width__base
                1px
                Base border width

                Fonts settings

                @font-family__base
                @font-family__sans-serif
                Basic font family

                @root__font-size
                62.5%
                Setting font-size for HTML tag, use % units

                @font-size-ratio__base
                1.4
                Defines ratio between root font size and base font size

                @font-size__base
                unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px)
                Base font size value in px

                @font-size__xl
                ceil(1.5 * @font-size__base) // 21
                Extra large font size

                @font-size__l
                ceil(1.25 * @font-size__base) // 18
                Large font size

                @font-size__s
                ceil(.85 * @font-size__base) // 12
                Small font size

                @font-size__xs
                floor(.75 * @font-size__base) // 11
                Extra small font size

                @font-weight__regular
                400
                Basic font weight

                @font-weight__light
                200
                Light font weight

                @font-weight__semibold
                600
                Semibold font weight

                @font-weight__bold
                700
                Bold font weight

                @font-style__base
                normal
                Font style

                @font-style__emphasis
                italic
                Emphasis font style

                @line-height__base
                1.428571429
                Base line height

                @line-height__computed
                floor(@font-size__base * @line-height__base)
                Computed line height depending on base font size

                @line-height__l
                1.5
                Large line height

                @line-height__s
                1.33
                Small line height

                @text__color
                @primary__color
                Primary text color

                @text__color__intense
                @primary__color__darker
                Darker text color

                @text__color__muted
                @primary__color__lighter
                Lighter text color

                @indent__base
                @line-height__computed // 20px
                Base text ident (20px)

                @indent__xl
                @line-height__computed * 2 // 40px
                Extra large text ident (40px)

                @indent__l
                @line-height__computed * 1.5 // 30px
                Large text ident (30px)

                @indent__m
                @indent__base * 1.25 // 25px
                Extra large text ident (25px)

                @indent__s
                @line-height__computed / 2 //10px
                Small text ident (10px)

                @indent__xs
                @line-height__computed / 4 // 5px
                Extra small text ident (5px)

                Links

                @link__color
                #1979c3
                Links color

                @link__text-decoration
                none
                Links text decoration

                @link__visited__color
                #800080
                Visited links color

                @link__visited__text-decoration
                none
                Visited links text decoration

                @link__hover__color
                #006bb4
                Hovered links color

                @link__hover__text-decoration
                underline
                Hovered links text decoration

                @link__active__color
                #ff5501
                Active links color

                @link__active__text-decoration
                underline
                Active links text decoration

                Lists

                @list__color__base
                false
                List text color

                @list__font-size__base
                @font-size__base
                List font size

                @list__margin-top
                0
                List margin top

                @list__margin-bottom
                @indent__m
                List margin bottom

                @list-item__margin-top
                0
                List item margin top

                @list-item__margin-bottom
                @indent__s
                List item margin bottom

                Definition list

                @dl__margin-top
                0
                Definition list margin top

                @dl__margin-bottom
                @indent__base
                Definition list margin bottom

                @dt__margin-top
                0
                Description term margin top

                @dt__margin-bottom
                @indent__xs
                Description term margin bottom

                @dt__font-weight
                @font-weight__bold
                Description term

                @dd__margin-top
                0
                Description margin top

                @dd__margin-bottom
                @indent__s
                Description margin bottom

                Paragraphs

                @p__margin-top
                0
                Paragraph margin top

                @p__margin-bottom
                @indent__s
                Paragraph margin bottom

                Headings

                @heading__font-family__base
                false
                Heading base font family

                @heading__font-style__base
                false
                Heading base font style

                @heading__font-weight__base
                @font-weight__light
                Heading base font weight

                @heading__line-height__base
                1.1
                Heading base line height

                @heading__color__base
                false
                Heading base color

                @heading__margin-top__base
                @indent__base
                Heading base margin top

                @heading__margin-bottom__base
                @indent__base
                Heading base margin bottom

                H1

                @h1__font-size
                ceil((@font-size__base * 2.85)) // 40px
                H1 font size

                @h1__font-color
                @heading__color__base
                H1 color

                @h1__font-family
                @heading__font-family__base
                H1 font family

                @h1__font-weight
                @heading__font-weight__base
                H1 font weight

                @h1__font-style
                @heading__font-style__base
                H1 font style

                @h1__line-height
                @heading__line-height__base
                H1 line height

                @h1__margin-top
                0
                H1 margin top

                @h1__margin-bottom
                @heading__margin-bottom__base
                H1 margin bottom

                H2

                @h2__font-size
                ceil((@font-size__base * 1.85)) // 26px
                H2 font size

                @h2__font-color
                @heading__color__base
                H2 color

                @h2__font-family
                @heading__font-family__base
                H2 font family

                @h2__font-weight
                @heading__font-weight__base
                H2 font weight

                @h2__font-style
                @heading__font-style__base
                H2 font style

                @h2__line-height
                @heading__line-height__base
                H2 line height

                @h2__margin-top
                @indent__m
                H2 margin top

                @h2__margin-bottom
                @heading__margin-bottom__base
                H2 margin bottom

                H3

                @h3__font-size
                ceil((@font-size__base * 1.28)) // 18px
                H3 font size

                @h3__font-color
                @heading__color__base
                H3 color

                @h3__font-family
                @heading__font-family__base
                H3 font family

                @h3__font-weight
                @heading__font-weight__base
                H3 font weight

                @h3__font-style
                @heading__font-style__base
                H3 font style

                @h3__line-height
                @heading__line-height__base
                H3 line height

                @h3__margin-top
                @indent__base * .75
                H3 margin top

                @h3__margin-bottom
                @indent__s
                H3 margin bottom

                H4

                @h4__font-size
                @font-size__base // 14px
                H4 font size

                @h4__font-color
                @heading__color__base
                H4 color

                @h4__font-family
                @heading__font-family__base
                H4 font family

                @h4__font-weight
                @font-weight__bold
                H4 font weight

                @h4__font-style
                @heading__font-style__base
                H4 font style

                @h4__line-height
                @heading__line-height__base
                H4 line height

                @h4__margin-top
                @heading__margin-top__base
                H4 margin top

                @h4__margin-bottom
                @heading__margin-bottom__base
                H4 margin bottom

                H5

                @h5__font-size
                ceil((@font-size__base * .85)) // 12px
                H5 font size

                @h5__font-color
                @heading__color__base
                H5 color

                @h5__font-family
                @heading__font-family__base
                H5 font family

                @h5__font-weight
                @font-weight__bold
                H5 font weight

                @h5__font-style
                @heading__font-style__base
                H5 font style

                @h5__line-height
                @heading__line-height__base
                H5 line height

                @h5__margin-top
                @heading__margin-top__base
                H5 margin top

                @h5__margin-bottom
                @heading__margin-bottom__base
                H5 margin bottom

                H6

                @h6__font-size
                ceil((@font-size__base * .7)) // 10px
                H6 font size

                @h6__font-color
                @heading__color__base
                H6 color

                @h6__font-family
                @heading__font-family__base
                H6 font family

                @h6__font-weight
                @heading__font-weight__base
                H6 font weight

                @h6__font-style
                @heading__font-style__base
                H6 font style

                @h6__line-height
                @heading__line-height__base
                H6 line height

                @h6__margin-top
                @heading__margin-top__base
                H6 margin top

                @h6__margin-bottom
                @heading__margin-bottom__base
                H6 margin bottom

                <small> tags and tags with class .small placed in H1-H6 headings

                @heading__small-color
                @primary__color
                <small> and .small heading element color

                @heading__small-line-height
                1
                <small> and .small heading element line height

                @heading__small-size
                (@font-size__xs/@font-size__base) * 100%
                <small> and .small heading element font size

                Focus

                @focus__box-shadow
                0 0 3px 1px @focus__color
                Focused element highlight

                Code blocks

                @code__background-color
                @panel__background-color
                Code block background

                @code__color
                @primary__color__darker
                Code text color

                @code__font-size
                @font-size__s
                Code font size

                @code__padding
                2px 4px
                Code padding

                @pre__background-color
                @primary__color__light
                Preformatted text background color

                @pre__border-color
                @border-color__base
                Preformatted text border color

                @pre__border-width
                @border-width__base
                Preformatted text border width

                @pre__color
                @primary__color__darker
                Preformatted text color

                @kbd__background-color
                @panel__background-color
                Keyboard input background

                @kbd__color
                @primary__color__darker
                Keyboard input text color

                Blockquote

                @blockquote__border-color
                @border-color__base
                Blockquote border color

                @blockquote__border-width
                0
                Blockquote border width

                @blockquote__content-before
                '\2014 \00A0'
                "-" and space symbols

                @blockquote__font-size
                @font-size__base
                Blockquote font size

                @blockquote__font-style
                @font-style__emphasis
                Blockquote font style

                @blockquote__margin
                 0 0 @indent__base @indent__xl
                Blockquote margin

                @blockquote__padding
                0
                Blockquote padding

                @blockquote-small__color
                @primary__color
                Blockquote <small> and .small text color

                @blockquote-small__font-size
                @font-size__xs
                Blockquote <small> and .small font size

                Cite

                @cite__font-style
                @font-style__base
                Cite font style

                Other elements

                @hr__border-color
                @border-color__base
                HR border color

                @hr__border-style
                solid
                HR border style

                @hr__border-width
                @border-width__base
                HR border width

                @mark__color
                @primary__color__dark
                <mark> color

                @mark__background-color
                @panel__background-color
                <mark> background

                @abbr__border-color
                @border-color__base
                <abbr> border color

                @disable-filters
                false
                Disable filters output in css

# Font-size mixin

The `.lib-font-size()` mixin calculates font-size in rem with fallback in px

Less code:

      .example-typography-1 {
          .lib-font-size(25);
      }

CSS result:

      .example-typography-1 {
          font-size: 25px;
          font-size: 2.5rem;
      }

<p class="example">HTML Ipsum Presents</p>

    .example {
        .lib-font-size(25);
    }

# Line-height mixin

The `.lib-line-height()` mixin calculates line-height in rem with fallback in px

Less code:

      .example-line-height {
          .lib-line-height(30);
      }

CSS result:

      .example-line-height {
          line-height: 30px;
          line-height: 3rem;
      }

<p class="example-line-height">HTML Ipsum Presents</p>

    .example-line-height {
        .lib-line-height(30);
    }

# Word breaking mixin

The `.lib-wrap-words()` mixin specifies word breaking rules. Background and block width are added to display this example.

<p class="example-word-wrap"> Supercalifragilisticexpialidocious This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. </p>

    .example-word-wrap {
        .lib-wrap-words();
        background: #ccc;
        width: 120px;
    }

# Font face mixin

The `.lib-font-face()` mixin is used to set up custom font.

        .lib-font-face(
            @family-name,
            @font-path,
            @font-weight: normal,
            @font-style: normal
        ) {
            @font-face {
                font-family: @family-name;
                src: url('@{font-path}.eot');
                src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
                url('@{font-path}.woff2') format('woff2'),
                url('@{font-path}.woff') format('woff'),
                url('@{font-path}.ttf') format('truetype'),
                url('@{font-path}.svg#@{family-name}') format('svg');
                font-weight: @font-weight;
                font-style: @font-style;
            }
        }

# Text overflow mixin

The `.lib-text-overflow()` mixin is used to add ellipsis ("...") when a text overflows the containing element. Background and block width are added to display this example.

<p class="example-text-overflow"> Supercalifragilisticexpialidocious </p>

    .example-text-overflow {
        .lib-text-overflow();
        background: #ccc;
        width: 120px;
    }

# Text hide

The `.lib-text-hide()` mixin hides a text of the element the mixin is applyed to.

<p class="example-text-hide"> Text to hide </p>

    .example-text-hide {
        .lib-text-hide();
    }

# Hyphens

The `.lib-hyphens()` mixin sets hyphens CSS property with browser prefixes. It accepts the `@mode` variable with following accessible values:

      none
      manual
      auto

Here are two examples with different setup:

<p class="example-hyphens" style="width:50px;" lang="en"> An extremely long English word </p> <p class="example-hyphens-none" style="width:50px;" lang="en"> An extremely long English word </p>

    .example-hyphens {
        .lib-hyphens();
    }

    .example-hyphens-none {
        .lib-hyphens(none);
    }

# Font style and color

The `.lib-typography()` mixin is used to set font style and font color of the element.

<span class="example-typography"> An example of using .lib-typography() mixin </span>

    .example-typography {
        .lib-typography(30, #fc0, @font-family__monospace, 500, 1.2, italic);
    }

# Font style mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_color
                @text__color
                '' | false | value
                Text color

                @_font-size
                @font-size__base
                '' | false | value
                Font size

                @_font-family
                @font-family__base
                '' | false | value
                Font family

                @_font-weight
                @font-weight__regular
                '' | false | value
                Font weight

                @_font-style
                @font-style__base
                '' | false | value
                Font style

                @_line-height
                @line-height__base
                '' | false | value
                Line height

# Reset list styles

The `.lib-list-reset-styles()` mixin resets browser default list style and sets its margins and paddings.

Default list style:

<ul class="example-list"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

List with `.lib-list-reset-styles()` mixin applied:

<ul class="example-list-reset-styles"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

    .example-list-reset-styles {
        .lib-list-reset-styles();
    }

# Reset list styles variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_margin
                0
                '' | false | value
                List margin

                @_padding
                0
                '' | false | value
                List padding

# Inline-block list item styling

The `.lib-list-inline()` mixin resets browser default list style and sets its list items display property to `display: inline-block`.

Default list style:

<ul class="example-list"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

List with `.lib-list-inline()` mixin applied:

<ul class="example-list-inline"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul>

    .example-list-inline {
        .lib-list-inline();
    }

# Link styling mixin

The `.lib-link()` mixin is used to set styles for all links states.

<a href="#" class="example-link-default">Link with global variables customization</a> <a href="#" class="example-link">Link with custom styles</a>

    .example-link-default {
        .lib-link();
    }

    .example-link {
        .lib-link(@_link-color: green, @_link-color-hover: orange, @_link-text-decoration-hover: none );
    }

# Link styling mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_link-color
                #1979c3
                '' | false | value
                Default link color

                @_link-text-decoration
                underline
                '' | false | value
                Default link text decoration

                @_link-color-visited
                #800080
                '' | false | value
                Visited link color

                @_link-text-decoration-visited
                underline
                '' | false | value
                Visited link text decoration

                @_link-color-hover
                #006bb4
                '' | false | value
                Hovered link color

                @_link-text-decoration-hover
                underline
                '' | false | value
                Hovered link text decoration

                @_link-color-active
                #ff5501
                '' | false | value
                Active link color

                @_link-text-decoration-active
                underline
                '' | false | value
                Active link text decoration

# Heading styling mixin

The `.lib-heading()` mixin is used to set heading styles to an element. To use this mixin, set the type of heading that you want to inherit styles from. The mixin uses global heading variables.

<h1 class="example-heading">Example heading</h1> <h2 class="example-heading-2">Example heading</h2>

    .example-heading {
        .lib-heading(h1);
    }
    .example-heading-2 {
        .lib-heading(h2);
    }

# Base typography mixins

Magento UI library offers mixins to styles elements sets.

The `.lib-typography__base()` mixin applyes basic styles from `_variables.less` to the following elements:

      html
      body
      p
      abbr
      b
      strong
      em
      i
      mark
      small
      .small
      hr
      sub,
      sup
      dfn

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac <small>turpis</small> egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, <em>tempor</em> sit amet, ante. Donec <sub>eu</sub> libero sit amet quam egestas semper. <code>Aenean ultricies</code> mi vitae <sup>est</sup>. Mauris placerat eleifend leo. <abbr>Quisque</abbr> sit amet est et sapien <mark>ullamcorper</mark> pharetra.</p> <hr> <p><dfn>Pellentesque</dfn> habitant <i>morbi</i> tristique <b>senectus</b> et netus et malesuada fames ac turpis egestas.</p>

    .lib-typography__base();

# Base typography mixin variables

                Mixin variable
                Global variable
                Default value
                Allowed values
                Comment

                @_abbr-border-color
                @abbr__border-color
                @border-color__base
                '' | false | value
                <abbr> border color

                @_dfn-font-style
                @font-style__emphasis
                italic
                '' | false | value
                <dfn> font style

                @_emphasis-font-style
                @font-style__emphasis
                italic
                '' | false | value
                <em> font style

                @_hr-border-color
                @hr__border-color
                @border-color__base
                '' | false | value
                HR border color

                @_hr-border-style
                @hr__border-style
                solid
                '' | false | value
                HR border style

                @_hr-border-width
                @hr__border-width
                @border-width__base
                '' | false | value
                HR border width

                @_hr-margin-bottom
                @line-height__computed
                floor(@font-size__base * @line-height__base)
                '' | false | value
                HR margin bottom

                @_hr-margin-top
                @line-height__computed
                floor(@font-size__base * @line-height__base)
                '' | false | value
                HR margin top

                @_mark-background-color
                @mark__background-color
                @panel__background-color
                '' | false | value
                <mark> background color

                @_mark-color
                @mark__color
                @primary__color__dark
                '' | false | value
                <mark> color

                @_p-margin-bottom
                @p__margin-bottom
                @indent__s
                '' | false | value
                Paragraph margin bottom

                @_p-margin-top
                @p__margin-top
                0
                '' | false | value
                Paragraph margin top

                @_root-font-size
                @root__font-size
                62.5%
                '' | false | value
                Setting font-size for HTML tag

                @_small-font-size
                @font-size__s
                ceil(.85 * @font-size__base) // 12
                '' | false | value
                <small> tag font size

                @_strong-font-weight
                @font-weight__bold
                700
                '' | false | value
                <strong> tag font weight

                @_sub-sup-font-size
                -
                (@font-size__xs / @font-size__base) * 100%
                '' | false | value
                <sup> an <sup> tags font size

# Headings typography mixin

The `.lib-typography-headings()` mixin is used to style all H1-H6 headings. This mixin uses settings from global variables list.

<h1>Header Level 1</h1> <h2>Header Level 2</h2> <h3>Header Level 3</h3> <h4>Header Level 4</h4> <h5>Header Level 5</h5> <h6>Header Level 2</h6>

    .lib-typography-headings();

# Headings typography mixin variables

                Mixin variable
                Global variable
                Default value
                Allowed values
                Comment

                @_heading-small-size
                @heading__small-size
                (@font-size__xs/@font-size__base) * 100%
                '' | false | value
                <small> and .small heading element font-size

                @_heading-small-color
                @heading__small-color
                @primary__color
                '' | false | value
                <small> and .small heading element color

                @_heading-small-line-height
                @heading__small-line-height
                1
                '' | false | value
                <small> and .small heading element line height

# Typography links mixin

The `.lib-typography-links()` mixin is used to apply default styles to all `<a>` elements and elements with `class="alink"`. This mixin uses settings from global variables list.

<a href="#">Link with global variables customization</a> <span class="alink">Span styled as a link</span>

    .lib-typography-links();

# Typography lists mixin

The `.lib-typography-lists()` mixin is used to apply styles to all ordered, unordered, and definition lists. This mixin uses settings from global variables list.

<ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ol> </li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <dl> <dt>Definition list</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd> <dt>Lorem ipsum dolor sit amet</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd> </dl>

    .lib-typography-lists();

# Typography lists mixin variables

                Mixin variable
                Global variable
                Default value
                Allowed values
                Comment

                @_list-margin-top
                @list__margin-top
                0
                '' | false | value
                List margin top

                @_list-margin-bottom
                @list__margin-bottom
                @indent__m
                '' | false | value
                List margin bottom

                @_list-item-margin-top
                @list-item__margin-top
                0
                '' | false | value
                List item margin top

                @_list-item-margin-bottom
                @list-item__margin-bottom
                @indent__s
                '' | false | value
                List item margin bottom

                @_dl-margin-bottom
                @dl__margin-bottom
                @indent__base
                '' | false | value
                Definition list margin bottom

                @_dl-margin-top
                @dl__margin-top
                0
                '' | false | value
                Definition list margin top

                @_dt-font-weight
                @dt__font-weight
                @font-weight__bold
                '' | false | value
                Description term font weight

                @_dt-margin-bottom
                @dt__margin-bottom
                @indent__xs
                '' | false | value
                Description term margin bottom

                @_dt-margin-top
                @dt__margin-top
                0
                '' | false | value
                Description term margin top

                @_dd-margin-bottom
                @dd__margin-bottom
                @indent__s
                '' | false | value
                Description margin bottom

                @_dd-margin-top
                @dd__margin-top
                0
                '' | false | value
                Description margin top

# Typography code elements mixin

`.lib-typography-code()` mixin is used to apply styles to the following code elements:

      code
      kbd
      pre
      samp

This mixin uses settings from global variables list.

<p>Lorem ipsum dolor sit amet, <samp>consectetur adipiscing elit<samp>. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</p> <pre><code> #header h1 a { display: block; width: 300px; height: 80px; } </code></pre> <p>Vestibulum tortor quam, feugiat <kbd>Keyboard input</kbd> vitae, ultricies eget, tempor sit amet, ante.</p>

    .lib-typography-code();

# Typography code mixin variables

                Mixin variable
                Global variable
                Default value
                Allowed values
                Comment

                @_font-family-monospace
                @font-family__monospace
                Menlo, Monaco, Consolas, 'Courier New', monospace
                '' | false | value
                Monospace font family

                @_code-background-color
                @code__background-color
                @panel__background-color
                '' | false | value
                Code block background

                @_code-color
                @code__color
                @primary__color__darker
                '' | false | value
                Code text color

                @_code-padding
                @code__padding
                2px 4px
                '' | false | value
                Code block padding

                @_code-font-size
                @code__font-size
                @font-size__s
                '' | false | value
                Code block font size

                @_kbd-background-color
                @kbd__background-color
                @panel__background-color
                '' | false | value
                Keyboard input background

                @_kbd-color
                @kbd__color
                @primary__color__darker
                '' | false | value
                Keyboard input text color

                @_kbd-padding
                @code__padding
                2px 4px
                '' | false | value
                Keyboard input padding

                @_kbd-font-size
                @code__font-size
                @font-size__s
                '' | false | value
                Keyboard input font size

                @_pre-background-color
                @pre__background-color
                @primary__color__light
                '' | false | value
                Preformatted text background color

                @_pre-border-width
                @pre__border-width
                @border-width__base
                '' | false | value
                Preformatted text border width

                @_pre-border-color
                @pre__border-color
                @border-color__base
                '' | false | value
                Preformatted text border color

                @_pre-color
                @pre__color
                @primary__color__darker
                '' | false | value
                Text color of preformatted text

                @_pre-line-height
                @line-height__base
                1.428571429
                '' | false | value
                Preformatted text line height

                @_pre-margin
                -
                0 0 @indent__s
                '' | false | value
                Preformatted text margin

                @_pre-padding
                -
                @indent__s
                '' | false | value
                Preformatted text padding

                @_pre-font-size
                @code__font-size
                @font-size__s
                '' | false | value
                Preformatted text font size

# Typography blockquote

The `.lib-typography-blockquote()` mixin is used to apply styles to blockquote elements. This mixin uses settings from global variables list.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> <a href="#">Author quotes</a> </blockquote>

    .lib-typography-blockquote();

# Typography blockquote mixin variables

                Mixin variable
                Global variable
                Default value
                Allowed values
                Comment

                @_blockquote-border-width
                @blockquote__border-width
                0
                '' | false | value
                Blockquote border width

                @_blockquote-border-color
                @blockquote__border-color
                @border-color__base
                '' | false | value
                Blockquote border color

                @_blockquote-margin
                @blockquote__margin
                0 0 @indent__base @indent__xl
                '' | false | value
                Blockquote margin

                @_blockquote-padding
                @blockquote__padding
                0
                '' | false | value
                Blockquote padding

                @_blockquote-font-size
                @blockquote__font-size
                @font-size__base
                '' | false | value
                Blockquote font size

                @_blockquote-font-style
                @blockquote__font-style
                @font-style__emphasis
                '' | false | value
                Blockquote font style

                @_blockquote-small-color
                @blockquote-small__color
                @primary__color
                '' | false | value
                Blockquote <small> and .small text color

                @_blockquote-small-line-height
                @line-height__base
                1.428571429
                '' | false | value
                Blockquote <small> and .small line height

                @_blockquote-small-font-size
                @blockquote-small__font-size
                @font-size__xs
                '' | false | value
                Blockquote <small> and .small text font size

                @_blockquote-small-before-content
                @blockquote__content-before
                '\2014 \00A0'
                '' | false | value
                Blockquote <small> and .small before pseudo element content

                @_blockquote-cite
                @cite__font-style
                @font-style__base
                '' | false | value
                Blockquote cite font style

                @_cite
                @cite__font-style
                @font-style__base
                '' | false | value
                Cite font style