Text Scale
Text Scale adjusts every framework font size and pixel line height from one screen modifier. It composes with Scale, so you can change text readability without applying the same factor to interface geometry or text strokes.
Basic Usage
Add screen--text-scale-{size} to the
screen. Text Scale changes framework typography while
Scale
Scale
Scale interface to affect content density and readability
The Scale system provides utility classes to scale the entire interface by adjusting the UI scale factor. This is useful for adapting content density for different viewing distances or user preferences.
continues to control the rest of the interface.
<div class="screen screen--text-scale-large">
<!-- All framework typography renders at 125%. -->
</div>Available Levels
Text Scale uses four factors from 80% to 150%. Each factor applies after device density and Scale Scale Scale interface to affect content density and readability The Scale system provides utility classes to scale the entire interface by adjusting the UI scale factor. This is useful for adapting content density for different viewing distances or user preferences. .
| Class | Factor | Result |
|---|---|---|
screen--text-scale-small
|
0.8 | 80% of the composed text size |
screen--text-scale-regular
|
1 | 100% of the composed text size |
screen--text-scale-large
|
1.25 | 125% of the composed text size |
screen--text-scale-xlarge
|
1.5 | 150% of the composed text size |
Interactive Preview
Move the slider between the four Text Scale levels. The Weather example updates its framework typography while component dimensions, gaps, and text strokes keep their regular scale.
Regular · 100%
Weather
Las Vegas<div class="screen screen--text-scale-regular">
<!-- Replace regular with small, large, or xlarge. -->
</div>Combining Scale and Text Scale
Scale sets the base size for the whole interface, including component dimensions, spacing, and typography. Text Scale then multiplies only the typography on top of that base while leaving the surrounding geometry unchanged. For example, a 66% Scale combined with a 150% Text Scale produces text at 99% of its original size inside an interface that remains at 66%. Device density is still part of the framework's typography calculation, so Text Scale complements rather than replaces the device's font bundle and density settings.
Custom Typography
Framework classes scale automatically. Use --text-ui-scale for custom CSS that follows framework typography.
<style>
.custom-reading {
font-size: calc(20px * var(--text-ui-scale));
line-height: calc(26px * var(--text-ui-scale));
}
</style>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4/8/16-bit |
|---|---|---|---|---|
--content-scale
|
1 | — | — | — |
--device-ui-scale
|
1 | — | — | — |
--modifier-scale
|
1 | — | — | — |
--modifier-text-scale
|
1 | — | — | — |
--text-ui-scale
|
1 | — | — | — |
--ui-scale
|
calc(var(--device-ui-scale) * var(--modifier-scale)) | — | — | — |