Skip to content

Text

Basic text utility modifiers with module mixins for compiling responsive modifier classes.

Examples (anchor)

Font sizes (anchor)

.fs-1 (0.75rem)

The quick brown fox jumps over the lazy dog.

.fs-2 (0.85rem)

The quick brown fox jumps over the lazy dog.

.fs-3 (0.938rem)

The quick brown fox jumps over the lazy dog.

.fs-4 (1rem)

The quick brown fox jumps over the lazy dog.

.fs-5 (1.063rem)

The quick brown fox jumps over the lazy dog.

.fs-6 (1.125rem)

The quick brown fox jumps over the lazy dog.

.fs-7 (1.25rem)

The quick brown fox jumps over the lazy dog.

Heading font sizes (anchor)

.fs-h1 (2.125rem)

Heading size 1

.fs-h2 (1.75rem)

Heading size 2

.fs-h3 (1.5rem)

Heading size 3

.fs-h4 (1.375rem)

Heading size 4

.fs-h5 (1.25rem)

Heading size 5

.fs-h6 (1.063rem)

Heading size 6

Display font sizes (anchor)

.fs-display-1 (2.5rem)

Display 1

.fs-display-2 (2.75rem)

Display 2

.fs-display-3 (3rem)

Display 3

.fs-display-4 (3.5rem)

Display 4

.fs-display-5 (4rem)

Display 5

Font weights (anchor)

The font weight utilities inherit the system fonts included with the typography so some weights below will appear the same depending on the browser and operating system used.

.fw-100

The quick brown fox jumps over the lazy dog.

.fw-200

The quick brown fox jumps over the lazy dog.

.fw-300

The quick brown fox jumps over the lazy dog.

.fw-400

The quick brown fox jumps over the lazy dog.

.fw-500

The quick brown fox jumps over the lazy dog.

.fw-600

The quick brown fox jumps over the lazy dog.

.fw-700

The quick brown fox jumps over the lazy dog.

.fw-800

The quick brown fox jumps over the lazy dog.

.fw-900

The quick brown fox jumps over the lazy dog.

Text alignment and wrap (anchor)

.text-left

The quick brown fox jumped over the lazy dog.

.text-center

The quick brown fox jumped over the lazy dog.

.text-right

The quick brown fox jumped over the lazy dog.

.text-pretty

The quick brown fox jumped over the lazy dog.

.text-balance

The quick brown fox jumped over the lazy dog.

Variable classes (anchor)

The variable text class utilities include no preset default values to enable using them to customize styles inline on-the-fly or combining them with the variables to create custom components in external styles.

Line-height (anchor)

<p class="line-height" style="--lh: 1.1;">

The quick brown fox jumped over the lazy dog.

Text-transform (anchor)

<p class="text-transform" style="--tt: uppercase;">

The quick brown fox jumped over the lazy dog.

Font-variant (anchor)

<p class="font-variant" style="--fv: small-caps;">

The quick brown fox jumped over the lazy dog.

Letter and word spacing (anchor)

<p class="text-spacing" style="--ls: 0.25em;">

The quick brown fox jumped over the lazy dog.

<p class="text-spacing" style="--ws: 0.125em;">

The quick brown fox jumped over the lazy dog.

<p class="text-spacing" style="--ls: 0.125em; --ws: -0.125em;">

The quick brown fox jumped over the lazy dog.

Text colors (anchor)

Fixed color .text-white and .text-black utilities (background colors included for example only).

.text-white .text-black

Link .decoration-none and .text-link color utilities.

Decoration none
Text link

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

The modules can be included individually:

custom.scss 
@use "stylemods/scss" as *;
@include font-sizes-css;
@include font-weights-css;
@include text-align-css;
@include text-wrap-css;
@include text-variable-classes-css;
@include text-colors-css;
@include text-links-css;

Or included grouped together in a single mixin:

custom.scss 
@use "stylemods/scss" as *;
@include text-css;

Font sizes and weights, and text alignment and wrap can also be included in custom breakpoints:

custom.scss 
@use "stylemods/scss" as *;
@include font-sizes-css;
@include font-weights-css;
@include text-align-css;
@include text-wrap-css;

// Example breakpoint
@media (width < 480px) {
  @include font-sizes-sm-css;
  @include font-weights-sm-css;
  @include text-align-sm-css;
  @include text-wrap-sm-css;
}

See the using modules page for more information.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-text:       true;
// Breakpoints
$enable-text-lg:    true;
$enable-text-md:    true;
$enable-text-sm:    true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss 
@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The Text source file is included with the utilities module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document
stylemods/scss/utilities/text.scss
View on Github
https://github.com/pmbrown/StyleMods/blob/main/scss/utilities/text.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.