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