Type

The recommended typeface to use with Calcite Bootstrap branding is Avenir Next. However, due to licensing restrictions, the actual font files cannot be included in this theme. For those with access to Calcite Web, the @import for the web urls to Avenir Next can be added to your project. The $font-family-sans-serif variable can also be customized to use other fonts, else it will fall back to Helvetica Neue, Helvetica, Arial, sans-serif.

$font-family-sans-serif: "Avenir Next W01","Avenir Next", Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
$font-family-serif: "Lucida Grande", "Segoe UI", Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;

Bootstrap configures all font-size variables from a base value. Assuming that the $font-size-base variable is set to 14px, here is a reference on approximate sizes for all other text variables.

$font-size-base: 14px;
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px

$font-size-h1: floor(($font-size-base * 2.6)); // ~36px
$font-size-h2: floor(($font-size-base * 2.15)); // ~30px
$font-size-h3: floor(($font-size-base * 2.0)); // ~28px
$font-size-h4: ceil(($font-size-base * 1.7)); // ~24px
$font-size-h5: ceil(($font-size-base * 1.55)); // ~22px
$font-size-h6: ceil(($font-size-base * 1.14)); // ~16px

Included in the Calcite Bootstrap expansion are these two additional font-size variables.

$font-size-extra-small: floor(($font-size-base * 0.75)); //~10px
$font-size-extra-large: ceil(($font-size-base * 1.4)); //~20px