rem-Based Spacing Scale Generator

Apply caller selected spacing multipliers to a rem base; no implicit root pixel size.

Description

Generate rem spacing values from a base and supplied multipliers.

A rem spacing scale expresses several design tokens as multiples of one base spacing. It can be calculated without knowing the page's current pixel font size.

When to use this tool

Generate rem spacing values from a base and supplied multipliers. Use it when the input measurements and conventions below match the operation you need.

  • Prepare baseRem, multipliers, respecting the measurement basis and boundaries below.
  • Compare the worked example with your intended operation before reusing its result.

How to use the tool and how it works

  1. Enter every field in the input table using the stated units and exact supported selector spelling where applicable.
  2. Run the tool. Correct input errors before interpreting an output.
  3. Read the result fields below; use accompanying flags and the stated sign, boundary or model convention when interpreting a number.

baseRem must be positive. The tool multiplies it by each supplied nonnegative multiplier, preserving list order, and returns the rem values; between 1 and 128 multipliers are accepted.1

Input fieldMeaning and unitsAccepted input
baseRemBase rem.Finite number; greater than zero
multipliersMultipliers.List of finite numbers
Output fieldInterpretation
resultObject containing the following named result fields.
result.spacingRemSpacing rem list, in the ordering described in the calculation.
json
{
  "input": {
    "baseRem": 0.25,
    "multipliers": [
      0,
      1,
      2,
      4
    ]
  },
  "output": {
    "result": {
      "spacingRem": [
        0,
        0.25,
        0.5,
        1
      ]
    }
  }
}

Limitations and assumptions

  • No CSS is applied and no pixel conversion, sorting or deduplication is performed. The rendered size depends on the consuming page's root font size.
  • Every declared field is required and unexpected fields are rejected. Numeric inputs must be finite; input errors are distinct from a valid false result or an explicitly qualified output.
  • Extremely large inputs and nonfinite or excessively large outputs are rejected. List positions reported by the tool use zero-based indices unless stated otherwise.

Alternative or Complementary methods

Compare the metric calculation with the intended font and rendered text. Font shaping and layout inspection are more appropriate when the task depends on actual glyph positions or reading conditions. Compare the scope of the nearby tools below before substituting one.

References

  1. Tool behavior and example: rem-Based Spacing Scale Generator — tool.io

Similar or alternative tools

Don't forget to set a bookmark for tool.io!
Privacy | Imprint | Cookies