Typography

Documentation and examples for Cupcake typography, including global settings, headings, body text, lists, and more.

Font Stack

Cupcake uses a font stack that adapts to the operating system it runs on, like Windows, iOS, or Android.
It renders consistently across various operating systems and browsers. And users behind a firewall do not need info-sec or IT to download and install an additional font.

For example:

Apple devices will display San Francisco
Android devices will display Roboto
Devices running Windows will display Segoe UI
Machines running Linux will display the default sans-serif font for any running distribution

The following font-stack ensures all browsers can load platform-specific fonts:

-apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif

Typescale

Cupcake provides a purposeful set of typographic styles.

By consistently tying typographic styles to appropriate functions in the interface, we create a clear visual pattern.

Body

To establish a consistent base you may wish to add the class .c-body-text to the body element on the page. This will give you a default font-size, color, line-height, and font-family for any element inheriting styles that are not already specified in an elements class.

This is xs text

This is sm text

This is md text

This is lg text

This is xl text

This is xxl text

<div class="c-text-xs">This is xs text</div>
<div class="c-text-sm">This is sm text</div>
<div class="c-text-md">This is md text</div>
<div class="c-text-lg">This is lg text</div>
<div class="c-text-xl">This is xl text</div>
<div class="c-text-xxl">This is xxl text</div>

HTML

Header

Heading should be used for titles of top-level sections of a screen or section. May also be used as a component header.

This is the xs header

This is the sm header

This is the md header

This is the lg header

This is the xl header

This is the xxl header

<div class="c-header-xs">This is the xs header</div>
<div class="c-header-sm">This is the sm header</div>
<div class="c-header-md">This is the md header</div>
<div class="c-header-lg">This is the lg header</div>
<div class="c-header-xl">This is the xl header</div>
<div class="c-header-xxl">This is the xxl header</div>

HTML

Emphasis

To communicate content hierarchy, use the core typographic scale first. Once the main hierarchy is established, if two pieces of text of the same style have different positions in the content hierarchy, additional styles may be used to emphasize OR de-emphasize one of them.

Muted Muted content isn’t unimportant or superfluous, but rather makes room for the eye to orient itself and focus on core content.

I'm a Header I am muted

<div class="c-header-lg">I'm a Header <span class="c-text-muted"> I am muted</span></div>

HTML

Try to avoid using muted on its own, when not contrasting with other text. There are exceptions: muted may be used for standalone content when it represents a non-actionable or otherwise unimportant state of something, i.e. when the normal content is absent.

Font Weights

Default text styles have a normal font weight. You can add emphasis in context by adding a variant font weight.

This is light text

This is normal text

This is bold text

This is heavy text

<div class="c-text-lg c-text-light">This is light text</div>

<div class="c-text-lg c-text-normal">This is normal text</div>

<div class="c-text-lg c-text-bold">This is bold text</div>

<div class="c-text-lg c-text-heavy">This is heavy text</div>

HTML

Additional Styles

Additional text helpers also available.

This is a link

this is capitalized

This is italic

This header is bold yet this has.c-text-light applied

<div class="c-text-lg c-a">This is a link</div>
<div class="c-text-lg c-text-capitalize">this is capitalized</div>
<div class="c-text-lg c-text-italic">This is italic</div>
<div class="c-header-xs">This header is bold <span class="c-text-light">yet this has.c-text-light applied</span>
</div>

HTML

Text Colors

Additional text colors can also be used (sparingly).

.c-text-gray-0 .c-text-gray-1 .c-text-gray-2 .c-text-gray-3 .c-text-gray-4 .c-text-gray-5 .c-text-gray-6 .c-text-gray-7 .c-text-gray-8 .c-text-gray-9

.c-text-primary-0 .c-text-primary-1 .c-text-primary-2 .c-text-primary-3 .c-text-primary-4 .c-text-primary-5 .c-text-primary-6 .c-text-primary-7 .c-text-primary-8 .c-text-primary-9

.c-text-success-0 .c-text-success-1 .c-text-success-2 .c-text-success-3 .c-text-success-4 .c-text-success-5 .c-text-success-6 .c-text-success-7 .c-text-success-8 .c-text-success-9

.c-text-warning-0 .c-text-warning-1 .c-text-warning-2 .c-text-warning-3 .c-text-warning-4 .c-text-warning-5 .c-text-warning-6 .c-text-warning-7 .c-text-warning-8 .c-text-warning-9

.c-text-danger-0 .c-text-danger-1 .c-text-danger-2 .c-text-danger-3 .c-text-danger-4 .c-text-danger-5 .c-text-danger-6 .c-text-danger-7 .c-text-danger-8 .c-text-danger-9

Please use care when adding a text color and ensure it creates suitable contrast!