Typography

Overview

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

Font stack

Avenir Next is a recut of the classic Avenir typeface, by Adrian Frutiger and Akira Kobayashi. It has been reworked for use on digital screens, and contains more weights, styles, and other improvements. Avenir Next improves on Avenir in digital settings.

Font colors

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

    Light theme
  • --calcite-ui-text-1#151515
  • --calcite-ui-text-2#4A4A4A
  • --calcite-ui-text-3#6A6A6A
    Dark theme
  • --calcite-ui-text-1#FFFFFF
  • --calcite-ui-text-2#BFBFBF
  • --calcite-ui-text-3#9F9F9F

Font size & weight

SizeWeightLine-height

The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Type pairing

Pairing size
SmallLarge

TypeColorSizeWeightLine heightSpace below
Heading--calcite-ui-text-1--calcite-font-size-6--calcite-font-weight-medium1.2512px
Subeading--calcite-ui-text-2--calcite-font-size-3--calcite-font-weight-medium1.2512px
Paragraph--calcite-ui-text-3--calcite-font-size-3--calcite-font-weight-normal1.2524px
Tertiary--calcite-ui-text-3--calcite-font-size-2--calcite-font-weight-normal1.375
Heading lorem ipsum dolor
Subheading ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tertiary text

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>

Using type

Almost every major language is available. In most latin-based languages, everything can be rendered in Avenir Next. Some languages, however, use characters that aren't included in Avenir Next. Non-latin character sets should be pulled in only when needed, so if your application is in English, the application will only load the files it needs in order to display English. To learn more about internationalization and to see all of the languages that Avenir supports, check out the i18n example page for the specific framework you are using

Best practices

Using type effectively

Using type effectively means leveraging 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.

Correct Type Hierarchy
Do use text size, space, grayscale/color, and weight to structure page content hierarchy.
Incorrect Type Hierarchy
Avoid relying on hr, underlines, or borders to create hierarchy within your text.

Type hierarchy

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

Correct Type Spacing
Do use adequate line height, text size and space to infer hierarchy.
Incorrect Type Spacing
Avoid using the same line height, size and spacing for everything.

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

Correct Type Brevity
Do prefer brevity over verbosity.
Incorrect Type Brevity
Avoid presenting users with hard to decipher or complex copy.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.