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

SpecsStyleSample use cases
Size: 72px / 4.5rem
Line-height: 88px
Weight: 300 Light
Display 1Large heroes or banner titles
Size: 64px / 4rem
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 1The largest style size in the font ramp, used for page layouts.
Size: 40px / 2.5rem
Line-height: 48px
Weight: 300 Light
Header 2Used for page layouts.
Size: 32px / 2rem
Line-height: 40px
Weight: 300 Light
Header 3Used for page layouts or for subheaders.
Size: 24px / 1.5rem
Line-height: 32px
Weight: 400 Regular
Header 4Often used for subheaders.
Size: 20px / 1.25rem
Line-height: 28px
Weight: 400 Regular
Header 5Often used for subheaders or can be used for component titles.
Size: 16px / 1rem
Line-height: 24px
Weight: 500 Medium
Header 6Often 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 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.75rem
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. 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.

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.5rem
Line-height: 48px
Weight: 300 Light
Display 3Large banners or section titles a level below 2
Size: 40px / 2.5rem
Line-height: 48px
Weight: 300 Light
Header 1The largest style size in the font ramp, used for page layouts.
Size: 32px / 2rem
Line-height: 40px
Weight: 300 Light
Header 2Used for page layouts.
Size: 24px / 1.5rem
Line-height: 32px
Weight: 400 Regular
Header 3Used for page layouts or for subheaders.
Size: 20px / 1.25rem
Line-height: 28px
Weight: 400 Regular
Header 4Often used for subheaders.
Size: 16px / 1rem
Line-height: 24px
Weight: 500 Medium
Header 5Often used for subheaders or component titles.

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.

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

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

The web fonts used for non-English/non-Latin scripts varies and requires a separate set of font sizes and specifications.

LanguageSystem default fontSystem default font (fallback)System default font (fallback)System default font (fallback)System default font (fallback)System default font (fallback)Region used by Dell Technologies websites
ArabicArialBahrain, Egypt, Jordan, Kuwait, Middle East, Oman, Qatar, Saudi Arabia, United Arab Emirates, Yemen, Lebanon, Tunisia, Algeria, Morocco
Chinese
(Simplified)
Microsoft YaheiHiragino Sans GBSTHHeitiSTXiheiSimHeiArial Unicode MSChina
Chinese
(Traditional)
Microsoft JhengHeiApple LiGothicLiHei ProHong Kong, Taiwan
JapaneseMeiryo
UI Reg
MS UI Gothic
Reg
Hiragino Kaku Gothic
Reg
OsakaJapan
KoreanMalgun GothicApple GothicGulimKorea
Hindi,
Devanagari
Malgun GothicUtsaahDevanagari MTCurrently
N/A
HebrewArialIsrael
ThaiCordia NewMicrosoft Sans
Serif
Currently
N/A
TamilNirmala UILathaInaiMathiCurrently
N/A
TeluguGautamiTelugu Sangam MNCurrently
N/A
KannadaTungaKannada Sangam MNCurrently
N/A
MalayalamKartikaMalayalam Sangam MNCurrently
N/A
GujaratiShrutiNirmala
UI
Gujarati MTGujarati Sangam MNCurrently
N/A
BengaliVrindaBangla Sangam MNCurrently
N/A

Storybook demos

Storybook

Vanilla typography demo

View the typography style and code in Vanilla.
Storybook

Web Components typography demo

View the typography style and code for Web Components.
Storybook

React typography demo

View the typography style and code in React.

Articles

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