Text

Typographical font and text modifier utilities for customizing properties with CSS variables inline and a visually hidden text utility for assistive browsing.

Examples

Multi-purpose utility

The .font utility is a multi-purpose modifier that includes variables for all typographical font and text properties with fallbacks that revert to initial user-agent styles if the variables are unused. Be wary that this utility is very much a hammer with font size, weight and line-height values as it overrides reset or normalized CSS.

Heading

<h4 class="font" style="--fs:1.8rem; --fw:400; --tt:uppercase; --ls:0.125em">Heading</h4>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="font" style="--ta:center; inline-size:15rem;">
  The quick brown fox jumps over the lazy dog.
</p>

<p class="font" style="--ta:center; --tw:balance; inline-size:15rem;">
  The quick brown fox jumps over the lazy dog.
</p>

<p class="font" style="--fs:1.125rem; --tt:capitalize;">
  The quick brown fox jumps over the lazy dog.
</p>

The utility can also be applied to wrapper elements to enable group styling as well as individual element styling.

<ul class="font" style="--fv:small-caps;">
  <li>List item one</li>
  <li style="--tt:uppercase; --ls:0.075em;">List item two</li>
  <li>List item three</li>
  <li>List item four</li>
</ul>

Single purpose utilities

The .font-* and .text-* utilities are individual utilities that target specific font or text properties with variables that override the default values with no fallbacks provided.

Heading

<h4 class="font-size font-weight" style="--fs:1.8rem; --fw:400;">Heading</h4>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-align text-wrap" style="--ta:center; --tw:balance; inline-size:15rem;">
  The quick brown fox jumps over the lazy dog.
</p>

<p class="font-size text-transform" style="--fs:1.125rem; --tt:capitalize;">
  The quick brown fox jumps over the lazy dog.
</p>

Typography variables

It's worth noting if also using the SassMods typography styles the headings, paragraphs and lists already have in-built variables for various properties such as text-wrap and font-sizes for headings that can also be used to customize elements inline and combined with the text utilities.

Heading

The quick brown fox jumps over the lazy dog.

<h4 class="font-variant" style="--h4-fs:1.8rem; --fv:small-caps;">Heading</h4>

<p class="text-align" style="--ta:center; --para-tw:balance; inline-size:15rem;">
  The quick brown fox jumps over the lazy dog.
</p>

Visually hidden text

The .vis-hidden and .vis-hidden-focus classes are standard utilities for hiding textual content from the visual interface but keeping the text available for users with assistive browsing. A Sass mixin is also provided for including the modules property values in custom utilities, see the source files below to view the styles.

Using the modules

Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.

@use "sassmods/scss/sassmods" as *;
@include text-css;
@include vis-hidden-css;

Using the framework

Enable the modules in the sassmods-system.scss document as below.

$enable-text:       true;
$enable-vis-hidden: true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins.

_text.scss 
// ---------------------------------------------------------- 
// Text
// ----------------------------------------------------------

@mixin font {
  font-family: var(--ff, inherit);
  font-size: var(--fs, revert);
  font-weight: var(--fw, revert);
  font-variant: var(--fv, initial);
  text-transform: var(--tt, initial);
  text-align: var(--ta, initial);
  text-wrap: var(--tw, initial);
  line-height: var(--lh, inherit);
  letter-spacing: var(--ls, initial);
  word-spacing: var(--ws, initial);
}

@mixin text-css {
  .font, .font * {
    @include font;
  }
}

@mixin vis-hidden-mixin {
  position: absolute;
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@mixin vis-hidden-css {
  .vis-hidden, .vis-hidden-focus:not(:focus):not(:focus-within) {
    @include vis-hidden-mixin;
  }
}