Texts

Font-weight

Light text

Lighter text (relative to the parent)

Normal text

Bold text

Bolder text (relative to the parent)

<p class="u-fw-300">Light text</p>
<p class="u-fw-l">Lighter text (relative to the parent)</p>
<p class="u-fw-400">Normal text</p>
<p class="u-fw-700">Bold text</p>
<p class="u-fw-b">Bolder text (relative to the parent)</p>

$u-texts: (
  font-weight: (
    property: font-weight,
    class: fw,
    values: (
      l: lighter,
      b: bolder,
      300: 300,
      400: 400,
      700: 700,
    ),
  ),
);

More information about the lighter and bolder behavior is available on the MDN Documentation.

Font-style

Italic text

Normal text

<p class="u-fs-i">Italic text</p>
<p class="u-fs-n">Normal text</p>

$u-texts: (
  font-style: (
    property: font-style,
    class: fs,
    values: (
      n: normal,
      i: italic,
    ),
  ),
);

Text-align

Left aligned text

Right aligned text

Center aligned text

<p class="u-ta-l">Left aligned text</p>
<p class="u-ta-r">Right aligned text</p>
<p class="u-ta-c">Center aligned text</p>

$u-texts: (
  text-align: (
    responsive: true,
    property: text-align,
    class: ta,
    values: (
      l: left,
      r: right,
      c: center,
    ),
  ),
);

Text-decoration

Underlined text

Line-through text

Normal text

<p class="u-td-u">Underlined text</p>
<p class="u-td-l">Line-through text</p>
<p class="u-td-n">Normal text</p>

$u-texts: (
  text-decoration: (
    property: text-decoration,
    class: td,
    values: (
      u: underline,
      l: line-through,
      n: none,
    ),
  ),
);

Text-transform

Lowercased text

Uppercased text

Capitalized text

Normal text

<p class="u-tt-l">Lowercased text</p>
<p class="u-tt-u">Uppercased text</p>
<p class="u-tt-c">Capitalized text</p>
<p class="u-tt-n">Normal text</p>

$u-texts: (
  text-transform: (
    property: text-transform,
    class: tt,
    values: (
      l: lowercase,
      u: uppercase,
      c: capitalize,
      n: none,
    ),
  ),
);

Font-size & line-height

Even if we could have classes to manage font-size or line-height, it's not included to let you make your own class to control (or not) the vertical rhythm.

If you want to adjust font-size and preserve the vertical rhythm, you need to calculate the line-height in a SCSS function or with the CSS calc() function.

// SCSS simple example
$font-size-expected: 1.25rem; // or 20px
$rhythm-unit: core.$g-spacer; // = 24px from the htlm font-size (16px) * line-height (1.5);
$calculated-line-height: $rhythm-unit / $font-size-expected; // = 1.2

.class {
  font-size: $font-size-expected;
  line-height: $calculated-line-height;
}

// SCSS function
@mixin rhythmic-font($font-size) {
  font-size: $font-size;
  line-height: core.$g-spacer / $font-size;
}

.class {
  @include rhythmic-font(0.875rem);

  // will output
  font-size: 0.875rem;
  line-height: 1.7142857143;
}

// CSS calc
.class {
  font-size: 1.25rem; // equal to 20px
  line-height: calc(24 / 20); // or calc(1.5 / 1.25) to use `rem` values
}

If you want just some line-height utilities, to can add it to the $u-texts variables with values which respect the vertical rhythm.

@use "@glsass/utilities/utilities.texts" with (
  $u-texts: (
    line-height: (
      property: line-height,
      class: lh,
      values: (
        small: 0.75, // 0.5vr
        base: 1.5, // 1vr - default line-height
        large: 2.25, // 1.5vr
      )
    )
  )
);