Text style

Set text decoration, letter case, font style, numeric shaping, and smoothing.

Change the line decoration, letter case, or font treatment without changing the words in the source. These utilities affect different CSS properties, so combine them only when each behavior is intentional.

Quick reference

Example class	Expected declarations
`underline`	`text-decoration-line: underline;`
`overline`	`text-decoration-line: overline;`
`line-through`	`text-decoration-line: line-through;`
`no-underline`	`text-decoration-line: none;`
`uppercase`	`text-transform: uppercase;`
`lowercase`	`text-transform: lowercase;`
`capitalize`	`text-transform: capitalize;`
`normal-case`	`text-transform: none;`
`italic`	`font-style: italic;`
`not-italic`	`font-style: normal;`
`tabular-nums`	`font-variant-numeric: tabular-nums;`
`antialiased`	`-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`

Example setup

The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. The examples apply each class directly to the text whose behavior it demonstrates. The scaffold adds only layout, borders, spacing, and inherited link color. Case transforms change Latin letters but do not case-convert Japanese kana or kanji.

Examples in use

Choose a decoration line

The rows compare underline, overline, and line-through. The link starts with the browser underline so no-underline shows its reset behavior.

Choose a decoration line

HTML

<div class="wind-demo-style-stack">
  <p><span class="underline">Underline / 下線</span></p>
  <p><span class="overline">Overline / 上線</span></p>
  <p><span class="line-through">Line through / 取り消し線</span></p>
  <p><a href="#normal-text" class="no-underline">No underline / 下線なし</a></p>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-style-stack {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem 1rem;
}

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

.wind-demo-style-stack p:last-child {
  border-bottom: 0;
}

.wind-demo-style-stack a {
  color: inherit;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.overline {
  text-decoration-line: overline;
}
.underline {
  text-decoration-line: underline;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-style-stack": true
    },
    "safelist": {
      "docs-preview": [
        "underline",
        "overline",
        "line-through",
        "no-underline"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-style-stack { color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem 1rem; }
.wind-demo-style-stack p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-style-stack p:last-child { border-bottom: 0; }
.wind-demo-style-stack a { color: inherit; }

Transform Latin letter case

The same bilingual phrase demonstrates the four case controls; the Japanese characters stay unchanged.

Transform Latin letter case

HTML

<div class="wind-demo-style-stack">
  <p><span class="uppercase">Wind notes / 見出しの整え方</span></p>
  <p><span class="lowercase">Wind notes / 見出しの整え方</span></p>
  <p><span class="capitalize">wind notes / 見出しの整え方</span></p>
  <p><span class="normal-case">WIND NOTES / 見出しの整え方</span></p>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-style-stack {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem 1rem;
}

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

.wind-demo-style-stack p:last-child {
  border-bottom: 0;
}
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.normal-case {
  text-transform: none;
}
.uppercase {
  text-transform: uppercase;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-style-stack": true
    },
    "safelist": {
      "docs-preview": [
        "uppercase",
        "lowercase",
        "capitalize",
        "normal-case"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-style-stack { color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem 1rem; }
.wind-demo-style-stack p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-style-stack p:last-child { border-bottom: 0; }

Style emphasis and numerals

The example contrasts italic and roman emphasis, tabular figures, and font smoothing. Numeric shape and smoothing depend on the active font and platform.

Style emphasis and numerals

HTML

<div class="wind-demo-type-grid">
  <p>Style: <em class="italic">italic</em> and <em class="not-italic">roman emphasis</em>.</p>
  <div class="wind-demo-number-grid"><span>Default digits</span><span>1,111.11</span><span>Tabular digits</span><span class="tabular-nums">1,111.11</span></div>
  <p class="antialiased">Smoothing can look different on each display. / 画面によって見え方が変わります。</p>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-type-grid {
  max-width: 28rem;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
}

.wind-demo-type-grid > p {
  margin: 0 0 .85rem;
}

.wind-demo-type-grid > p:last-child {
  margin: .85rem 0 0;
  border-top: 1px solid #d8e0e8;
  padding-top: .75rem;
}

.wind-demo-number-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1rem;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-type-grid": true,
      "wind-demo-number-grid": true
    },
    "safelist": {
      "docs-preview": [
        "italic",
        "not-italic",
        "tabular-nums",
        "antialiased"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-type-grid { max-width: 28rem; color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-type-grid > p { margin: 0 0 0.85rem; }
.wind-demo-type-grid > p:last-child { margin: 0.85rem 0 0; border-top: 1px solid #d8e0e8; padding-top: 0.75rem; }
.wind-demo-number-grid { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; }

Custom and named values

Underline, overline, line-through, and no-underline set text-decoration-line. The four case utilities set text-transform, where normal-case restores none. italic and not-italic set font-style. tabular-nums requests tabular numeric glyphs, which only show when the chosen font supports them. antialiased sets platform-specific font-smoothing properties; browser and operating-system rendering can make the visual difference subtle. This family has fixed classes rather than named value tokens.

Related guides: Utility grammar · Variants

Catalog details

line-through

Field	Value
Catalog identifier	`v1.line-through`
Class pattern	`line-through`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-line`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"line-through"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-line`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`line-through`	`text-decoration-line: line-through`

no-underline

Field	Value
Catalog identifier	`v1.no-underline`
Class pattern	`no-underline`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-line`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-line`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`no-underline`	`text-decoration-line: none`

overline

Field	Value
Catalog identifier	`v1.overline`
Class pattern	`overline`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-line`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"overline"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-line`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`overline`	`text-decoration-line: overline`

underline

Field	Value
Catalog identifier	`v1.underline`
Class pattern	`underline`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-line`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"underline"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-line`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`underline`	`text-decoration-line: underline`

capitalize

Field	Value
Catalog identifier	`v1.capitalize`
Class pattern	`capitalize`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-transform`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"capitalize"`

Declaration templates

Property	Value kind	Fixed value
`text-transform`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`capitalize`	`text-transform: capitalize`

lowercase

Field	Value
Catalog identifier	`v1.lowercase`
Class pattern	`lowercase`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-transform`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"lowercase"`

Declaration templates

Property	Value kind	Fixed value
`text-transform`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`lowercase`	`text-transform: lowercase`

normal-case

Field	Value
Catalog identifier	`v1.normal-case`
Class pattern	`normal-case`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-transform`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`text-transform`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`normal-case`	`text-transform: none`

uppercase

Field	Value
Catalog identifier	`v1.uppercase`
Class pattern	`uppercase`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-transform`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"uppercase"`

Declaration templates

Property	Value kind	Fixed value
`text-transform`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`uppercase`	`text-transform: uppercase`

italic

Field	Value
Catalog identifier	`v1.italic`
Class pattern	`italic`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`font-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"italic"`

Declaration templates

Property	Value kind	Fixed value
`font-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`italic`	`font-style: italic`

not-italic

Field	Value
Catalog identifier	`v1.not-italic`
Class pattern	`not-italic`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`font-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"normal"`

Declaration templates

Property	Value kind	Fixed value
`font-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`not-italic`	`font-style: normal`

tabular-nums

Field	Value
Catalog identifier	`v1.tabular-nums`
Class pattern	`tabular-nums`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`3`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`font-variant-numeric`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"tabular-nums"`

Declaration templates

Property	Value kind	Fixed value
`font-variant-numeric`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`tabular-nums`	`font-variant-numeric: tabular-nums`

antialiased

Field	Value
Catalog identifier	`v1.antialiased`
Class pattern	`antialiased`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-style` (`21`)
Order rank	`4`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`-webkit-font-smoothing`, `-moz-osx-font-smoothing`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"antialiased"`

Declaration templates

Property	Value kind	Fixed value
`-webkit-font-smoothing`	`fixed`	`"antialiased"`
`-moz-osx-font-smoothing`	`fixed`	`"grayscale"`

Catalog examples

Example class	Expected declarations
`antialiased`	`-webkit-font-smoothing: antialiased`; `-moz-osx-font-smoothing: grayscale`

Text style

Quick reference

Examples in use

Choose a decoration line

Transform Latin letter case

Style emphasis and numerals

Custom and named values

line-through

Accepted values

Declaration templates

Catalog examples

no-underline

Accepted values

Declaration templates

Catalog examples

overline

Accepted values

Declaration templates

Catalog examples

underline

Accepted values

Declaration templates

Catalog examples

capitalize

Accepted values

Declaration templates

Catalog examples

lowercase

Accepted values

Declaration templates

Catalog examples

normal-case

Accepted values

Declaration templates

Catalog examples

uppercase

Accepted values

Declaration templates

Catalog examples

italic

Accepted values

Declaration templates

Catalog examples

not-italic

Accepted values

Declaration templates

Catalog examples

tabular-nums

Accepted values

Declaration templates

Catalog examples

antialiased

Accepted values

Declaration templates

Catalog examples

Revision History