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.

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

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.

Preformatted

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; }

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.

• 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.

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

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.

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.