CSS font Shorthand Order Builder

Build CSS font shorthand in style/variant/weight/stretch/size/line-height/family order using literal validated family; shorthand accepts stretch keywords only, not longhand percentages. Other font settings are reset by CSS shorthand; no injected syntax or browser-support guarantee.

Description

CSS font shorthand combines several font properties in a defined grammar and resets omitted font settings.

CSS font shorthand combines several font properties in a defined grammar and resets omitted font settings. Literal family handling prevents arbitrary syntax injection.^[1]

Enter exact supported keywords, weight 1–1000, positive pixel size/line height and an ASCII family beginning with a letter followed by ≤127 letters/digits/spaces/_/-. Emit numbers at 12 significant digits and quote the family.

When to use CSS font Shorthand Order Builder

Use CSS font Shorthand Order Builder when you need to evaluate the supplied records under the calculation and evidence rules below. Stretch accepts keywords only. No browser support or preservation of other font properties is guaranteed.

Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.

How to use CSS font Shorthand Order Builder and understand its results

Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.
Enter styleKeyword, variantKeyword, weight, stretchKeyword, sizePx, lineHeightPx, fontFamily using the field table and calculation rules, then run the tool.
Read cssFontShorthand. 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
styleKeyword	Style keyword	string	Required
variantKeyword	Variant keyword	string	Required
weight	Weight	number	Required
stretchKeyword	Stretch keyword	string	Required
sizePx	Size px	number	Required
lineHeightPx	Line height px	number	Required
fontFamily	Font family	string	Required

style variant weight stretch sizePx/lineHeightPx quotedFamily

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
cssFontShorthand	Css font shorthand	string

json

{
  "input": {
    "styleKeyword": "italic",
    "variantKeyword": "small-caps",
    "weight": 700,
    "stretchKeyword": "normal",
    "sizePx": 16,
    "lineHeightPx": 24,
    "fontFamily": "Example Sans"
  },
  "output": {
    "cssFontShorthand": "italic small-caps 700 normal 16px/24px \"Example Sans\""
  }
}

Limitations and assumptions

Stretch accepts keywords only. No browser support or preservation of other font properties is guaranteed.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use Type Scale Token Naming Export: Named type-scale tokens export measured design choices as CSS custom properties. Naming policy should be explicit and stable. For a complementary task, use Fallback Metrics Ascent/Descent Override: Font metrics overrides and size-adjust scaling interact. The requested percentages must account for scaling to reach the target layout metrics.

References

CSS font Shorthand Order Builder — tool.io

Similar or alternative tools

Type Scale Token Naming Export
Named type-scale tokens export measured design choices as CSS custom properties. Naming policy should be explicit and stable.
Fallback Metrics Ascent/Descent Override
Font metrics overrides and size-adjust scaling interact. The requested percentages must account for scaling to reach the target layout metrics.