Inline text

Carbon has several simple text utility classes.

See also font-stacks.

Bolder • Italic
Bold • Italic
Semibold • Italic
Medium • Italic
Normal • Italic
Light • Italic
Thin • Italic

Note: Users need to have certain fonts in our typeface installed on their device, or else they may not see these weights.

Text weights

• font-bolder

  Bolder text (default 900)

• font-bold

  Bold text (default 700) (same as <b> and <strong>)

• font-semibold

  Semibold text (default 600)

• font-medium

  Medium text (default 500)

• font-normal

  Returns text to normal weight (default 400) and removes italicization

• font-light

  Light text (default 200)

• font-thin

  Thin text (default 100)

Italic text

• font-italic

  Italic text (same as <i> and <em>)

Text sizes

• text-sm (alias: the <small> HTML tag)

  Small text for when you need small print

  text-sm shrinks text to 0.75em (75%) of its base size. (E.g., it is 12px when the default text size is 16px.)

Other text utilities

• text-underline

• text-overline

• text-strike

• text-muted

• text-decoration-none

• text-decoration-solid

• text-decoration-double

• text-decoration-dotted

• text-decoration-dashed

• text-decoration-wavy

• text-uppercase

• text-lowercase

• text-capitalize

• text-normalcase

• letter-spacing-xs

• letter-spacing-sm (aliased to text-tight)

• letter-spacing-md (aliased to text-loose)

• letter-spacing-lg

• letter-spacing-xl