Typography
A set of pre-defined text styles for headers, body copy, & links designed for clarity in readability and hierarchy.
# Hierarchy
Typographical hierarchy indicates importance of content. Through size and weight, a strong hierarchy can provide clarity to a user to easily understand which level of the content they’re on. Sections need subsections, and those subsections may also need their own subsections. Visually, a user should be able to clearly tell a parent section from a child section simply by the relationship in size and weight between headings.
# Type Styles
To ensure consistency in typography sizes throughout Okta touchpoints, we’ve created a custom type scale paired with appropriate weights and line-heights.
# Titles
Titles are used to describe the main idea of a page, a section, or content that follows it. By default, header tags (h1 through h6) use the corresponding title size.
| Variable | rem | px | Example |
|---|---|---|---|
$size-title-1 | Waltz, bad nymph, for quick jigs vex! | ||
$size-title-2 | Waltz, bad nymph, for quick jigs vex! | ||
$size-title-3 | Waltz, bad nymph, for quick jigs vex! | ||
$size-title-4 | Waltz, bad nymph, for quick jigs vex! | ||
$size-title-5 | Waltz, bad nymph, for quick jigs vex! | ||
$size-title-6 | Waltz, bad nymph, for quick jigs vex! |
# Body
Odyssey ships with a base font of 14px. However there are times when different sizes are required.
| Variable | rem | px | Example |
|---|---|---|---|
$size-body-base | Waltz, bad nymph, for quick jigs vex! | ||
$size-body-caption | Waltz, bad nymph, for quick jigs vex! |
# Weight
In order to maintain consistency across browsers and typefaces, we specify weights by their numbered value, not name. Currently, the following weights are available.
| Weight | Example |
|---|---|
400 | Normal (Book) 400 |
600 | Bold (Medium) 600 |
# Line length
For inline and block level content, the line length should be 50 to 75 characters long. In order to facilitate consistency across designs, max-width: $max-line-length can be helpful.
# Heading implementation
When constructing a component or page, always start with h1 for the topmost level of hierarchy.
Do not rely on heading elements for styling purposes; instead use classes like .page--title to style component headings.
Following these guidelines will ensure a clean document outline, which will increase both SEO performance and accessibility.