Typefaces

Composition Helpers

Defaults

Typefaces

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

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

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.

Base

Amazingly few discotheques provide jukeboxes.

Modifiers

Amazingly few discotheques provide jukeboxes.

.code-face

Composition Helpers

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.

Modifiers

Amazing

discotheques

jukeboxes

Amazing

discotheques

jukeboxes

.list-plain

Defaults

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

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

List Two

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.