Calcite Web primarily uses Avenir Next, but also provides a system monospace stack. All font-weights and faces can be set either with helper classes or Sass mixins.

Licensing

Calcite Web provides Esri's fonts automatically as part of the framework. However, if you are a developer outside Esri, you may not have a license to use these fonts. To find out if you can use these fonts, please check 2.2 section C of Esri's master agreement.

Internationalization

Almost every major language is styled for you, automatically. In most latin-based languages, everything can be rendered in Avenir Next. Some languages, however, use characters that aren't included in Avenir Next. For each of these languages, Calcite Web will load a font that maintains a similar look and feel.

Non-latin character sets are pulled in only when needed, so if your application is in English, the browser will only load the files it needs for displaying English. This is accomplished by using the unicode-range property in the @font-face declaration. To learn more about internationalization and to see all of the languages that Calcite Web supports, check out the i18n example page.

Use Behind a Firewall

Fonts in Calcite Web are loaded from the Esri CDN, but if you are working on an Esri product that will be deployed behind a firewall, you can also host the files yourself, locally.

For more instructions on setting up locally-hosted fonts, view the Calcite Fonts project. Note: due to license restrictions these files can only be made available for Esri product teams.

Vertical Rhythm

Vertical rhythm is maintained in the Calcite Web Type System by the use of the $baseline variable. $baseline sets a standard and regular leading in relation to the body copy – 1.5rem. This variable is used for any measurement on the vertical axis in the page, including the leader and trailer grid helper classes and padding for components like buttons which use standard measurements like 3/$baseline and 2/$baseline.

Proportional Scales

Text sizes are defined by a modular scale. The scale is defined by two base sizes for type - body at 1rem and small at 0.95rem - and extrapolates a series of larger type sizes based on a single ratio; 1.25, or a major third interval. All type sizes are set in rems, which have more than acceptable browser support. Rems are used for type sizing and all vertical measurements, defined either by the $baseline variable or the modular scale and font size mixins. This prevents odd sizing issues with nested content, unpredictable results with scaling, and provides a solid anchor for determining sizes.

Avenir

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

Applies the the header face, along with a set of smart weight interactions and typographic defaults, to an element.

Avenir Next

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Several modifier classes are provided for quickly selecting different weights of Avenir Next. Weights range from light (default) to bold.

Base

<h1 class="modifier-class">Amazingly few discotheques provide jukeboxes.</h1>

Modifiers

Code Face

Rather than load a specific font for code blocks, Calcite Web 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.

Consolas

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

// Example JavaScript rendered in Consolas
function $initHighlight (classes) {
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined) {
      console.log('undefined');
    }
  }
}

$initHighlight(["class1", "class1", "class1"]);

Base

<h1 class="modifier-class">Amazingly few discotheques provide jukeboxes.</h1>

Modifiers

Calcite Web provides a set of html class helpers for basic type composition. The goal of these helpers is to provide a set of tools that allows for typographic treatments that differ from the default style set without writing additional css.

Text modifiers

Build in classes that allow for quick customization and composition for a wide range of use cases.

Base

<p class="modifier-class">Amazingly few discotheques provide jukeboxes.</p>

Modifiers

Sizes

Helpers classes apply the font-size($n) mixin to an element. This allows for quick resizing of text elements up and down the modular type size scale.

Base

<p class="modifier-class">Amazingly few discotheques provide jukeboxes.</p>

Modifiers

Color

Sets the font color of the element to any of the Calcite colors available.

Base

<h1 class="modifier-class">Amazingly few discotheques provide jukeboxes.</h1>

Modifiers

Link Color

Sets the color of links within the element, or the link itself, to available Calcite colors.

Base

<p>Amazingly few <a href="#" class="modifier-class">discotheques</a> provide <a href="#" class="modifier-class">jukeboxes.</a> </p>

Modifiers

Numbered List

Adds the Calcite styles for large numbered lists to an ordered list. Useful for listing steps in a process.

Base

<ol class="modifier-class">
  <li>Amazing</li>
  <li>discotheques</li>
  <li>
    <p>jukeboxes</p>
    <ol class="modifier-class">
      <li>Amazing</li>
      <li>discotheques</li>
      <li>jukeboxes</li>
    </ol>
  </li>
</ol>

Modifiers

Plain List

Provides a way to clear the styles for lists. For example, we use this pattern in the footer to clear the typical list styles for a clean, left aligned appearance.

Base

<ul class="modifier-class">
  <li>Amazing</li>
  <li>discotheques</li>
  <li>jukeboxes
    <ul class="modifier-class">
      <li>Amazing</li>
      <li>discotheques</li>
      <li>jukeboxes</li>
    </ul>
  </li>
</ul>

Modifiers

All default text elements are styled to facilitate smooth reading, simple flow, and appropriate proportions. This is a default paragraph. This is a default link. Below is a sample of default type elements.

Header One

Header Two

Header Three

Header Four

Header Five

Header Six

0. List One that is really long and will break to the next line, demonstrating that the left edges of the text are aligned.
1. List Two
2. List Three

• List Item that is really long and will break to the next line, demonstrating that the left edges of the text are aligned.
  • sub list item
  • sub list item
• List Item
• List Item

Lorem Ipsum Blockquote

Lorem ipsum paragraph with strong, bold text and emphasis, italic text.

Guildenstern

I don't believe in it anyway.

Rosencrantz

What?

Guildenstern

England.

Rosencrantz

Just a conspiracy of cartographers, then?