Typeface

Open Sans

Open Sans  is the primary and default font of Cloudscape. Four font weights are used in the system: Open Sans Light is used for larger display font styles, Normal for the body text across the interface, and Bold and Heavy to add emphasis.

800 Extra Bold
700 Bold
400 Normal
300 Light

Monospace font

In a monospace font, each letter occupies the same amount of horizontal space regardless of the letter shape. We recommend using monospace font for the following categories of data:

  • Code or sample output from a computer program

  • Numeric values in a dataset

  • Dynamic date and time values

  • IP/MAC address

  • ID strings

Type styles

There are four different style categories, depending on the context in which typography is used. Use the styles from the category that best serve the purpose of the text you’re going to display. Type properties, such as line height and letter spacing, are optimized for each category to favor readability and legibility. For example, body styles have a larger line height 1:1.5, while heading styles’ line height is a more compact 1:1.25.

Heading styles

Style
Typeface
Font size
Line height
Font weight
Default tag
Examples

Heading x-large

Open Sans32px40px800h1

Page title

Heading large

Open Sans24px30px800h2

Container title

Heading medium

Open Sans20px24px800h3

Heading small

Open Sans16px20px800h4

Paragraph title

Heading x-small
Open Sans14px18px800h5

Sections within a paragraph

Body styles

Style
Typeface
Font size
Line height
Font weight
Default tag
Examples

Body medium

Open Sans14px22px400p

Body and paragraph text.

Body smallOpen Sans12px16px400small
  • Description text, constraint text, and errors within form fields and form elements
  • Step labels within a wizard

Code styles

Style
Typeface
Font size
Line height
Font weight
Default tag
Examples
CodeMonaco, Menlo, Consolas, Courier Prime, Courier, Courier New, monospace12px16px400code

Displaying code or computer output

Preformatted
Monaco, Menlo, Consolas, Courier Prime, Courier, Courier New, monospace14px22px400pre

Displaying preformatted blocks of code

Display styles

Style
Typeface
Font size
Line height
Font weight
Default tag
Examples
Display large heavy
Open Sans48px54px800-
  • Title on a homepage
  • Number highlights in a dashboard
Display large light
Open Sans48px54px300-

Subheading on a homepage

Fallback fonts

A fallback font is displayed when the default isn’t available. If the default font isn’t available, the browser uses the font-family property to choose a compatible font from the list of provided fonts, starting from the top. If none of the provided fonts are available, the browser chooses a font in the generic family provided at the end, such as sans-serif or monospace. To ensure maximum compatibility between browsers and operating systems, the font-family property holds several font names as a fallback system.

.default { font-family: "Open Sans", Helvetica, Arial, sans-serif; }

.monospace { font-family: Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace; }

List styles

Lists have two purposes: to itemize data relating to a topic and to present conceptually similar information in a format that is easy for the reader to scan. There are two main types of lists: unordered and ordered lists.

Unordered list

You can use an unordered list, also know as bulleted list, to organize pieces of information in which the order of elements doesn’t make a difference.

  • Highest level

    • Nested level

Ordered list

You can use the ordered list, also know as a numbered list, to organize pieces of information in a specific order, and also reflect the hierarchical structure of the content.

  1. Highest level

    1. Nested level

Guidelines

  • Make lists parallel in content and structure. Don't mix single words with phrases, don't start some phrases with a noun and others with a verb, and don't mix verb forms.

  • Capitalize the first letter of the first word of each list item.

  • Punctuate list items consistently. If at least one item in a list requires a period, then use a period for all items in that list.

General guidelines

  • For accessible use of font colors, see colors.

  • Use headings according to their importance and information hierarchy, not for their visual appearance.

  • Make sure you use only one h1 tag per page.

  • Use sentence case capitalization (except for product names).

  • Don't overuse monospaced font. Use it only for dedicated value types.

  • Don't use font size smaller than 12px.

Implementation

There are two components that you can use to control typography.

Box

With the box component, you can display and style basic elements and containers in compliance with the typography and spacing strategy of the system.
You can use the box component to style a single HTML element (h1, h2, h3, h4, h5, p, strong, small, code, pre, samp) by setting a variant that corresponds to the tag that you need. You can override the default color, font size, line height and font weight to customize the basic HTML element.

Text content

With the text content component, you can style chunks of HTML that contain basic elements (h1, h2, h3, h4, h5, p, strong, small, code, pre, samp, ul, ol, a). You can use it as an alternative to the box component when you can’t convert every single basic element to a component. For example, HTML from a content management system, or the output of Markdown file. Unlike the box component, you can use the text component to style lists (ul, ol) and anchors (a) that are contained in the text.