foundations icon

Typography

Typography is a deliberate system of letters, numbers, and characters. Good typography ensures legibility, clean aesthetics, and a well-defined information hierarchy.


Status

PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

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 ramp

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.

SpecsStyleSample use cases
Size: 72px / 4.5rem
Line-height: 88px
Weight: 300 Light
Display 1Large heroes or banner titles
Size: 64px / 4 rem
Line-height: 76px
Weight: 300 Light
Display 2Large banners or section titles a level below 1
Size: 56px / 3.5rem
Line-height: 68px
Weight: 300 Light
Display 3Large banners or section titles a level below 2
Size: 48px / 3rem
Line-height: 56px
Weight: 300 Light
Header 1Primary purpose is page titles. Only one H1should be used per page.
Size: 40px / 2.5 rem
Line-height: 48px
Weight: 300 Light
Header 2Use for secondary headers, a level under H1
Size: 32px / 2rem
Line-height: 40px
Weight: 300 Light
Header 3Third-level headers, often used for subheaders or for content a level under H2s.
Size: 24px / 1.5rem
Line-height: 32px
Weight: 400 Regular
Header 4Fourth-level headers, under H3s
Size: 20px / 1.25rem
Line-height: 28px
Weight: 400 Regular
Header 5Fifth-level headers, under H4s
Size: 16px / 1rem
Line-height: 24px
Weight: 500 Medium
Header 6Sixth-level headers. Sometimes used for footnote titles.
Size: 24px / 1.5rem
Line-height: 36px / 150%
Spacing: 0.0%
Weight: 400 Regular
Subtitle 1Subtitles might be used directly under a Display 1 title.
Size: 16px / 1rem
Line-height: 24px
Weight: 500 Medium
Subtitle 2Smaller subtitle, sometimes used under header text or to section content.
Size: 24px /1.5rem
Line-height: 36px
Weight: 300 Light
Body 1Larger 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 2Default body text size. Should be used for most body text.
Size: 14px / 0.875rem
Line-height: 20px
Weight: 400 Regular
Body 3Smaller body text. Recommended for high-density components and layouts.
Size: 16px / 1rem
Line-height: 24px
Weight: 500 Medium
Button 1Standard button text size
Size: 14px / 0.875rem
Line-height: 24px
Weight: 500 Medium
Button 2Small button text size
Size: 12px / 0.75 rem
Line-height: 20px
Weight: 400 Regular
CaptionValidation or form helper text or photo captions

Responsive font ramp

For XS (extra small) to M (medium) breakpoints smaller than 1024 pixels, use these display and header variants.

SpecsStyleSample use cases
Size: 56px / 3.5rem
Line-height: 68px
Weight: 300 Light
Display 1Large heroes or banner titles
Size: 48px / 3rem
Line-height: 56px
Weight: 300 Light
Display 2Large banners or section titles a level below 1
Size: 40px / 2.5 rem
Line-height: 48px
Weight: 300 Light
Display 3Large banners or section titles a level below 2
Size: 40px / 2.5 rem
Line-height: 48px
Weight: 300 Light
Header 1Primary purpose is page titles. Only one H1should be used per page.
Size: 32px / 2rem
Line-height: 40px
Weight: 300 Light
Header 2Use for secondary headers, a level under H1.
Size: 24px / 1.5rem
Line-height: 32px
Weight: 400 Regular
Header 3Third-level headers, often used for subheaders or content a level under H2s.
Size: 20px / 1.25rem
Line-height: 28px
Weight: 400 Regular
Header 4Fourth-level headers, under H3s
Size: 16px / 1rem
Line-height: 24px
Weight: 500 Medium
Header 5Fifth-level headers, under H4s

Text modifiers

Typography v2 has a few style variants, with more to come, pending new releases.

CSSHTML
Underlinedtext-decoration: underlinetext
initialismfont-variant: small-capstext
Strongfont-weight: specific to style -
letter-spacing: specific to style
text

Header and body text spacing

Learn how to pair headers with body text using adequate spacing to improve readability.

Image of 16px spacing between Header 1 and Body 1

16 pixels of padding between Header 1 and Body 1

Image of 16 pixels spacing of padding between Header 2 and Body 2

16 pixels of padding between Header 2 and Body 2

Image of 12 pixels spacing of padding between Header 3 and Body 2

12 pixels of padding between Header 3 and Body 2

Image of 12 pixels of padding between Header 4 and Body 2

12 pixels of padding between Header 4 and Body 2

Image of 8 pixels of padding between Header 5 and Body 2

8 pixels of padding between Header 5 and Body 2

Image of 8 pixels of padding between Header 6 and Body 2

8 pixels of padding between Header 6 and Body 2

Text color: light mode

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:

WebAIM Contrast Checker

View Contrast Guidance

ColorUse casesHex
Gray 900Default text color#0E0E0E
Gray 800Helper text, block quote#636363
Red 700Error text#BB2A33
Blue 600Default link color#0672CB

Accessibility

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.

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

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"

Considerations

Typefaces for print marketing and system defaults are different from Dell’s digital font ramp. Visit Dell Technologies branding website for specific guidance.

Internationalization

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 demos

Vanilla typography demo

View the typography style and code in Vanilla.

Web Components typography demo

View the typography style and code for Web Components.

React typography demo

View the typography style and code in React.

Resources

WebAIM semantic structure

Using multiples of 4 to get more flexibility in your UI.

W3 headings tutorial

Create accessible headings for your experience.

HeadingsMap plugin

Chrome browser extension highlights and jumps to all page headings.

Feedback