Font Play

Experiment with different looks using these font-family 'short stacks'.

font-[stack]

Athelas experience design made simple
for living design systems

Avenir experience design made simple
for living design systems

Baskerville experience design made simple
for living design systems

Bodoni experience design made simple
for living design systems

Calisto experience design made simple
for living design systems

Consolas experience design made simple
for living design systems

Courier experience design made simple
for living design systems

Didot experience design made simple
for living design systems

Garamond experience design made simple
for living design systems

Gotham experience design made simple
for living design systems

Goudy 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. These fonts are defined in /variables/_font.scss. Not recommended for production.

   <p class="font-athelas"></p>
   <p class="font-avenir"></p>
   <p class="font-baskerville"></p>
   <p class="font-bodoni"></p>
   <p class="font-calisto"></p>
   <p class="font-consolas"></p>
   <p class="font-courier"></p>
   <p class="font-didot"></p>
   <p class="font-garamond"></p>
   <p class="font-gotham"></p>
   <p class="font-goudy"></p>