Status
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
Documentation | PublishedElement can be used in production |
Typography
Typography is a deliberate system of letters, numbers, and characters. Good typography ensures legibility, clean aesthetics, and a well-defined information hierarchy.
Contents
What's newCopy link to this section
Copy link to this section
For the Dell Design System v2, the font ramp has been adjusted to harmonize type styles and ensure compliance to the 4-pixel grid.
The default font for Dell digital experiences is Roboto, a sans-serif, open-source font optimized for digital performance. It was chosen for its clean geometry, legibility, and extensive international character set.
Font rampCopy link to this section
Copy link to this section
The default styles apply to all breakpoints, except for displays and headers with breakpoints under 1024 pixels. That ramp is featured in the responsive font ramp section. Note that styles do not correspond to a specific HTML tag. An H1 tag can be assigned to any header style and size, as long as a logical hierarchy is maintained throughout the page and throughout your application.
| Specs | Style | Sample use cases |
|---|---|---|
| Size: 72px / 4.5rem Line-height: 88px Weight: 300 Light | Display 1 | Large heroes or banner titles |
| Size: 64px / 4rem Line-height: 76px Weight: 300 Light | Display 2 | Large banners or section titles a level below 1 |
| Size: 56px / 3.5rem Line-height: 68px Weight: 300 Light | Display 3 | Large banners or section titles a level below 2 |
| Size: 48px / 3rem Line-height: 56px Weight: 300 Light | Header 1 | The largest style size in the font ramp, used for page layouts. |
| Size: 40px / 2.5rem Line-height: 48px Weight: 300 Light | Header 2 | Used for page layouts. |
| Size: 32px / 2rem Line-height: 40px Weight: 300 Light | Header 3 | Used for page layouts or for subheaders. |
| Size: 24px / 1.5rem Line-height: 32px Weight: 400 Regular | Header 4 | Often used for subheaders. |
| Size: 20px / 1.25rem Line-height: 28px Weight: 400 Regular | Header 5 | Often used for subheaders or can be used for component titles. |
| Size: 16px / 1rem Line-height: 24px Weight: 500 Medium | Header 6 | Often used for subheaders or can be used for component headings. Sometimes used for footnote titles. |
| Size: 24px / 1.5rem Line-height: 36px / 150% Spacing: 0.0% Weight: 400 Regular | Subtitle 1 | Subtitles might be used directly under a Display 1 title. |
| Size: 16px / 1rem Line-height: 24px Weight: 500 Medium | Subtitle 2 | Smaller subtitle, sometimes used under header text or to section content. |
| Size: 24px /1.5rem Line-height: 36px Weight: 300 Light | Body 1 | Larger body text used for block quotes and highlighted body text. Often paired with Display 1 titles. |
| Size: 16px / 1rem Line-height: 24px Weight: 400 Regular | Body 2 | Default body text size. Should be used for most body text. |
| Size: 14px / 0.875rem Line-height: 20px Weight: 400 Regular | Body 3 | Smaller body text. Recommended for high-density components and layouts. |
| Size: 16px / 1rem Line-height: 24px Weight: 500 Medium | Button 1 | Standard button text size |
| Size: 14px / 0.875rem Line-height: 24px Weight: 500 Medium | Button 2 | Small button text size |
| Size: 12px / 0.75rem Line-height: 20px Weight: 400 Regular | Caption | Validation or form helper text or photo captions |
Responsive font rampCopy link to this section
Copy link to this section
For XS (extra small) to M (medium) breakpoints smaller than 1024 pixels, use these display and header variants. Remember that styles do not correspond to a specific HTML tag. An H1 tag can be assigned to any header style and size, as long as a logical hierarchy is maintained throughout the page and throughout your application.
| Specs | Style | Sample use cases |
|---|---|---|
| Size: 56px / 3.5rem Line-height: 68px Weight: 300 Light | Display 1 | Large heroes or banner titles |
| Size: 48px / 3rem Line-height: 56px Weight: 300 Light | Display 2 | Large banners or section titles a level below 1 |
| Size: 40px / 2.5rem Line-height: 48px Weight: 300 Light | Display 3 | Large banners or section titles a level below 2 |
| Size: 40px / 2.5rem Line-height: 48px Weight: 300 Light | Header 1 | The largest style size in the font ramp, used for page layouts. |
| Size: 32px / 2rem Line-height: 40px Weight: 300 Light | Header 2 | Used for page layouts. |
| Size: 24px / 1.5rem Line-height: 32px Weight: 400 Regular | Header 3 | Used for page layouts or for subheaders. |
| Size: 20px / 1.25rem Line-height: 28px Weight: 400 Regular | Header 4 | Often used for subheaders. |
| Size: 16px / 1rem Line-height: 24px Weight: 500 Medium | Header 5 | Often used for subheaders or component titles. |
Text modifiersCopy link to this section
Copy link to this section
Typography v2 has a few style variants, with more to come, pending new releases.
| CSS | HTML | |
|---|---|---|
| Underlined | text-decoration: underline | text |
| initialism | font-variant: small-caps | text |
| Strong | font-weight: specific to style letter-spacing: specific to style | text |
Header and body text spacingCopy link to this section
Copy link to this section
Learn how to pair headers with body text using adequate spacing to improve readability.
16 pixels of padding between Header 1 and Body 1
16 pixels of padding between Header 2 and Body 2
12 pixels of padding between Header 3 and Body 2
12 pixels of padding between Header 4 and Body 2
8 pixels of padding between Header 5 and Body 2
8 pixels of padding between Header 6 and Body 2
Text color: light modeCopy link to this section
Copy link to this section
The Dell Design System’s typography colors meet Level AA WCAG 2.0 standards on light mode foreground and background colors. For other backgrounds, consider running a contrast check through these tools:
| Color | Use cases | Hex |
|---|---|---|
| Default text color | #0E0E0E | |
| Helper text, block quote | #636363 | |
| Error text | #BB2A33 | |
| Default link color | #0672CB |
AccessibilityCopy link to this section
Copy link to this section
Use semantic structure for headings
Organizing your content logically by headings in a hierarchy ensures that the page structure can be clearly understood by screen readers and other assistive technologies.
Headings should start with a single H1 and descend in order. Don’t skip levels, such as placing an H3 under an H1. If you need a heading to be visually smaller than the next occurring heading level, use styling and font weights instead.
Example of how headers are structured in descending order on a page, starting with only one H1 per page, then followed by H2s, then H3s.
Use the correct heading style
Don’t use a heading style on text that isn’t a heading as it makes page comprehension difficult for screen readers and users with cognitive disabilities.
Follow line-height and spacing guidelines for text
Some people use custom CSS to modify their text for readability. Therefore, it’s important to follow accessibility line-height and spacing standards to ensure all text is legible and readable for those with cognitive disabilities, as well as those with low vision.
All body, subtitles, captions, button text, and responsive H5 and H6 (for extra-small and medium range breakpoints) have been designed with a line-height 1.5 times the font size. For other font styles and sizes, make sure that your designs can accommodate the following user-applied changes without loss of visibility or functionality:
- Line-height that is at least 1.5 times the font size.
- Spacing between paragraphs that is at least 2 times the font size.
- Letter spacing that is at least 0.12 times the font size.
- Word spacing that is at least 0.16 times the font size.
Exception: Chinese text does not need to meet the above letter spacing requirement as it uses characters to represent a word instead of letters (logograms).
WCAG 2.1: 1.4.12 Text Spacing
Content guidelinesCopy link to this section
Copy link to this section
Header descriptions
Headings should accurately describe the contents of the page or the section they represent. This helps users who use screen readers skim the page headings to find desired content. Evaluate your headings critically and be brief. The longer your headings, the more users will have to read or listen to find what they need.
Do: “How to contact us”
Don’t: “Let’s talk” or “Get the help you need when you need it"
ConsiderationsCopy link to this section
Copy link to this section
Typefaces for print marketing and system defaults are different from Dell’s digital font ramp. Visit Dell Technologies branding website for specific guidance.
InternationalizationCopy link to this section
Copy link to this section
The font-family styles in our code include international language support. During localization, those fonts will load after Roboto. Other things to keep in mind, when designing for a global audience:
-
Don’t hard code fonts.
-
Word length varies by language. For instance, German words can be 25 to 50 percent longer than their English equivalents. As a general rule, leave 30 percent of additional character length to accommodate languages that expand after translation.
-
For languages with glyphs, consider height and width as a design factor.
-
Some languages, such as Arabic and Hebrew, are read from right-to-left, which means their characters are also displayed from right-to-left.
-
Chinese, Japanese, and Korean glyphs are monospaced, which means characters are the same width and have equal space between them.
Storybook demosCopy link to this section
Copy link to this section
Web Components typography demo
View the typography style and code for Web Components.
ResourcesCopy link to this section
Copy link to this section