em Font-Size Compounding Depth Calculator
Calculate a nested font size from a root size and successive nonnegative em font-size multipliers.
Description
An em font-size multiplier is relative to the inherited font size, so successive nested multipliers compound.
An em font-size multiplier is relative to the inherited font size, so successive nested multipliers compound. A rem measurement instead refers back to the root size and does not compound in this way.1
Calculate a nested font size from a root size and successive nonnegative em font-size multipliers.
When to use em Font-Size Compounding Depth Calculator
Use this tool to calculate a nested font size from a root size and successive nonnegative em font-size multipliers.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use em Font-Size Compounding Depth Calculator and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter rootSize, multipliers using the field table and calculation rules, then run the tool.
- Read fontSize, depth. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| rootSize | Root font size | number; minimum: 0 | Required |
| multipliers | Nested em multipliers | list of number; minimum: 0; minimum entries: 0; maximum entries: 1000 | Required |
Enter a nonnegative root font size and the nonnegative multiplier at each nested level in order. Zero root size or any zero multiplier gives zero immediately; an empty list keeps the root size. The tool multiplies the factors and also accumulates their logarithms, using the latter if intermediate multiplication loses numeric range. A nonfinite final size is rejected; underflow can return zero.
fontSize = rootSize × product(multipliers); depth = number of multipliers Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| fontSize | Final font size | number; minimum: 0 |
| depth | Nesting depth | integer; minimum: 0; maximum: 9007199254740991 |
{
"input": {
"rootSize": 16,
"multipliers": [
1.5,
1.5
]
},
"output": {
"fontSize": 36,
"depth": 2
}
}Limitations and assumptions
This models nested font-size multipliers only, without the cascade, inheritance lookup, browser minimum font sizes or em lengths on unrelated properties. The root size establishes the output unit. At most 1,000 nested multipliers are accepted.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use rem Root Consistency Checker: Resolve a nonnegative rem length against the root font size and compare it with a supplied computed pixel length. For a complementary task, use Translate % Relative To Own Box Width: Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.
References
Similar or alternative tools
- rem Root Consistency Checker
Resolve a nonnegative rem length against the root font size and compare it with a supplied computed pixel length.
- Translate % Relative To Own Box Width
Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.