Typography

Family

All Morningstar products and communications use Univers Next for Morningstar, our brand typeface created in collaboration with Monotype.

Symbols Font

Morningstar Symbols is a font used to incorporate specialized characters and symbols into products. Recently, some symbols have also been made available within the Design System’s Icons. Until all icons are available in the System, teams may continue to use the Symbols font.

Contact the Brand team for more information and to obtain the typeface.

Weight

MDS provides four font weights to establish hierarchy, ensure legibility, and create harmony on-screen.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Aa
font-weight: $mds-font-weight-thin;
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Aa
font-weight: $mds-font-weight-light;
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Aa
font-weight: $mds-font-weight-regular;
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Aa
font-weight: $mds-font-weight-bold;

Hierarchy

Hierarchy is defined by the differences in size and weight of textual elements on the page. A successful hierarchy both creates points of focus and outlines the content of a page in an easily scannable structure.

Headings

Headings are available in six different sizes. To create an optical balance between the six levels, headings are set in two weights: Condensed Thin and Condensed Light. All headings use a line height of 1.2 relative to the font size.

What Role Should Taxes Play in Your Relocation Decision?
  • 45px
  • 1.2 (55px)
  • 200
@include level-1-heading();
What Role Should Taxes Play in Your Relocation Decision?
  • 32px
  • 1.2 (38px)
  • 200
@include level-2-heading();
What Role Should Taxes Play in Your Relocation Decision?
  • 28px
  • 1.2 (34px)
  • 200
@include level-3-heading();
What Role Should Taxes Play in Your Relocation Decision?
  • 23px
  • 1.2 (28px)
  • 300
@include level-4-heading();
What Role Should Taxes Play in Your Relocation Decision?
  • 20px
  • 1.2 (25px)
  • 300
@include level-5-heading();
What Role Should Taxes Play in Your Relocation Decision?
  • 18px
  • 1.2 (22px)
  • 300
@include level-6-heading();
Stock Strategist
  • 10px
  • 1.2 (12px)
  • 600
  • 1.67px
  • Uppercase
@include eyebrow-heading();

Body Text

Body text is available in three different sizes. Use body text to present the bulk of a page’s content. All body text uses a line height of 1.375 relative to the font size.

Fund fees command a lot of attention, and rightfully so. They are, after all, the most reliable estimator of a fund’s return prospects. As Vanguard founder Jack Bogle has said time and again, “In investing, you get what you don’t pay for.” But that doesn’t mean investors should select funds based solely on fees. There are numerous factors that should be taken into account when choosing funds.
  • 20px
  • 1.375 (28px)
  • 300
  • 550px
@include mds-body-text-l();
Fund fees command a lot of attention, and rightfully so. They are, after all, the most reliable estimator of a fund’s return prospects. As Vanguard founder Jack Bogle has said time and again, “In investing, you get what you don’t pay for.” But that doesn’t mean investors should select funds based solely on fees. There are numerous factors that should be taken into account when choosing funds.
  • 16px
  • 1.375 (22px)
  • 300
  • 450px
@include mds-body-text-m();
Fund fees command a lot of attention, and rightfully so. They are, after all, the most reliable estimator of a fund’s return prospects. As Vanguard founder Jack Bogle has said time and again, “In investing, you get what you don’t pay for.” But that doesn’t mean investors should select funds based solely on fees. There are numerous factors that should be taken into account when choosing funds.
  • 14px
  • 1.375 (19px)
  • 400
  • 400px
@include mds-body-text-s();

Mixins

Mixins are available for headings and body text to quickly apply color (across multiple background containers), font-weight, font-size, and line-height properties to CSS declarations within your own products.

For example, applying the level-3-heading() mixin to an element with the .product_element class:

.product_element {
    @include level-3-heading();
}

will result in the following CSS:

.product_element {
    color: #1e1e1e;
    font-size: 28px;
    font-weight: 200;
    line-height: 1.2;
}

.mds-container--default .product_element,
.mds-container--light .product_element {
    color: #1e1e1e;
}

.mds-container--dark .product_element,
.mds-container--black .product_element {
    color: #e5e5e5;
}

Size

Variables

Variable Name Value
$mds-font-size-base 16px
$mds-font-size-default 16px
$mds-font-size-xs 10px
$mds-font-size-s 14px
$mds-font-size-m 16px
$mds-font-size-l 20px
$mds-font-size-heading-level-1 45px
$mds-font-size-heading-level-2 32px
$mds-font-size-heading-level-3 28px
$mds-font-size-heading-level-4 23px
$mds-font-size-heading-level-5 20px
$mds-font-size-heading-level-6 18px
$mds-font-size-code 12px
  • Use $mds-font-size-xs only for eyebrow headings.

Legibility

Legibility is a core tenant of the MDS typographic system. By following the rules below, we ensure consistency and readability across all typographic variations.

Line Height

Providing an adequate amount of space between lines is critical to the legibility of text. Using relative line heights, MDS ensures consistent spacing of all headings and body-text sizes. All headings use a relative line height of 1.2-times the font size. All body text uses a relative line height of 1.375-times the font size.

Line Length

Line length, also know as measure, is the number of characters contained in a line of text. To ensure readability, line length should fall between 50 and 75 characters wide, including spaces. Lines narrower than 50 characters require the eye to jump to the next line too frequently, breaking the reader’s rhythm. Lines wider than 75 characters make it difficult to continue on to the correct line in a large body of text.

do display a line length between 50 and 75 characters wide.

Do display a line length between 50 and 75 characters wide.

dont display a line length less than 50 characters wide.

Don't display a line length less than 50 characters wide.

dont display a line length more than 75 characters wide.

Don't display a line length more than 75 characters wide.

©2017 Morningstar, Inc. All rights reserved. Terms of Use