<p>DDS v3 foundations use design tokens to provide a unified set of values for key properties. Learn more on the <a href="/getting-started/tokens">tokens page</a>.</p>
<h2>Font Ramp</h2>
<p>A font ramp is a structured set of typography styles defined by design tokens. Each style maps to tokens for font size, line height, and weight, ensuring consistent typography across design and code. Font ramps create clear visual hierarchy and support consistent typography across platforms. </p>
<p>Different font ramps are defined for different <a href="/foundations/grid/#breakpoints">breakpoints</a> ranges (such as default and compact) to optimize readability across screen sizes.</p>
<h3>Default (≥1024px)</h3>
<p>The default font ramp applies to screens <strong>1024px and above.</strong></p>
<p>At this <a href="/foundations/grid/#breakpoints">breakpoint</a>, typography tokens are optimized for larger displays, supporting stronger hierarchy for display and heading styles. These token values are used consistently across both design and development.</p>
<p>Typography styles are <strong>token‑based and independent of HTML tags.</strong> Any heading level (for example, h1) can be paired with a typography style, as long as <strong>semantic structure and logical hierarchy</strong> are preserved.</p>
<details data-name='typography-collection' data-table='Font Ramp' data-hideWidget='false'></details>

<h3>Compact (&lt;1024px)</h3>
<p>The compact font ramp is used for <a href="/foundations/grid/#breakpoints">breakpoints</a> below 1024px.</p>
<p>This ramp uses alternative typography tokens that reduce font sizes and line heights to improve readability and layout density on smaller screens, while preserving the intended hierarchy.</p>
<p>As with the default ramp, typography styles are defined by <strong>tokens rather than HTML elements.</strong> Heading levels may be reassigned as needed, provided that <strong>accessibility and semantic meaning</strong> are preserved.</p>
<details data-name='typography-collection' data-table='Responsive font ramp' data-hideWidget='false'></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' data-hideWidget='false'></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/v2/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/v2/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/v2/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/v2/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/v2/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/v2/stage/94/64/Typography_H6_Body_Spacing_212007_V1_bc35c7c94e.png"}]' data-numberofcolumns='3' data-hideWidget='false'></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' data-hideWidget='false'></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/v2/stage/d0/57/Typography_Semantic_Structure_e5de50a6de.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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=/docs/foundations-typography-overview--docs","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=/docs/foundations-typography-overview--docs","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-overview--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' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

Typography organizes letters, numbers and characters to create clear, legible, and well‑structured content.