Use Typography...
- For depicting most body text.
- To modify the default typographical styles in a certain DOM region.
Don't use Typography...
- To add structure and divide screens into sections. Refer to Heading (H1–H6) for more info.
Skin
SWAN's fontSkin property provides a set of styling decisions: font size, font weight, font family, line height, and letter spacing. It is the preferred way to set typography.
The preview has been updated.
Be sure to load the font Tiempos when using any editorial font skins. See the Get Started docs for instructions.
Size
For edge cases where fontSkin isn't sufficient, SWAN provides text sizes. For a list of available font sizes, see Font size.
Weight
SWAN provides two font weights: normal and bold. Use bold to emphasize specific content. Avoid using bold for large paragraphs of text.
ShareLine height and letter spacing
The Typography component provides the line height and letter spacing mapped for each font size.
Color
Text should use textColor="standard" for almost all cases. Use textColor="subtle" for cases where less contrast is needed.
Text and background must meet a 4.5:1 color contrast ratio.
Semantic colors like textColor="holiday", textColor="error", and textColor="warning" should only be used for their respective semantic messaging. Don’t use them for arbitrarily changing text to a certain color.
Dark mode
The default text color (standard) will switch to white when used with dark mode. For example, the code block below has been set to dark mode, so the text within the Pagination component has turned white.
Alignment
Text should be aligned to the left in most cases. If you have a sound use case, you can use textAlign=”center” or textAlign=”right” for alternate alignments. Never fully justify text. Refer to Typography for more information on use cases.
Truncate
Use truncate to prevent text from wrapping into multiple lines, truncating it and displaying an ellipsis instead.
No wrap
Use noWrap to prevent the browser from putting a line break in the middle of text.
Case
Use sentence case for almost all text. Refer to Typography for more information.
For specialized use cases (such as stylizing the “New” text in Callouts), you can use textAllCaps to render text with the appearance of all caps. We recommend using this prop sparingly.
Typography as a heading
We recommend rendering headings using the SWAN H1–H6 components. For some use cases, headings can be rendered by using Typography as=”H3” to achieve a similar effect. For example, the heading below visually looks the same but has been rendered in two different ways.
The preview has been updated.
Convenience elements
In React, many of the basic typographic tags are available as convenience elements, so that instead of <Typography as="p">, you can just use <P> instead. These convenience elements take all the same props as Typography, but they don't need (and shouldn't use) the as prop.
Convenience elements are available for <P>, <Span>, and the headings H1–H6. Note that since these are React components, they take an initial capital letter.
