Font Weights
SDX applies three different Font Weights:
Font Scale
The SDX Font Scale stretches across 13 stops, ranging from 0.75rem to 6.5rem. Each font size can be paired with each font weight using SDX design tokens. SDX defines default pairings for the most common use-cases, along with a default responsive behavior. You can deviate from these default pairings for stylistic reasons or if your specific use-case requires you to do so, as long as you stay within the sizes and weights defined on this page.
When deviating from the default SDX font styles, do not forget to define responsive behavior for your custom styles to ensure legibility across all devices.
Body Text
SDX defines three different Styles that are optimized for legibility at smaller sizes.
Body Base
The standard for most user interface copy and long-form content and paragraphs that ensures a pleasant reading experience.
Body S
For components or use cases where space is limited or the information is of supportive nature (as in labels or descriptions).
Body XS
For tertiary content, such as fine print or low-priority supporting details. Body XS should be used sparingly.
None of the SDX Body styles have a built in responsive behavior. They appear identical across all devices and viewports sizes. However, all SDX Body styles do have the <p> paragraph tag by default.
Headline Styles
SDX defines 7 Headline Styles ranging from XS to XXL. Each style has a predefined responsive behavior to ensure legibility and aesthetic appeal across devices and viewport sizes.
Display Styles
SDX defines 4 Display Styles ranging from S to XL. Each style has a predefined responsive behavior to ensure legibility and aesthetic appeal across devices and viewport sizes.
Special Formatting
“compact” class
Semantic Hierarchy
While the SDX styles have predefined H-Tags, you can and should make sure that the H-Tags are overwritten if necessary. Make sure to consciously and clearly define the semantic hierarchy in your design and ensure the proper implementation by documenting your semantic hierarchy to comply with accessibility and SEO requirements.
See accessibility guidelines for more information