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.

.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 @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;
  }
.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;
  }
.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.

.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.

.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.

.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:

.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.

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

Font style mixin variables

    
Mixin variable Default value Allowable 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:

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

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

Reset list styles variables

    
Mixin variable Default value Allowable 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:

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

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

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.

.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
.lib-typography__base();

Headings typography mixin

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

.lib-typography-headings();

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.

.lib-typography-lists();

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.

.lib-typography-code();

Typography blockquote

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

.lib-typography-blockquote();