Font Stack

Common font stacks shared amongst most devices.

font-[family]

Arial experience design made simple
for living design systems

Arial Black experience design made simple
for living design systems

Courier New experience design made simple
for living design systems

Georgia experience design made simple
for living design systems

Helvetica experience design made simple
for living design systems

Helvetica Thin experience design made simple
for living design systems

Menlo experience design made simple
for living design systems

Monaco experience design made simple
for living design systems

Times experience design made simple
for living design systems

Times New experience design made simple
for living design systems

Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply the font-[stack] class. The default font families for each font stack are defined in /variables/_font.scss.

   <p class="font-arial"></p>
   <p class="font-arial-black"></p>
   <p class="font-courier-new"></p>
   <p class="font-georgia"></p>
   <p class="font-helvetica"></p>
   <p class="font-helvetica-thin"></p>
   <p class="font-menlo"></p>
   <p class="font-monaco"></p>
   <p class="font-times"></p>
   <p class="font-times-new"></p>

font-native

Native Font experience design made simple
for living design systems

Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply an font-native class. The default font family 'stack' can be adjusted in /variables/_font.scss.

   <p class="font-native"></p>

font-[type]

Sans-Serif experience design made simple
for living design systems

Serif experience design made simple
for living design systems

Monospace experience design made simple
for living design systems

Cursive experience design made simple
for living design systems

Cursive experience design made simple
for living design systems

Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply an font-[type] class. The default font family can be adjusted in _variables.scss.

   <p class="font-sans-serif"></p>
   <p class="font-serif"></p>
   <p class="font-monospace"></p>
   <p class="font-cursive"></p>
   <p class="font-fantasy"></p>