Typography mixins

Typography utilities: font size, weight and line height, text alignment, transform, style and decoration, word breaking, white-space and letter spacing.

Classes:

Font Size: .text-xs, .text-sm, .text-base, etc.
Font Weight: .font-thin, .font-normal, .font-bold, etc.
Line Height: .leading-none, .leading-tight, .leading-normal, etc.
Text Align: .text-left, .text-center, .text-right, .text-justify, .text-start, .text-end
Text Transform: .uppercase, .lowercase, .capitalize, .normal-case
Text Style: .italic, .not-italic
Text Decoration: .underline, .line-through, .no-underline

All classes above support responsive variants with the @breakpoint suffix, except .break-* and .whitespace-*:

.text-lg@md, .font-bold@lg, etc.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Typography. The A to Z index lists every public mixin and function.

Source: utilities/_typography.scss

Mixins

font-size font leading leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose text-left text-center text-right text-justify text-start text-end uppercase lowercase capitalize normal-case italic not-italic underline line-through no-underline break-normal break-words break-all whitespace-normal whitespace-nowrap whitespace-pre whitespace-pre-line whitespace-pre-wrap tracking tracking-tighter tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest responsive-typography

`font-size` mixin

Sets font-size from a $font-sizes key (lg gives var(--wu-font-size-lg)) or a raw value; an unknown key or unitless number raises an error.

@mixin font-size($size)

Parameter	Type	Default	Description
`$size`	`String\|Length\|Calculation`	Required	Font size key, 0, a value with a unit, calc(), var() or a CSS font-size keyword

Example 1

.title {
  @include font-size(lg); // font-size: var(--wu-font-size-lg)
}

Compiled CSS

.title {
  font-size: var(--wu-font-size-lg);
}

Example 2

.hero {
  @include font-size(clamp(2rem, 5vw, 3rem));
}

Compiled CSS

.hero {
  font-size: clamp(2rem, 5vw, 3rem);
}

font-size on MDN

See also: font, leading, tracking. Source: utilities/_typography.scss:74

`font` mixin

Sets font-weight from a $font-weights key (bold gives var(--wu-font-weight-bold)) or a unitless number from 1 to 1000; anything else raises an error.

@mixin font($weight)

Parameter	Type	Default	Description
`$weight`	`String\|Number`	Required	Font weight key (thin to black) or a number from 1 to 1000

Example 1

.label {
  @include font(semibold); // font-weight: var(--wu-font-weight-semibold)
}

Compiled CSS

.label {
  font-weight: var(--wu-font-weight-semibold);
}

Example 2

.heading {
  @include apply(font-size(xl), font(bold), leading(tight));
}

Compiled CSS

.heading {
  font-size: var(--wu-font-size-xl);
  font-weight: var(--wu-font-weight-bold);
  line-height: var(--wu-line-height-tight);
}

font-weight on MDN

See also: font-size. Source: utilities/_typography.scss:127

`leading` mixin

Sets line-height from a $line-heights key (tight gives var(--wu-line-height-tight)) or a raw value; negative or unknown values raise an error.

@mixin leading($value)

Parameter	Type	Default	Description
`$value`	`String\|Number\|Length\|Calculation`	Required	Line height key, a number or length of 0 or more (also as a string), calc(), var() or a keyword

Example 1

.body {
  @include leading(relaxed); // line-height: var(--wu-line-height-relaxed)
}

Compiled CSS

.body {
  line-height: var(--wu-line-height-relaxed);
}

Example 2

.caption {
  @include leading(1.6); // line-height: 1.6
}

Compiled CSS

.caption {
  line-height: 1.6;
}

line-height on MDN

See also: leading-normal, font-size. Source: utilities/_typography.scss:214

`leading-none` mixin

Sets line-height to the none key (var(--wu-line-height-none)); raises an error if the key is missing from $line-heights.

@mixin leading-none

Example

.text {
  @include leading-none; // line-height: var(--wu-line-height-none)
}

Compiled CSS

.text {
  line-height: var(--wu-line-height-none);
}

See also: leading. Source: utilities/_typography.scss:271

`leading-tight` mixin

Sets line-height to the tight key (var(--wu-line-height-tight)); raises an error if the key is missing from $line-heights.

@mixin leading-tight

Example

.text {
  @include leading-tight; // line-height: var(--wu-line-height-tight)
}

Compiled CSS

.text {
  line-height: var(--wu-line-height-tight);
}

See also: leading. Source: utilities/_typography.scss:281

`leading-snug` mixin

Sets line-height to the snug key (var(--wu-line-height-snug)); raises an error if the key is missing from $line-heights.

@mixin leading-snug

Example

.text {
  @include leading-snug; // line-height: var(--wu-line-height-snug)
}

Compiled CSS

.text {
  line-height: var(--wu-line-height-snug);
}

See also: leading. Source: utilities/_typography.scss:291

`leading-normal` mixin

Sets line-height to the normal key (var(--wu-line-height-normal)); raises an error if the key is missing from $line-heights.

@mixin leading-normal

Example

.text {
  @include leading-normal; // line-height: var(--wu-line-height-normal)
}

Compiled CSS

.text {
  line-height: var(--wu-line-height-normal);
}

See also: leading. Source: utilities/_typography.scss:301

`leading-relaxed` mixin

Sets line-height to the relaxed key (var(--wu-line-height-relaxed)); raises an error if the key is missing from $line-heights.

@mixin leading-relaxed

Example

.text {
  @include leading-relaxed; // line-height: var(--wu-line-height-relaxed)
}

Compiled CSS

.text {
  line-height: var(--wu-line-height-relaxed);
}

See also: leading. Source: utilities/_typography.scss:311

`leading-loose` mixin

Sets line-height to the loose key (var(--wu-line-height-loose)); raises an error if the key is missing from $line-heights.

@mixin leading-loose

Example

.text {
  @include leading-loose; // line-height: var(--wu-line-height-loose)
}

Compiled CSS

.text {
  line-height: var(--wu-line-height-loose);
}

See also: leading. Source: utilities/_typography.scss:321

`text-left` mixin

Aligns text to the left (physical, does not follow text direction).

@mixin text-left

Example

.cell {
  @include text-left; // text-align: left
}

Compiled CSS

.cell {
  text-align: left;
}

text-align on MDN

See also: text-start, text-right. Source: utilities/_typography.scss:335

`text-center` mixin

Centers text.

@mixin text-center

Example

.title {
  @include text-center; // text-align: center
}

Compiled CSS

.title {
  text-align: center;
}

text-align on MDN

See also: text-start, text-end. Source: utilities/_typography.scss:347

`text-right` mixin

Aligns text to the right (physical, does not follow text direction).

@mixin text-right

Example

.amount {
  @include text-right; // text-align: right
}

Compiled CSS

.amount {
  text-align: right;
}

text-align on MDN

See also: text-end, text-left. Source: utilities/_typography.scss:359

`text-justify` mixin

Justifies text to both edges.

@mixin text-justify

Example

.article {
  @include text-justify; // text-align: justify
}

Compiled CSS

.article {
  text-align: justify;
}

text-align on MDN

Source: utilities/_typography.scss:369

`text-start` mixin

Aligns text to the inline start: left in LTR, right in RTL.

@mixin text-start

Example

.label {
  @include text-start; // text-align: start
}

Compiled CSS

.label {
  text-align: start;
}

text-align on MDN

See also: text-end, text-left. Source: utilities/_typography.scss:381

`text-end` mixin

Aligns text to the inline end: right in LTR, left in RTL.

@mixin text-end

Example

.amount {
  @include text-end; // text-align: end
}

Compiled CSS

.amount {
  text-align: end;
}

text-align on MDN

See also: text-start, text-right. Source: utilities/_typography.scss:393

`uppercase` mixin

Transforms text to uppercase.

@mixin uppercase

Example

.eyebrow {
  @include uppercase; // text-transform: uppercase
}

Compiled CSS

.eyebrow {
  text-transform: uppercase;
}

text-transform on MDN

See also: lowercase, capitalize, normal-case. Source: utilities/_typography.scss:408

`lowercase` mixin

Transforms text to lowercase.

@mixin lowercase

Example

.tag {
  @include lowercase; // text-transform: lowercase
}

Compiled CSS

.tag {
  text-transform: lowercase;
}

text-transform on MDN

See also: uppercase, normal-case. Source: utilities/_typography.scss:420

`capitalize` mixin

Capitalizes the first letter of each word.

@mixin capitalize

Example

.name {
  @include capitalize; // text-transform: capitalize
}

Compiled CSS

.name {
  text-transform: capitalize;
}

text-transform on MDN

See also: uppercase, normal-case. Source: utilities/_typography.scss:432

`normal-case` mixin

Removes any text transform.

@mixin normal-case

Example

.plain {
  @include normal-case; // text-transform: none
}

Compiled CSS

.plain {
  text-transform: none;
}

text-transform on MDN

See also: uppercase, lowercase. Source: utilities/_typography.scss:444

`italic` mixin

Sets the font style to italic.

@mixin italic

Example

.quote {
  @include italic; // font-style: italic
}

Compiled CSS

.quote {
  font-style: italic;
}

font-style on MDN

See also: not-italic. Source: utilities/_typography.scss:457

`not-italic` mixin

Resets the font style to normal.

@mixin not-italic

Example

em {
  @include not-italic; // font-style: normal
}

Compiled CSS

em {
  font-style: normal;
}

font-style on MDN

See also: italic. Source: utilities/_typography.scss:468

`underline` mixin

Underlines text.

@mixin underline

Example

.link {
  @include underline; // text-decoration: underline
}

Compiled CSS

.link {
  text-decoration: underline;
}

text-decoration on MDN

See also: no-underline, line-through. Source: utilities/_typography.scss:482

`line-through` mixin

Draws a line through text.

@mixin line-through

Example

.old-price {
  @include line-through; // text-decoration: line-through
}

Compiled CSS

.old-price {
  text-decoration: line-through;
}

text-decoration on MDN

See also: no-underline. Source: utilities/_typography.scss:493

`no-underline` mixin

Removes text decoration.

@mixin no-underline

Example

a.nav {
  @include no-underline; // text-decoration: none
}

Compiled CSS

a.nav {
  text-decoration: none;
}

text-decoration on MDN

See also: underline. Source: utilities/_typography.scss:504

`break-normal` mixin

Resets overflow-wrap and word-break to normal line breaking.

@mixin break-normal

Example

.text {
  @include break-normal; // overflow-wrap: normal; word-break: normal
}

Compiled CSS

.text {
  overflow-wrap: normal;
  word-break: normal;
}

See also: break-words, break-all. Source: utilities/_typography.scss:515

`break-words` mixin

Lets long words break onto the next line when they would overflow (overflow-wrap: break-word).

@mixin break-words

Example

.url {
  @include break-words; // overflow-wrap: break-word
}

Compiled CSS

.url {
  overflow-wrap: break-word;
}

overflow-wrap on MDN

See also: break-all, break-normal. Source: utilities/_typography.scss:528

`break-all` mixin

Allows line breaks between any two characters (word-break: break-all).

@mixin break-all

Example

.hash {
  @include break-all; // word-break: break-all
}

Compiled CSS

.hash {
  word-break: break-all;
}

word-break on MDN

See also: break-words, break-normal. Source: utilities/_typography.scss:540

`whitespace-normal` mixin

Sets white-space to normal, collapsing spaces and wrapping lines.

@mixin whitespace-normal

Example

.text {
  @include whitespace-normal; // white-space: normal
}

Compiled CSS

.text {
  white-space: normal;
}

white-space on MDN

Source: utilities/_typography.scss:550

`whitespace-nowrap` mixin

Prevents text from wrapping (white-space: nowrap).

@mixin whitespace-nowrap

Example

.text {
  @include whitespace-nowrap; // white-space: nowrap
}

Compiled CSS

.text {
  white-space: nowrap;
}

white-space on MDN

Source: utilities/_typography.scss:560

`whitespace-pre` mixin

Preserves spaces and line breaks without wrapping (white-space: pre).

@mixin whitespace-pre

Example

.text {
  @include whitespace-pre; // white-space: pre
}

Compiled CSS

.text {
  white-space: pre;
}

white-space on MDN

Source: utilities/_typography.scss:570

`whitespace-pre-line` mixin

Collapses spaces but keeps line breaks (white-space: pre-line).

@mixin whitespace-pre-line

Example

.text {
  @include whitespace-pre-line; // white-space: pre-line
}

Compiled CSS

.text {
  white-space: pre-line;
}

white-space on MDN

Source: utilities/_typography.scss:580

`whitespace-pre-wrap` mixin

Preserves spaces and line breaks and wraps lines (white-space: pre-wrap).

@mixin whitespace-pre-wrap

Example

.text {
  @include whitespace-pre-wrap; // white-space: pre-wrap
}

Compiled CSS

.text {
  white-space: pre-wrap;
}

white-space on MDN

Source: utilities/_typography.scss:590

`tracking` mixin

Sets letter-spacing from a key (tighter, tight, normal, wide, wider, widest; raw em values, not tokens) or a raw value; anything else raises an error.

@mixin tracking($value)

Parameter	Type	Default	Description
`$value`	`String\|Number\|Length\|Calculation`	Required	Tracking key, 0, a value with a unit (also as a string), calc(), var() or a CSS-wide keyword

Example 1

.eyebrow {
  @include tracking(wide); // letter-spacing: 0.025em
}

Compiled CSS

.eyebrow {
  letter-spacing: 0.025em;
}

Example 2

.logo {
  @include tracking(0.2em); // letter-spacing: 0.2em
}

Compiled CSS

.logo {
  letter-spacing: 0.2em;
}

letter-spacing on MDN

See also: tracking-wide, tracking-tight. Source: utilities/_typography.scss:619

`tracking-tighter` mixin

Sets letter-spacing to the tighter key (-0.05em).

@mixin tracking-tighter

Example

.text {
  @include tracking-tighter; // letter-spacing: -0.05em
}

Compiled CSS

.text {
  letter-spacing: -0.05em;
}

See also: tracking. Source: utilities/_typography.scss:639

`tracking-tight` mixin

Sets letter-spacing to the tight key (-0.025em).

@mixin tracking-tight

Example

.text {
  @include tracking-tight; // letter-spacing: -0.025em
}

Compiled CSS

.text {
  letter-spacing: -0.025em;
}

See also: tracking. Source: utilities/_typography.scss:649

`tracking-normal` mixin

Sets letter-spacing to the normal key (0).

@mixin tracking-normal

Example

.text {
  @include tracking-normal; // letter-spacing: 0
}

Compiled CSS

.text {
  letter-spacing: 0;
}

See also: tracking. Source: utilities/_typography.scss:659

`tracking-wide` mixin

Sets letter-spacing to the wide key (0.025em).

@mixin tracking-wide

Example

.text {
  @include tracking-wide; // letter-spacing: 0.025em
}

Compiled CSS

.text {
  letter-spacing: 0.025em;
}

See also: tracking. Source: utilities/_typography.scss:669

`tracking-wider` mixin

Sets letter-spacing to the wider key (0.05em).

@mixin tracking-wider

Example

.text {
  @include tracking-wider; // letter-spacing: 0.05em
}

Compiled CSS

.text {
  letter-spacing: 0.05em;
}

See also: tracking. Source: utilities/_typography.scss:679

`tracking-widest` mixin

Sets letter-spacing to the widest key (0.1em).

@mixin tracking-widest

Example

.text {
  @include tracking-widest; // letter-spacing: 0.1em
}

Compiled CSS

.text {
  letter-spacing: 0.1em;
}

See also: tracking. Source: utilities/_typography.scss:689

`responsive-typography` mixin

Emits the typography utility classes (size, weight, line height, alignment, transform, style, decoration, tracking), suffixed with @breakpoint when a breakpoint is given.

@mixin responsive-typography($breakpoint: null)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Null`	`null`	Breakpoint name for the class suffix (also adds responsive truncate classes); null emits the base classes

Example

@media (min-width: 1440px) {
  @include responsive-typography(wide);
}

Compiled CSS

@media (min-width: 1440px) {
  .text-xs\@wide {
    font-size: var(--wu-font-size-xs);
  }
  .text-sm\@wide {
    font-size: var(--wu-font-size-sm);
  }
  .text-md\@wide {
    font-size: var(--wu-font-size-md);
  }
  .text-base\@wide {
    font-size: var(--wu-font-size-base);
  }
  .text-lg\@wide {
    font-size: var(--wu-font-size-lg);
  }
  .text-xl\@wide {
    font-size: var(--wu-font-size-xl);
  }
  .text-2xl\@wide {
    font-size: var(--wu-font-size-2xl);
  }
  .text-3xl\@wide {
    font-size: var(--wu-font-size-3xl);
  }
  .text-4xl\@wide {
    font-size: var(--wu-font-size-4xl);
  }
  .font-thin\@wide {
    font-weight: var(--wu-font-weight-thin);
  }
  .font-extralight\@wide {
    font-weight: var(--wu-font-weight-extralight);
  }
  .font-light\@wide {
    font-weight: var(--wu-font-weight-light);
  }
  .font-normal\@wide {
    font-weight: var(--wu-font-weight-normal);
  }
  .font-medium\@wide {
    font-weight: var(--wu-font-weight-medium);
  }
  .font-semibold\@wide {
    font-weight: var(--wu-font-weight-semibold);
  }
  .font-bold\@wide {
    font-weight: var(--wu-font-weight-bold);
  }
  .font-extrabold\@wide {
    font-weight: var(--wu-font-weight-extrabold);
  }
  .font-black\@wide {
    font-weight: var(--wu-font-weight-black);
  }
  .leading-none\@wide {
    line-height: var(--wu-line-height-none);
  }
  .leading-tight\@wide {
    line-height: var(--wu-line-height-tight);
  }
  .leading-snug\@wide {
    line-height: var(--wu-line-height-snug);
  }
  .leading-normal\@wide {
    line-height: var(--wu-line-height-normal);
  }
  .leading-relaxed\@wide {
    line-height: var(--wu-line-height-relaxed);
  }
  .leading-loose\@wide {
    line-height: var(--wu-line-height-loose);
  }
  .text-left\@wide {
    text-align: left;
  }
  .text-center\@wide {
    text-align: center;
  }
  .text-right\@wide {
    text-align: right;
  }
  .text-justify\@wide {
    text-align: justify;
  }
  .text-start\@wide {
    text-align: start;
  }
  .text-end\@wide {
    text-align: end;
  }
  .uppercase\@wide {
    text-transform: uppercase;
  }
  .lowercase\@wide {
    text-transform: lowercase;
  }
  .capitalize\@wide {
    text-transform: capitalize;
  }
  .normal-case\@wide {
    text-transform: none;
  }
  .italic\@wide {
    font-style: italic;
  }
  .not-italic\@wide {
    font-style: normal;
  }
  .underline\@wide {
    text-decoration: underline;
  }
  .line-through\@wide {
    text-decoration: line-through;
  }
  .no-underline\@wide {
    text-decoration: none;
  }
  .truncate\@wide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .truncate-2\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .truncate-3\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .truncate-4\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .truncate-5\@wide {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .overflow-label\@wide {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
  .tracking-tighter\@wide {
    letter-spacing: -0.05em;
  }
  .tracking-tight\@wide {
    letter-spacing: -0.025em;
  }
  .tracking-normal\@wide {
    letter-spacing: 0;
  }
  .tracking-wide\@wide {
    letter-spacing: 0.025em;
  }
  .tracking-wider\@wide {
    letter-spacing: 0.05em;
  }
  .tracking-widest\@wide {
    letter-spacing: 0.1em;
  }
}

Source: utilities/_typography.scss:716

Typography mixins

Mixins

font-size mixin

font mixin

leading mixin

leading-none mixin

leading-tight mixin

leading-snug mixin

leading-normal mixin

leading-relaxed mixin

leading-loose mixin

text-left mixin

text-center mixin

text-right mixin

text-justify mixin

text-start mixin

text-end mixin

uppercase mixin

lowercase mixin

capitalize mixin

normal-case mixin

italic mixin

not-italic mixin

underline mixin

line-through mixin

no-underline mixin

break-normal mixin

break-words mixin

break-all mixin

whitespace-normal mixin

whitespace-nowrap mixin

whitespace-pre mixin

whitespace-pre-line mixin

whitespace-pre-wrap mixin

tracking mixin

tracking-tighter mixin

tracking-tight mixin

tracking-normal mixin

tracking-wide mixin

tracking-wider mixin

tracking-widest mixin

responsive-typography mixin

`font-size` mixin

`font` mixin

`leading` mixin

`leading-none` mixin

`leading-tight` mixin

`leading-snug` mixin

`leading-normal` mixin

`leading-relaxed` mixin

`leading-loose` mixin

`text-left` mixin

`text-center` mixin

`text-right` mixin

`text-justify` mixin

`text-start` mixin

`text-end` mixin

`uppercase` mixin

`lowercase` mixin

`capitalize` mixin

`normal-case` mixin

`italic` mixin

`not-italic` mixin

`underline` mixin

`line-through` mixin

`no-underline` mixin

`break-normal` mixin

`break-words` mixin

`break-all` mixin

`whitespace-normal` mixin

`whitespace-nowrap` mixin

`whitespace-pre` mixin

`whitespace-pre-line` mixin

`whitespace-pre-wrap` mixin

`tracking` mixin

`tracking-tighter` mixin

`tracking-tight` mixin

`tracking-normal` mixin

`tracking-wide` mixin

`tracking-wider` mixin

`tracking-widest` mixin

`responsive-typography` mixin