Typography

Typography is a critical element to develop content hierarchy, organization, and alignment.

Font

The main typeface used by Calcite Design System is Avenir Next. The remaining typeface font stack includes the system default and sans-serif fonts.

You may also replace the font with the font-family CSS property should the default typeface not meet your application's needs.

1
2
3
body {
  font-family: "Roboto";
}

Colors

Consistent use of a limited set of colors can enforce hierarchy within your application.

Size & weight

Type pairing

Code face

Rather than load a specific font for code blocks, the Calcite Design System is designed to use a system font. For users that have Consolas installed, it is the preferred face for code blocks. Designed by Microsoft's Lucas DeGroot, Consolas is a clean, readable, and simple monospace face for documenting code blocks.

1
2
3
4
5
6
7
<nav class="breadcrumbs">
  <a href="#" class="crumb">Thing</a>
  <span class="crumb">Thing</span>
  <a href="#" class="crumb">Thing</a>
  <a href="#" class="crumb">Thing</a>
  <a href="#" class="crumb is-active">Current</a>
</nav>

Type

To use type effectively set line height, size, and spacing to inform hierarchy and order. Well balanced interfaces rely on clear typography. Using lines, borders, and panels to separate content can lead to overly dense or "heavy" interfaces.

Do use text size, space, grayscale/color, and weight to structure page content hierarchy.

Avoid relying on hr, underlines, or borders to create hierarchy within your text.

Hierarchy

Set the hierarchy of your content to dictate the size and presentation of your text. Effective use of labels, title, and body copy can help users quickly ascertain what is important.

Do use adequate line height, text size and space to infer hierarchy.

Avoid using the same line height, size and spacing for everything.

Brevity

Writing concise, easily readable copy makes your application easier to understand for users. Avoid using lengthy or overly technical text for prompts or actions.

Do prefer brevity over verbosity.

Avoid presenting users with hard to decipher or complex copy.

Font types for different languages

The main typeface used by Calcite Design System is Avenir Next. Any languages that use the Latin, Cyrillic, or Greek alphabets should render well with the default type. However, it does not contain characters required by several languages such as Arabic, Chinese, and Vietnamese. Most of the languages not covered by Avenir Next will be set by the browser's default font, or if not set to a San Serif font, so it will be distinct enough for your users.

The exception is Vietnamese, which uses standard Latin characters in addition to glyphs from the Latin Extended Additional set which are missing. As a result the missing characters are rendered in a different font, which looks like a bug to the user. For this reason, Lucide Grande is set as the font family for pages in Vietnamese where the html document's lang attribute is set to vi.

Explore more with Calcite Design System's Localization.

Fonts for non-western glyphs