<h2>Font Ramp</h2>
<p>The default styles apply to all <a href="/foundations/grid/#breakpoints">breakpoints</a>, except for displays and headers with breakpoints under 1024 pixels. That ramp is featured in the <a href="/foundations/typography/#responsive-font-ramp">responsive font ramp</a> 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.</p>
<details data-name='typography-collection' data-table='Font Ramp'></details>

<h2>Responsive Font Ramp</h2>
<p>For XS (extra small) to M (medium) <a href="/foundations/grid/#breakpoints">breakpoints</a> 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.</p>
<details data-name='typography-collection' data-table='Responsive font ramp'></details>

<h2>Text modifiers</h2>
<p>Typography v2 has a few style variants, with more to come, pending new releases.</p>
<details data-name='typography-collection' data-table='Text modifiers'></details>

<h2>Header and body text spacing</h2>
<p>Learn how to pair headers with body text using adequate spacing to improve readability.</p>
<details data-name='image-block' data-images='[{"alt":"Image of 16px spacing between Header 1 and Body 1","caption":"16 pixels of padding between Header 1 and Body 1","url":"https://dds.dell.com/site/stage/9c/87/Typography_H1_Body_Spacing_212007_V1_b45edcd296.png"},{"alt":"Image of 16 pixels of padding between Header 2 and Body 2","caption":"16 pixels of padding between Header 2 and Body 2","url":"https://dds.dell.com/site/stage/82/e9/Typography_H2_Body_Spacing_212007_V1_94e0e69217.png"},{"alt":"Image of 12 pixels of padding between Header 3 and Body 2","caption":"12 pixels of padding between Header 3 and Body 2","url":"https://dds.dell.com/site/stage/92/81/Typography_H3_Body_Spacing_212007_V1_d00aacb268.png"},{"alt":"Image of 12 pixels of padding between Header 4 and Body 2","caption":"12 pixels of padding between Header 4 and Body 2","url":"https://dds.dell.com/site/stage/eb/62/Typography_H4_Body_Spacing_212007_V1_ca96206e19.png"},{"alt":"Image of 8 pixels of padding between Header 5 and Body 2","caption":"8 pixels of padding between Header 5 and Body 2","url":"https://dds.dell.com/site/stage/3b/19/Typography_H5_Body_Spacing_212007_V1_50f5b2f1bd.png"},{"alt":"Image of 8 pixels of padding between Header 6 and Body 2","caption":"8 pixels of padding between Header 6 and Body 2","url":"https://dds.dell.com/site/stage/94/64/Typography_H6_Body_Spacing_212007_V1_bc35c7c94e.png"}]' data-numberofcolumns='3'></details>

<h2>Text color: light mode</h2>
<p>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:</p>
<p><a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a></p>
<p><a href="/foundations/color/#accessibility">View Contrast Guidance</a></p>
<details data-name='color-collection' data-colors='[{"color":"Gray 900, #0E0E0E","useCase":"Default text color","opacity":1,"colorBorder":""},{"color":"Gray 800, #636363","useCase":"Helper text, block quote","opacity":1,"colorBorder":""},{"color":"Red 700, #BB2A33","useCase":"Error text","opacity":1,"colorBorder":""},{"color":"Blue 600, #0672CB","useCase":"Default link color","opacity":1,"colorBorder":""}]' data-displaymode='colorTable'></details>

<h2>Accessibility</h2>
<h3>Use semantic structure for headings</h3>
<p>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.</p>
<p>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.</p>
<details data-name='image-block' data-images='[{"alt":"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.","caption":"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.","url":"https://dds.dell.com/site/stage/d0/57/Typography_Semantic_Structure_e5de50a6de.png"}]' data-numberofcolumns='1'></details>

<h3>Use the correct heading style</h3>
<p>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.</p>
<h3>Follow line-height and spacing guidelines for text</h3>
<p>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.</p>
<p>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:</p>
<ul>
<li>Line-height that is at least 1.5 times the font size</li>
<li>Spacing between paragraphs that is at least 2 times the font size</li>
<li>Letter spacing that is at least 0.12 times the font size</li>
<li>Word spacing that is at least 0.16 times the font size</li>
</ul>
<p>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).</p>
<p>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html">1.4.12 Text Spacing </a></p>
<h2>Content guidelines</h2>
<h3>Header descriptions</h3>
<p>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.</p>
<p><strong>Do:</strong> “How to contact us”<br><strong>Don’t:</strong> “Let’s talk” or “Get the help you need when you need it&quot;</p>
<h2>Internationalization</h2>
<p>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:</p>
<ul>
<li>Don’t hard code fonts.</li>
<li>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.</li>
<li>For languages with glyphs, consider height and width as a design factor.</li>
<li>Some languages, such as Arabic and Hebrew, are read from right-to-left, which means their characters are also displayed from right-to-left.</li>
<li>Chinese, Japanese, and Korean glyphs are monospaced, which means characters are the same width and have equal space between them.</li>
</ul>
<p>The web fonts used for non-English/non-Latin scripts varies and requires a separate set of font sizes and specifications.</p>
<table>
<thead>
<tr>
<th>Language</th>
<th>System default font</th>
<th>System default font (fallback)</th>
<th>System default font (fallback)</th>
<th>System default font (fallback)</th>
<th>System default font (fallback)</th>
<th>System default font (fallback)</th>
<th>Region used by Dell Technologies websites</th>
</tr>
</thead>
<tbody><tr>
<td>Arabic</td>
<td>Arial</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Bahrain, Egypt, Jordan, Kuwait, Middle East, Oman, Qatar, Saudi Arabia, United Arab Emirates, Yemen, Lebanon, Tunisia, Algeria, Morocco</td>
</tr>
<tr>
<td>Chinese<br/>(Simplified)</td>
<td>Microsoft Yahei</td>
<td>Hiragino Sans GB</td>
<td>STHHeiti</td>
<td>STXihei</td>
<td>SimHei</td>
<td>Arial Unicode MS</td>
<td>China</td>
</tr>
<tr>
<td>Chinese<br/>(Traditional)</td>
<td>Microsoft JhengHei</td>
<td>Apple LiGothic</td>
<td>LiHei Pro</td>
<td></td>
<td></td>
<td></td>
<td>Hong Kong, Taiwan</td>
</tr>
<tr>
<td>Japanese</td>
<td>Meiryo<br/>UI</td>
<td>MS UI Gothic<br/>Reg</td>
<td>Hiragino Kaku Gothic<br/>Reg</td>
<td>Osaka</td>
<td></td>
<td></td>
<td>Japan</td>
</tr>
<tr>
<td>Korean</td>
<td>Malgun Gothic</td>
<td>Apple Gothic</td>
<td>Gulim</td>
<td></td>
<td></td>
<td></td>
<td>Korea</td>
</tr>
<tr>
<td>Hindi,<br/>Devanagari</td>
<td>Malgun Gothic</td>
<td>Utsaah</td>
<td>Devanagari MT</td>
<td></td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
<tr>
<td>Hebrew</td>
<td>Arial</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Israel</td>
</tr>
<tr>
<td>Thai</td>
<td>Cordia New</td>
<td>Microsoft Sans<br/>Serif</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
<tr>
<td>Tamil</td>
<td>Nirmala UI</td>
<td>Latha</td>
<td>InaiMathi</td>
<td></td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
<tr>
<td>Telugu</td>
<td>Gautami</td>
<td>Telugu Sangam MN</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
<tr>
<td>Kannada</td>
<td>Tunga</td>
<td>Kannada Sangam MN</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
<tr>
<td>Malayalam</td>
<td>Kartika</td>
<td>Malayalam Sangam MN</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
<tr>
<td>Gujarati</td>
<td>Shruti</td>
<td>Nirmala<br/>UI</td>
<td>Gujarati MT</td>
<td>Gujarati Sangam MN</td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
<tr>
<td>Bengali</td>
<td>Vrinda</td>
<td>Bangla Sangam MN</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Currently<br/> N/A</td>
</tr>
</tbody></table>
<h2>Storybook demos</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://vanilla.delldesignsystem.com/?path=/story/foundations-typography--page","type":"External"},"title":"Vanilla typography demo","description":"View the typography style and code in Vanilla.","icon":"metadata"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://angular.delldesignsystem.com/?path=/story/foundations-typography--page","type":"External"},"title":"Angular typography demo","description":"View the typography style and code in Angular.","icon":"angular"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://react.delldesignsystem.com/index.html?path=/docs/foundations-typography--docs","type":"External"},"title":"React typography demo","description":"View the typography style and code in React.","icon":"react"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='3' data-NumberOfColumnsSmall='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit WebAIM Site","path":"https://webaim.org/techniques/semanticstructure/","type":"External"},"title":"WebAIM semantic structure","description":"Using multiples of 4 to get more flexibility in your UI.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit W3 Site","path":"https://www.w3.org/WAI/tutorials/page-structure/headings/","type":"External"},"title":"W3 headings tutorial","description":"Create accessible headings for your experience.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Chrome Web Store","path":"https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related?hl=en","type":"External"},"title":"HeadingsMap plugin","description":"Chrome browser extension highlights and jumps to all page headings.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='3' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

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

Typography

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
