Typography

SKY UX supports a set of semantically defined classes for text to ensure consistent usage and maintain visual hierarchy of type. You should not apply the typographic classes directly to text elements. Instead, components should incorporate text classes as necessary.

The SKY UX font system is based on the Open Sans and Oswald typefaces.

SKY UX defines CSS classes for general use in addition to base body copy.

Styling values are for reference only, and you should not apply them directly. Instead, components should apply styling through the use of classes.

Page heading

Usage

This class formats text that identifies a page, such as a page title or record name. Use this class on one element per page.

Code
<h1 class="bb-page-heading">Page heading</h1>
Styling

Oswald Light 32px #292a2b

Section heading

Usage

This class formats text that identifies subdivisions on a page, such as tile titles.

Code
<h2 class="bb-section-heading">Section heading</h2>
Styling

Oswald Light 22px #292a2b

Subsection heading
Usage

This class formats text that identifies subsections with containers. For example, in a tile for contact information, this class can format headings for the addresses, email addresses, and phone numbers sections.

Code
<div class="bb-subsection-heading">Subsection heading</div>
Styling

Open Sans Regular 17px #707374

Headline
Usage

This class formats text that calls out key information on a page, such as a constituent’s total giving or the number of records in a list. Use it sparingly or you will dilute its ability to draw attention.

Code
<div class="bb-headline">Headline</div>
Styling

Oswald Regular 22px #292a2b

Emphasized body copy
Usage

This class formats text to call out key information that is slightly less important than headline text, such as constituent names in a list of contact cards. Use it sparingly or you will dilute its ability to draw attention.

Code
<div class="bb-emphasized">Emphasized body copy</div>
Styling

Open Sans Semibold 14px #292a2b

Regular body copy
Usage

This is the base body font and does not require a separate class. It formats text that does not semantically fall under any of the defined types.

Code

This is used when no other class is specified.

Styling

Open Sans Regular 13px #292a2b

De-emphasized body copy
Usage

This class formats text to de-emphasize information that you generally want users to skip over, such as placeholder text.

Code
<div class="bb-deemphasized">De-emphasized body copy</div>
Styling

Open Sans Italic 13px #707374

Field label
Usage

This class formats labels for read-only fields that do not accept input. It uses a muted color because the label that identifies the field is less important than the content.

Code
<div class="bb-field-label">Field label</div>
Styling

Open Sans Regular 13px #707374

Form input label
Usage

This class formats labels for input fields. It is darker than labels for read-only fields to help the text stand out they alongside visually heavier input controls.

Code
<div class="control-label">Form input label</div>
Styling

Open Sans Regular 13px #292a2b