zfb
GitHub repository

Type to search...

to open search from anywhere

Font size

Set font size from a configured token or an arbitrary CSS font-size value.

Set the size of text for a role such as a caption, paragraph, or heading. A configured font-size token can pair size with its own line height; an arbitrary size lets one element use a validated CSS value.

Quick reference

Example classExpected declarations
text-copyfont-size: var(--zw-font-size-copy); line-height: var(--zw-font-size-copy-leading);
text-[20px]font-size: 20px;
Example setup

The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. Each example declares tokens.fontSizes with size and lineHeight values. A named text token emits both properties when its lineHeight is present; the arbitrary text-[20px] sample emits font-size only. wind-demo supplies borders and spacing, not typography.

Examples in use

Compare paired size tokens

Each token configures both size and leading, with a tighter paired line height for the larger display role.

Compare paired size tokens
HTML
<div class="wind-demo-size">
  <p class="text-caption">Caption / 補足の文字: compact but readable.</p>
  <p class="text-copy">Body / 本文: choose a size that stays comfortable across a paragraph.</p>
  <p class="text-display">Display / 見出し: larger type uses a tighter paired leading.</p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-size-caption: .875rem;
    --zw-font-size-caption-leading: 1.45;
    --zw-font-size-copy: 1rem;
    --zw-font-size-copy-leading: 1.65;
    --zw-font-size-display: 1.5rem;
    --zw-font-size-display-leading: 1.2;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-size {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
}

.wind-demo-size p {
  margin: 0;
  padding: .5rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-size p:last-child {
  border-bottom: 0;
}
.text-caption {
  font-size: var(--zw-font-size-caption);
  line-height: var(--zw-font-size-caption-leading);
}
.text-copy {
  font-size: var(--zw-font-size-copy);
  line-height: var(--zw-font-size-copy-leading);
}
.text-display {
  font-size: var(--zw-font-size-display);
  line-height: var(--zw-font-size-display-leading);
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontSizes": {
        "caption": {
          "size": "0.875rem",
          "lineHeight": "1.45"
        },
        "copy": {
          "size": "1rem",
          "lineHeight": "1.65"
        },
        "display": {
          "size": "1.5rem",
          "lineHeight": "1.2"
        }
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-size": true
    },
    "safelist": {
      "docs-preview": [
        "text-caption",
        "text-copy",
        "text-display"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-size { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-size p { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-size p:last-child { border-bottom: 0; }

Set a one-off size

text-[20px] emits the validated font-size and leaves line-height to the browser or another explicit utility.

Set a one-off size
HTML
<p class="wind-demo-size-custom text-[20px]">One-off 20px / 任意の20pxサイズ</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-size-caption: .875rem;
    --zw-font-size-caption-leading: 1.45;
    --zw-font-size-copy: 1rem;
    --zw-font-size-copy-leading: 1.65;
    --zw-font-size-display: 1.5rem;
    --zw-font-size-display-leading: 1.2;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-size-custom {
  color: #223247;
  border-left: 3px solid #6d7f96;
  padding: .5rem .75rem;
}
.text-\[20px\] {
  font-size: 20px;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontSizes": {
        "caption": {
          "size": "0.875rem",
          "lineHeight": "1.45"
        },
        "copy": {
          "size": "1rem",
          "lineHeight": "1.65"
        },
        "display": {
          "size": "1.5rem",
          "lineHeight": "1.2"
        }
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-size-custom": true
    },
    "safelist": {
      "docs-preview": [
        "text-[20px]"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-size-custom { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }

Custom and named values

Use text-copy for a configured token or text-[20px] for a one-off CSS font-size. Named font-size keys share the text root with colors, so the configuration must keep those token names disjoint. Paired leading is part of the configured font-size token; an arbitrary size without slash syntax does not invent a line height. Choose line height separately when the surrounding text needs a specific rhythm.

Related guides: Utility grammar · Variants

Catalog details

text

FieldValue
Catalog identifierv1.text.size
Class patterntext-<suffix>
Grammar{"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"font-size","allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted valuesThe catalog has no separate accepted-value records for this entry.
Token categoriesfontSizes
Negative-value policyforbidden
Conflict group and rankfont-size (17)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiesfont-size, line-height

Accepted values

The catalog has no separate accepted-value records for this entry.

Declaration templates

PropertyValue kindFixed value
font-sizeresolvednull
line-heightoptionalFontSizeLeadingnull

Catalog examples

Example classExpected declarations
text-[1rem]font-size: 1rem

Revision History

CreatedUpdated