Typography
Our typographical subsystem helps you to create a consistent, flexible typographic style for your application. Design tokens for font family, font size, [line height], and [font weight] give you a granular way to customize type, and our typeset convention gives you a flexible and easy way to apply and define composed sets of typographic properties.
Typesets
A typeset is a composed set of typographical styles that are used for specific purposes. We include three categories of typesets to be used with body text, UI text, and headings. All three come in a variety of sizing variants, but you can also define your own typesets as needed.
The default typeset, which is used as the default body typeset, utilizes all base tokens.
@use '@wwnds/core' as nds;
.my-selector {
@include nds.typeset;
}
// CSS output
// .my-selector {
// font-family: var(--nds-font-family-base);
// font-size: var(--nds-font-size-base);
// line-height: var(--nds-line-height-base);
// }
Body Typesets
Used for content, the body typesets are typically set at the document body to define the defaults for most content.
They always use a font family of font-family-base and a line height of line-height-base.
body-xs | body-sm | body-md | body-lg |
|---|---|---|---|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. | Lorem ipsum dolor sit, amet consectetur adipisicing elit. | Lorem ipsum dolor sit, amet consectetur adipisicing elit. | Lorem ipsum dolor sit, amet consectetur adipisicing elit. |
Additionally, the body-base typeset uses the base font size token (font-size-base).
UI Typesets
Used for user interface elements where text doesn't typically reflow, the UI typesets have a smaller default line height than body typesets.
They always use a font family of font-family-base and a line height of line-height-3.
ui-xs | ui-sm | ui-md | ui-lg |
|---|---|---|---|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. | Lorem ipsum dolor sit, amet consectetur adipisicing elit. | Lorem ipsum dolor sit, amet consectetur adipisicing elit. | Lorem ipsum dolor sit, amet consectetur adipisicing elit. |
Additionally, the ui-base typeset uses the base font size token (font-size-base).
Heading Typesets
Used to convey hierarchy, the heading typesets create greater vertical separation while still adhering to a consistent vertical rhythm.
| Heading | Example |
|---|---|
heading-1 | Lorem ipsum dolor sit |
heading-2 | Lorem ipsum dolor sit |
heading-3 | Lorem ipsum dolor sit |
heading-4 | Lorem ipsum dolor sit |
heading-5 | Lorem ipsum dolor sit |
heading-6 | Lorem ipsum dolor sit |
Font Family
Our font family system provides design tokens for sans serif, serif, and monospace font family types, all defaulting to their respective system stack. System stack defaults help us keep the size of the design system down while ensuring that all devices use a font that looks good on that device.
To customize the font family and ensure a more consistent typographic experience for your users, simply override the font family design tokens.
| Token | Customizable | Usage |
|---|---|---|
font-family-system-sans | no | a sans serif system font stack |
font-family-system-serif | no | a serif system font stack |
font-family-system-mono | no | a monospace system font stack |
font-family-sans | yes | the main sans serif font family |
font-family-serif | yes | the main serif font family |
font-family-mono | yes | the main monospace font family |
font-family-base | yes | the main font family that will be used throughout your application |
font-family-headings | yes | the font family that will be used for headings |
Usage Examples
@use '@wwnds/core' as nds;
.my-serif-selector {
font-family: var(--nds-font-family-serif);
}
@use '@wwnds/core' with (
$font-family-serif: 'Lora',
$font-family-base: var(--nds-font-family-serif),
);
// --nds-font-family-base will resolve to "'Lora', var(--nds-font-family-system-serif)"
Font Size
The main way to control font sizing in the Norton Design System is with the font size role tokens. These tokens capture the base font size for your content, sizes suitable to convey hierarchy (in other words: headings), and a small subset of t-shirt sizes to help create a consistent sense of scale for typography in your application.
| Role Token | Default value | Px equivalent1 |
|---|---|---|
font-size-base | font-size-md | 16px |
font-size-xs | font-size-12 | 12px |
font-size-sm | font-size-14 | 14px |
font-size-md | font-size-16 | 16px |
font-size-lg | font-size-18 | 18px |
font-size-h1 | font-size-32 | 32px |
font-size-h2 | font-size-24 | 24px |
font-size-h3 | font-size-20 | 20px |
font-size-h4 | font-size-18 | 18px |
font-size-h5 | font-size-16 | 16px |
font-size-h6 | font-size-14 | 14px |
Font size system tokens form the basis of the font
sizing system. Note that these cannot be modified and always use rem units to
ensure that the user is in charge of text size.
| System Token | Value | Px equivalent1 |
|---|---|---|
font-size-10 | 0.625rem | 10px |
font-size-12 | 0.75rem | 12px |
font-size-14 | 0.875em | 14px |
font-size-16 | 1rem | 16px |
font-size-18 | 1.125rem | 18px |
font-size-20 | 1.25rem | 20px |
font-size-24 | 1.5rem | 24px |
font-size-32 | 2rem | 32px |
font-size-40 | 2.5rem | 40px |
font-size-48 | 3rem | 48px |
Usage Examples
@use '@wwnds/core' as nds;
.my-large-text {
font-size: var(--nds-font-size-lg);
}
@use '@wwnds/core' with (
$font-size-xs: var(--nds-font-size-14),
$font-size-sm: var(--nds-font-size-16),
$font-size-md: var(--nds-font-size-18),
$font-size-lg: var(--nds-font-size-20),
);
// --nds-font-size-base is still equal to var(--nds-font-size-md),
// making the base font size equivalent to 18px