SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

🔤 Text

📐 What are text utilities used for?

Text utilities let you control alignment, transformation, font style, line height, letter spacing, wrapping behavior, and font family directly from your HTML. They are built on top of the global typography tokens so your text remains consistent across the entire design system.

Most utilities also have responsive variants, allowing you to change alignment, wrapping, or typography rules from a specific breakpoint using the pattern .{utility}-{breakpoint} (for example: .text-center-md or .lh-lg-lg).

💠 Examples

The examples below show how to combine alignment, transformation, line-height, letter spacing, wrapping, and font family helpers.

.text-start (left-aligned text)

.text-center (centered text)

.text-end (right-aligned text)

.text-uppercase — uppercase text

.text-capitalize — capitalized sentence

.text-italic — italic text style

.lh-sm — compact line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.lh-md — default reading line height for paragraphs of text.

.lh-lg — relaxed line height, useful for long-form content.

.ls-sm — tighter letter spacing

.ls-md — slightly wider letter spacing

.ls-lg — strong tracking effect

.text-wrap — long text will wrap normally onto multiple lines when needed.

.text-truncate — long text is cut and replaced with an ellipsis when it overflows.

.text-nowrap — long text will stay on a single line and can overflow its container.

.text-serif — serif typeface for more traditional or editorial content.

.text-sans-serif — clean, modern sans-serif typeface (default for UI text).

.text-mono — monospace typeface, ideal for inline code or technical snippets.

💻 HTML Code

Left-aligned text (.text-start)

Centered text (.text-center)

Right-aligned text (.text-end)

Uppercase text (.text-uppercase)

capitalized sentence (.text-capitalize)

Italic style (.text-italic)

Compact line height (.lh-sm) for tight blocks of text.

Default reading line height (.lh-md) for typical paragraphs.

Relaxed line height (.lh-lg) for large or long text blocks.

Tight spacing (.ls-sm)

Medium spacing (.ls-md)

Wide spacing (.ls-lg)

Wrapping text (.text-wrap) will break onto multiple lines when necessary.

Truncated text (.text-truncate) shows an ellipsis when the content is too long.

No wrapping (.text-nowrap) keeps text on a single line.

Serif font (.text-serif)

Sans-serif font (.text-sans-serif)

Monospace font (.text-mono)

This text is default-aligned on mobile and centered from the md breakpoint.

📏 Text Utilities & Breakpoints

Text utilities follow a predictable naming pattern and can be combined freely.
Most of them also offer responsive variants by appending a breakpoint suffix such as -xs, -sm, -md, -lg, -xl, or -xxl.

.text-start
.text-start-{breakpoint}

Aligns text to the left, with optional responsive variants.

.text-left
.text-left-{breakpoint}

Aligns text to the left, with optional responsive variants.

.text-end
.text-end-{breakpoint}

Aligns text to the right, with optional responsive variants.

.text-right
.text-right-{breakpoint}

Aligns text to the right, with optional responsive variants.

.text-center
.text-center-{breakpoint}

Centers text horizontally, with breakpoint-specific variants.

.text-justify
.text-justify-{breakpoint}

Justifies text, stretching it to align on both sides.

.text-uppercase
.text-uppercase-{breakpoint}

Converts text to uppercase, globally or from a specific breakpoint.

.text-lowercase
.text-lowercase-{breakpoint}

Converts text to lowercase, with optional responsive behavior.

.text-capitalize
.text-capitalize-{breakpoint}

Capitalizes the first letter of each word.

.text-none
.text-none-{breakpoint}

Removes any text transformation applied by other utilities.

.text-italic
.text-italic-{breakpoint}

Applies italic style to text.

.text-normal
.text-normal-{breakpoint}

Resets font style to normal.

.text-oblique
.text-oblique-{breakpoint}

Applies an oblique font style.

.lh-base
.lh-base-{breakpoint}

Applies the base line-height token, globally or responsively.

.lh-sm
.lh-sm-{breakpoint}

Applies the sm line-height token, globally or responsively.

.lh-md
.lh-md-{breakpoint}

Applies the md line-height token, globally or responsively.

.lh-lg
.lh-lg-{breakpoint}

Applies the lg line-height token, globally or responsively.

.lh-xl
.lh-xl-{breakpoint}

Applies the xl line-height token, globally or responsively.

.ls-sm
.ls-sm-{breakpoint}

Sets letter spacing preset sm, with responsive variants available.

.ls-md
.ls-md-{breakpoint}

Sets letter spacing preset md, with responsive variants available.

.ls-lg
.ls-lg-{breakpoint}

Sets letter spacing preset lg, with responsive variants available.

.text-wrap
.text-wrap-{breakpoint}

Controls wrapping and text overflow behavior.

.text-nowrap
.text-nowrap-{breakpoint}

Controls wrapping and text overflow behavior.

.text-truncate
.text-truncate-{breakpoint}

Controls wrapping and text overflow behavior.

.text-ellipsis
.text-ellipsis-{breakpoint}

Controls wrapping and text overflow behavior.

.text-serif
.text-serif-{breakpoint}

Applies the serif font family globally or from a chosen breakpoint.

.text-sans-serif
.text-sans-serif-{breakpoint}

Applies the sans-serif font family globally or from a chosen breakpoint.

.text-mono
.text-mono-{breakpoint}

Applies the mono font family globally or from a chosen breakpoint.

⚙️ Variables CSS

Variable Description
--letter-spacing letter spacing.
--letter-spacing-lg Large letter spacing.
--letter-spacing-md Medium letter spacing.
--letter-spacing-sm Small letter spacing.
--line-height Line height.
--line-height-lg Large line height.
--line-height-md Medium line height.
--line-height-sm Small line height.