Font Stack
Common, classic font stacks shared amongst most devices. 'Stack' refers to a sequence of similar looking 'backup fonts' which are automatically used if the main font is not installed on a device.
font-[stack]
Experience design made simple
for living design systems
font-arial
Experience design made simple
for living design systems
font-arial-black
Experience design made simple
for living design systems
font-courier-new
Experience design made simple
for living design systems
font-georgia
Experience design made simple
for living design systems
font-helvetica
Experience design made simple
for living design systems
font-menlo
Experience design made simple
for living design systems
font-monaco
Experience design made simple
for living design systems
font-times
Experience design made simple
for living design systems
font-times-new
<h2 class="font-times-new">Experience design made simple <br>for living design systems</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply a font-[stack] class such as font-times-newThe default font families for each font stack are defined in /variables/_font.scss.
font-native experimental
Font experience design made simple
for living design systems
<h2 class="font-native">Experience design made simple <br>for living design systems</h2>
Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply the font-native class. The default font-native 'stack' can be adjusted in /variables/_font.scss. Based on the Bootstrap 4 native font stack.