Typefaces

The Calcite Type System uses a combination of mixins and helper classes to achieve a clear visual style, focusing primarily on simplifying typesetting processes. Using the mixins and classes properly will ensure that all properties are consistent, beautiful, and robust.

Typefaces

The typographic palette for Calcite Web differs slightly from the official Esri branding document. All typefaces are examined in detail below.

Calcite Web provides a set of weights for each typeface. These are used by either using the helper class in html, or writing sass to include the mixin, or extending the helper class. The available weights for each face are below. Proper care has been taken to ensure that all type systems used by Calcite avoid faux-bold and faux-italics styled by the browser.

By default, Calcite Web expects font files to be located at ../. If your fonts are elsewhere, set the $font-path variable

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

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.
Amazingly few discotheques provide jukeboxes.

Modifiers

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

.avenir-light

Amazingly few discotheques provide jukeboxes.

.avenir-regular

Amazingly few discotheques provide jukeboxes.

.avenir-italic

Amazingly few discotheques provide jukeboxes.

.avenir-demi

Amazingly few discotheques provide jukeboxes.

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

Code Face

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

Amazingly few discotheques provide jukeboxes.

Modifiers

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

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

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.


Text modifiers

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

Modifiers

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

.text-light

Amazingly few discotheques provide jukeboxes.

.text-ellipsis

Amazingly few discotheques provide jukeboxes.

.text-rule

Amazingly few discotheques provide jukeboxes.

.text-inline

Amazingly few discotheques provide jukeboxes.

.text-center

Amazingly few discotheques provide jukeboxes.

.text-left

Amazingly few discotheques provide jukeboxes.

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

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.

Modifiers

Grumpy wizards make toxic brew for the evil Queen and Jack.

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size--3

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size--2

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size--1

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-0

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-1

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-2

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-3

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-4

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-5

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-6

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-7

Grumpy wizards make toxic brew for the evil Queen and Jack.

.font-size-8
<p class="modifier-class">Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

Color

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

Modifiers

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

.text-red

Amazingly few discotheques provide jukeboxes.

.text-green

Amazingly few discotheques provide jukeboxes.

.text-blue

Amazingly few discotheques provide jukeboxes.

.text-white

Amazingly few discotheques provide jukeboxes.

.text-light-gray

Amazingly few discotheques provide jukeboxes.

.text-dark-gray

Amazingly few discotheques provide jukeboxes.

.text-darker-gray

Amazingly few discotheques provide jukeboxes.

.text-darkest-gray

Amazingly few discotheques provide jukeboxes.

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

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

Modifiers

Amazingly few discotheques provide jukeboxes.

Amazingly few discotheques provide jukeboxes.

.link-red

Amazingly few discotheques provide jukeboxes.

.link-green

Amazingly few discotheques provide jukeboxes.

.link-blue

Amazingly few discotheques provide jukeboxes.

.link-light-blue

Amazingly few discotheques provide jukeboxes.

.link-white

Amazingly few discotheques provide jukeboxes.

.link-light-gray

Amazingly few discotheques provide jukeboxes.

.link-dark-gray

Amazingly few discotheques provide jukeboxes.

.link-darker-gray

Amazingly few discotheques provide jukeboxes.

.link-darkest-gray

Amazingly few discotheques provide jukeboxes.

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

Numbered List

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

Modifiers

  1. Amazing
  2. discotheques
  3. jukeboxes

    1. Amazing
    2. discotheques
    3. jukeboxes
  1. Amazing
  2. discotheques
  3. jukeboxes

    1. Amazing
    2. discotheques
    3. jukeboxes
.list-numbered
<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>

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.

Modifiers

  • Amazing
  • discotheques
  • jukeboxes
    • Amazing
    • discotheques
    • jukeboxes
  • Amazing
  • discotheques
  • jukeboxes
    • Amazing
    • discotheques
    • jukeboxes
.list-plain
<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>

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
  1. List One that is really long and will break to the next line, demonstrating that the left edges of the text are aligned.
  2. List Two
  3. 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?