The DevExpress Design System defines the following groups of typography styles:
- Font family
- Font size
- Font weight
- Letter spacing
- Line height
- Text case
- Text decoration
Important
Applicable to DevExpress Blazor suite only.
Semantic CSS Variables
DevExpress components reference semantic (theme-level) CSS variables. When you switch an application’s theme, the new theme changes variable values, while variables references in components remain the same.
The following sections list semantic typography CSS variables and associated values in DevExpress Fluent themes:
Font Family
| CSS Variable |
Value |
--dxds-font-family-sans-serif |
segoe ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif |
--dxds-font-family-serif |
Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol |
--dxds-font-family-mono |
Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace |
Font Size
| CSS Variable |
Value |
Preview |
--dxds-font-size-caption-sm |
0.625rem |
Lorem ipsum |
--dxds-font-size-caption-md |
0.75rem |
Lorem ipsum |
--dxds-font-size-caption-lg |
0.875rem |
Lorem ipsum |
--dxds-font-size-base-xs |
0.625rem |
Lorem ipsum |
--dxds-font-size-base-sm |
0.75rem |
Lorem ipsum |
--dxds-font-size-base-md |
0.875rem |
Lorem ipsum |
--dxds-font-size-base-lg |
1rem |
Lorem ipsum |
--dxds-font-size-title-xs |
0.875rem |
Lorem ipsum |
--dxds-font-size-title-sm |
1rem |
Lorem ipsum |
--dxds-font-size-title-md |
1.25rem |
Lorem ipsum |
--dxds-font-size-title-lg |
1.5rem |
Lorem ipsum |
--dxds-font-size-headline-sm |
1.5rem |
Lorem ipsum |
--dxds-font-size-headline-md |
1.75rem |
Lorem ipsum |
--dxds-font-size-headline-lg |
2rem |
Lorem ipsum |
--dxds-font-size-headline-xl |
2.5rem |
Lorem ipsum |
Font Weight
| CSS Variable |
Value |
Preview |
--dxds-font-weight-caption-default |
400 |
Lorem ipsum |
--dxds-font-weight-caption-strong |
600 |
Lorem ipsum |
--dxds-font-weight-caption-stronger |
700 |
Lorem ipsum |
--dxds-font-weight-base-default |
400 |
Lorem ipsum |
--dxds-font-weight-base-strong |
600 |
Lorem ipsum |
--dxds-font-weight-base-stronger |
700 |
Lorem ipsum |
--dxds-font-weight-title-default |
600 |
Lorem ipsum |
--dxds-font-weight-title-strong |
700 |
Lorem ipsum |
--dxds-font-weight-headline-default |
600 |
Lorem ipsum |
--dxds-font-weight-headline-strong |
700 |
Lorem ipsum |
Letter Spacing
| CSS Variable |
Value |
Preview |
--dxds-letter-spacing-caption-sm |
0 |
Lorem ipsum |
--dxds-letter-spacing-caption-md |
0 |
Lorem ipsum |
--dxds-letter-spacing-caption-lg |
0 |
Lorem ipsum |
--dxds-letter-spacing-base-xs |
0 |
Lorem ipsum |
--dxds-letter-spacing-base-sm |
0 |
Lorem ipsum |
--dxds-letter-spacing-base-md |
0 |
Lorem ipsum |
--dxds-letter-spacing-base-lg |
0 |
Lorem ipsum |
--dxds-letter-spacing-title-xs |
0 |
Lorem ipsum |
--dxds-letter-spacing-title-sm |
0 |
Lorem ipsum |
--dxds-letter-spacing-title-md |
0 |
Lorem ipsum |
--dxds-letter-spacing-title-lg |
0 |
Lorem ipsum |
--dxds-letter-spacing-headline-sm |
0 |
Lorem ipsum |
--dxds-letter-spacing-headline-md |
0 |
Lorem ipsum |
--dxds-letter-spacing-headline-lg |
0 |
Lorem ipsum |
--dxds-letter-spacing-headline-xl |
0 |
Lorem ipsum |
Line Height
| CSS Variable |
Value |
Preview |
--dxds-line-height-caption-sm |
0.875rem |
Lorem ipsum |
--dxds-line-height-caption-md |
1rem |
Lorem ipsum |
--dxds-line-height-caption-lg |
1.25rem |
Lorem ipsum |
--dxds-line-height-base-xs |
0.875rem |
Lorem ipsum |
--dxds-line-height-base-sm |
1rem |
Lorem ipsum |
--dxds-line-height-base-md |
1.25rem |
Lorem ipsum |
--dxds-line-height-base-lg |
1.375rem |
Lorem ipsum |
--dxds-line-height-title-xs |
1.25rem |
Lorem ipsum |
--dxds-line-height-title-sm |
1.375rem |
Lorem ipsum |
--dxds-line-height-title-md |
1.75rem |
Lorem ipsum |
--dxds-line-height-title-lg |
2rem |
Lorem ipsum |
--dxds-line-height-headline-sm |
2rem |
Lorem ipsum |
--dxds-line-height-headline-md |
2.25rem |
Lorem ipsum |
--dxds-line-height-headline-lg |
2.5rem |
Lorem ipsum |
--dxds-line-height-headline-xl |
3.5rem |
Lorem ipsum |
Text Case
Text case styles are defined by base CSS variables (no theme-level overrides). The following section lists all available text case CSS variables and their associated values: CSS Variables.
Text Decoration
Text decoration styles are defined by base CSS variables (no theme-level overrides). The following section lists all available text decoration CSS variables and their associated values: CSS Variables.
Base CSS Variables
This section lists base typography CSS variables (and associated values) used in the DevExpress Design System. Semantic variables reference these values based on size modes and target UI elements.
Font Family
| CSS Variable |
Value |
--dxds-font-family-system-sans-serif |
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif |
--dxds-font-family-system-serif |
Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol |
--dxds-font-family-system-mono |
Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace |
--dxds-font-family-segoe-ui |
segoe ui |
--dxds-font-family-inter |
Inter |
Font Size
| CSS Variable |
Value |
Preview |
--dxds-font-size-100 |
0.625rem |
Lorem ipsum |
--dxds-font-size-110 |
0.6875rem |
Lorem ipsum |
--dxds-font-size-120 |
0.75rem |
Lorem ipsum |
--dxds-font-size-140 |
0.875rem |
Lorem ipsum |
--dxds-font-size-160 |
1rem |
Lorem ipsum |
--dxds-font-size-180 |
1.125rem |
Lorem ipsum |
--dxds-font-size-200 |
1.25rem |
Lorem ipsum |
--dxds-font-size-220 |
1.375rem |
Lorem ipsum |
--dxds-font-size-240 |
1.5rem |
Lorem ipsum |
--dxds-font-size-260 |
1.625rem |
Lorem ipsum |
--dxds-font-size-280 |
1.75rem |
Lorem ipsum |
--dxds-font-size-300 |
1.875rem |
Lorem ipsum |
--dxds-font-size-320 |
2rem |
Lorem ipsum |
--dxds-font-size-360 |
2.25rem |
Lorem ipsum |
--dxds-font-size-400 |
2.5rem |
Lorem ipsum |
--dxds-font-size-440 |
2.75rem |
Lorem ipsum |
--dxds-font-size-480 |
3rem |
Lorem ipsum |
--dxds-font-size-520 |
3.25rem |
Lorem ipsum |
--dxds-font-size-560 |
3.5rem |
Lorem ipsum |
--dxds-font-size-600 |
3.75rem |
Lorem ipsum |
--dxds-font-size-640 |
4rem |
Lorem ipsum |
--dxds-font-size-680 |
4.25rem |
Lorem ipsum |
--dxds-font-size-720 |
4.5rem |
Lorem ipsum |
Font Weight
| CSS Variable |
Value |
Preview |
--dxds-font-weight-100 |
100 |
Lorem ipsum |
--dxds-font-weight-200 |
200 |
Lorem ipsum |
--dxds-font-weight-300 |
300 |
Lorem ipsum |
--dxds-font-weight-400 |
400 |
Lorem ipsum |
--dxds-font-weight-500 |
500 |
Lorem ipsum |
--dxds-font-weight-600 |
600 |
Lorem ipsum |
--dxds-font-weight-700 |
700 |
Lorem ipsum |
--dxds-font-weight-800 |
800 |
Lorem ipsum |
--dxds-font-weight-900 |
900 |
Lorem ipsum |
Letter Spacing
| CSS Variable |
Value |
Preview |
--dxds-letter-spacing-0 |
0 |
Lorem ipsum |
Line Height
| CSS Variable |
Value |
Preview |
--dxds-line-height-100 |
0.625rem |
Lorem ipsum |
--dxds-line-height-120 |
0.75rem |
Lorem ipsum |
--dxds-line-height-140 |
0.875rem |
Lorem ipsum |
--dxds-line-height-160 |
1rem |
Lorem ipsum |
--dxds-line-height-180 |
1.125rem |
Lorem ipsum |
--dxds-line-height-200 |
1.25rem |
Lorem ipsum |
--dxds-line-height-220 |
1.375rem |
Lorem ipsum |
--dxds-line-height-240 |
1.5rem |
Lorem ipsum |
--dxds-line-height-260 |
1.625rem |
Lorem ipsum |
--dxds-line-height-280 |
1.75rem |
Lorem ipsum |
--dxds-line-height-300 |
1.875rem |
Lorem ipsum |
--dxds-line-height-320 |
2rem |
Lorem ipsum |
--dxds-line-height-360 |
2.25rem |
Lorem ipsum |
--dxds-line-height-400 |
2.5rem |
Lorem ipsum |
--dxds-line-height-440 |
2.75rem |
Lorem ipsum |
--dxds-line-height-480 |
3rem |
Lorem ipsum |
--dxds-line-height-520 |
3.25rem |
Lorem ipsum |
--dxds-line-height-560 |
3.5rem |
Lorem ipsum |
--dxds-line-height-600 |
3.75rem |
Lorem ipsum |
--dxds-line-height-640 |
4rem |
Lorem ipsum |
--dxds-line-height-680 |
4.25rem |
Lorem ipsum |
--dxds-line-height-760 |
4.75rem |
Lorem ipsum |
--dxds-line-height-840 |
5.25rem |
Lorem ipsum |
--dxds-line-height-920 |
5.75rem |
Lorem ipsum |
Text Case
| CSS Variable |
Value |
Preview |
--dxds-text-case-none |
none |
Lorem ipsum |
--dxds-text-case-uppercase |
uppercase |
Lorem ipsum |
--dxds-text-case-lowercase |
lowercase |
Lorem ipsum |
--dxds-text-case-capitalize |
capitalize |
Lorem ipsum |
Text Decoration
| CSS Variable |
Value |
Preview |
--dxds-text-decoration-none |
none |
Lorem ipsum |
--dxds-text-decoration-underline |
underline |
Lorem ipsum |
--dxds-text-decoration-line-through |
line-through |
Lorem ipsum |