designsystem-405635-typography.md
The DevExpress Design System defines the following groups of typography styles:
Important
Applicable to DevExpress Blazor suite only.
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:
| 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 |
| 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 |
| 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 |
| 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 |
| 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 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 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.
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.
| 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 |
| 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 |
| 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 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-letter-spacing-0 | 0 | Lorem ipsum |
| 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 |
| 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 |
| 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 |