Value
Figures and readouts on a plugin screen. Twelve size variants from xxsmall to peta, plus value--tnums for tabular numbers that keep columns aligned.
Size Variants
The Value system offers twelve size variants, from XXSmall to Peta.
Size Ladder
Each tier maps to one font size, and that size holds on every device, bit depth, and font bundle.
A bare value renders at the Base tier.
Scale
Scale
Scale interface to affect content density and readability
Scale the whole interface from one screen modifier by changing the UI scale factor. Use it to match content density to viewing distance or user preference.
and
Text Scale
Text Scale
Scale all framework typography independently of interface geometry
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.
multiply these sizes from the screen.
| Class | Font size |
|---|---|
value--xxsmall
|
16px |
value--xsmall
|
20px |
value--small
|
26px |
value--base
|
38px |
value--large
|
58px |
value--xlarge
|
74px |
value--xxlarge
|
96px |
value--xxxlarge
|
128px |
value--mega
|
170px |
value--giga
|
220px |
value--tera
|
290px |
value--peta
|
380px |
Value and the text-- utilities share tier names but not sizes.
value--xlarge is 74px where text--xlarge is 26px, and the utility that matches value--xlarge is text--mega.
XXSmall
The value--xxsmall class creates the smallest text size.
Value
XXSmall
<span class="value value--xxsmall">Example</span>
<span class="value value--xxsmall value--tnums">48,206.62</span>XSmall
The value--xsmall class is one step larger than XXSmall.
Value
XSmall
<span class="value value--xsmall">Example</span>
<span class="value value--xsmall value--tnums">48,206.62</span>Small
The value--small class creates a smaller text size.
Value
Small
<span class="value value--small">Example</span>
<span class="value value--small value--tnums">48,206.62</span>Base
The base value class without size modifiers
and the value--base class both produce the same visual result.
See the Responsive Values section for examples.
Value
Base
<span class="value">Example</span>
<span class="value value--tnums">48,206.62</span>
<!-- Or using the base modifier -->
<span class="value value--base">Example</span>
<span class="value value--base value--tnums">48,206.62</span>Large
The value--large class creates larger text.
Value
Large
<span class="value value--large">Example</span>
<span class="value value--large value--tnums">48,206.62</span>XLarge
The value--xlarge class provides larger text.
Value
XLarge
<span class="value value--xlarge">Example</span>
<span class="value value--xlarge value--tnums">48,206.62</span>XXLarge
The value--xxlarge class creates very large text.
Value
XXLarge
<span class="value value--xxlarge">Example</span>
<span class="value value--xxlarge value--tnums">48,206.62</span>XXXLarge
The value--xxxlarge class provides very large text.
Value
XXXLarge
<span class="value value--xxxlarge">Example</span>
<span class="value value--xxxlarge value--tnums">48,206.62</span>Mega
The value--mega class creates extremely large text.
Value
Mega
<span class="value value--mega value--tnums">42</span>Giga
The value--giga class provides massive text.
Value
Giga
<span class="value value--giga value--tnums">42</span>Tera
The value--tera class creates colossal text.
Value
Tera
<span class="value value--tera value--tnums">42</span>Peta
The value--peta class provides the largest text.
Value
Peta
<span class="value value--peta value--tnums">42</span>Numerical Display
The Value system includes special formatting options for numerical values.
Tabular Numbers
Add the value--tnums modifier to enable tabular numbers.
Value
Tabular Numbers
<span class="value value--large">Regular: 48,206.62</span>
<span class="value value--large value--tnums">Tabular: 48,206.62</span>Responsive Values
The Value system supports responsive variants using breakpoint prefixes.
Breakpoint Prefixes
Use breakpoint prefixes like sm:,
md:, lg:
to apply different sizes per device size class.
Value
Responsive
<!-- Small by default, large on md screens, xlarge on lg screens -->
<span class="value value--small md:value--large lg:value--xlarge">
Responsive Value
</span>
<!-- Progressive scaling with screen size -->
<span class="value value--xsmall sm:value--small md:value--base lg:value--large value--tnums">
1,234.56
</span>
<!-- Using base modifier to reset to default size at breakpoint -->
<span class="value value--small lg:value--base">
Small by default, base on large screens
</span>Orientation and Size+Orientation
Value sizes can adapt to orientation with portrait: and can be combined
with size breakpoints (e.g., md:portrait:).
Value
Orientation
<!-- Orientation only: smaller in portrait -->
<span class="value value--large portrait:value--small">Orientation Variant</span>
<!-- Size + orientation: xlarge only on md+ screens in portrait -->
<span class="value value--small md:portrait:value--xlarge value--tnums">42,000.00</span>Values in JavaScript
The value typography is readable from JS via
TRMNLPaint.type('value', { el }), which probes the
resolved font family, size, weight and line-height from the live cascade (so it follows the active font
bundle and density automatically), and applyType()
writes it onto a node. This is how JS-drawn visuals borrow the same big-number face as
.value stat tiles (for example the chart gauge’s
weekly value). See
Painting Typography
Painting Typography
Read text roles as TypeSpec objects for custom text and chart labels
The typography resolver reads a text role or utility class as a TypeSpec: font, size, weight, paint, and optional stroke. Apply it to custom text, or convert it for Highcharts labels.
.
Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--value-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--value-font-size
|
calc(38px * var(--text-ui-scale)) | - | calc(38px * var(--text-ui-scale)) | - |
--value-font-smoothing
|
auto | - | auto | - |
--value-font-weight
|
450 | - | 450 | - |
--value-line-height
|
calc(42px * var(--text-ui-scale)) | - | calc(42px * var(--text-ui-scale)) | - |
| Xxsmall | ||||
--value-xxsmall-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--value-xxsmall-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--value-xxsmall-font-smoothing
|
none | none | auto | - |
--value-xxsmall-font-weight
|
400 | 400 | 700 | - |
--value-xxsmall-line-height
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(14px * var(--text-ui-scale)) | - |
| Xsmall | ||||
--value-xsmall-font-size
|
calc(20px * var(--text-ui-scale)) | - | calc(20px * var(--text-ui-scale)) | - |
--value-xsmall-font-weight
|
600 | - | 600 | - |
--value-xsmall-line-height
|
calc(24px * var(--text-ui-scale)) | - | calc(24px * var(--text-ui-scale)) | - |
| Small | ||||
--value-small-font-size
|
calc(26px * var(--text-ui-scale)) | - | calc(26px * var(--text-ui-scale)) | - |
--value-small-font-weight
|
500 | - | 475 | - |
--value-small-line-height
|
calc(29px * var(--text-ui-scale)) | - | calc(29px * var(--text-ui-scale)) | - |
| Large | ||||
--value-large-font-size
|
calc(58px * var(--text-ui-scale)) | - | calc(58px * var(--text-ui-scale)) | - |
--value-large-font-weight
|
400 | - | 400 | - |
--value-large-line-height
|
calc(70px * var(--text-ui-scale)) | - | calc(70px * var(--text-ui-scale)) | - |
| Xlarge | ||||
--value-xlarge-font-size
|
calc(74px * var(--text-ui-scale)) | - | calc(74px * var(--text-ui-scale)) | - |
--value-xlarge-font-weight
|
375 | - | 375 | - |
--value-xlarge-line-height
|
calc(86px * var(--text-ui-scale)) | - | calc(86px * var(--text-ui-scale)) | - |
| Xxlarge | ||||
--value-xxlarge-font-size
|
calc(96px * var(--text-ui-scale)) | - | calc(96px * var(--text-ui-scale)) | - |
--value-xxlarge-font-weight
|
350 | - | 350 | - |
--value-xxlarge-line-height
|
calc(108px * var(--text-ui-scale)) | - | calc(108px * var(--text-ui-scale)) | - |
| Xxxlarge | ||||
--value-xxxlarge-font-size
|
calc(128px * var(--text-ui-scale)) | - | calc(128px * var(--text-ui-scale)) | - |
--value-xxxlarge-font-weight
|
300 | - | 300 | - |
--value-xxxlarge-line-height
|
calc(128px * var(--text-ui-scale)) | - | calc(128px * var(--text-ui-scale)) | - |
| Mega | ||||
--value-mega-font-size
|
calc(170px * var(--text-ui-scale)) | - | calc(170px * var(--text-ui-scale)) | - |
--value-mega-font-weight
|
275 | - | 275 | - |
--value-mega-line-height
|
calc(180px * var(--text-ui-scale)) | - | calc(180px * var(--text-ui-scale)) | - |
| Giga | ||||
--value-giga-font-size
|
calc(220px * var(--text-ui-scale)) | - | calc(220px * var(--text-ui-scale)) | - |
--value-giga-font-weight
|
250 | - | 250 | - |
--value-giga-line-height
|
calc(230px * var(--text-ui-scale)) | - | calc(230px * var(--text-ui-scale)) | - |
| Tera | ||||
--value-tera-font-size
|
calc(290px * var(--text-ui-scale)) | - | calc(290px * var(--text-ui-scale)) | - |
--value-tera-font-weight
|
225 | - | 225 | - |
--value-tera-line-height
|
calc(300px * var(--text-ui-scale)) | - | calc(300px * var(--text-ui-scale)) | - |
| Peta | ||||
--value-peta-font-size
|
calc(380px * var(--text-ui-scale)) | - | calc(380px * var(--text-ui-scale)) | - |
--value-peta-font-weight
|
200 | - | 200 | - |
--value-peta-line-height
|
calc(390px * var(--text-ui-scale)) | - | calc(390px * var(--text-ui-scale)) | - |