Text utilities

Text alignment #

Text can be aligned using the following responsive utility classes:

• .text-{alignment}
• .text-{breakpoint}-{alignment}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {alignment} can be one of the following:

Some of these classes are shown in action in the example below.

<p class="text-start">Start aligned text on all viewport sizes</p>
<p class="text-center">Center aligned text on all viewport sizes</p>
<p class="text-end">End aligned text on all viewport sizes</p>

Text wrapping and overflow #

You can wrap text with a .text-wrap class, or prevent text from wrapping with a .text-nowrap class.

<!-- Text wrapping -->
<div class="text-wrap">
  This text should wrap
</div>

<!-- No wrapping -->
<div class="text-nowrap">
  This should overflow
</div>

Word break #

Prevent long strings of text from breaking your components' layout by using the .text-break class to set word-wrap: break-word and word-break: break-word.

<div class="text-break">
  When you reply <strong>"Hmmmmmmmmmmm"</strong> to a message
</div>

Text transform #

Transform text in components with text capitalization classes.

<p class="text-lowercase">Lowercased text</p>
<p class="text-uppercase">Uppercased text</p>
<p class="text-capitalize">Capitalized text</p>

Note how .text-capitalize only changes the first letter of each word, leaving the case of all the other letters unaffected.

Font size #

The font-size of text can be changed using the .fs-{size} classes, where {size} can be 1, 2, 3, 4, 5, or 6. Similar to HTML headings, the font-size decreases as the number increases. Unlike headings however, these classes don't affect font-weight or line-height.

<p class="fs-1">Font size 1</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6</p>

Font weight and italics #

The font-weight of text can be changed using the .fw-{weight} classes, where {weight} can be bold, bolder, semibold, medium, normal, light, or lighter. You can also change the font-style using the .fst-normal or .fst-italic classes.

Please note, the specific weight of the font being used must be available for that class to work properly. Some of these classes are shown in action in the example below.

<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element)</p>
<p class="fw-medium">Medium weight text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fst-normal">Text with normal font style</p>
<p class="fst-italic">Italic text</p>

Line height #

The line-height of text can be changed using the .lh-{height} classes, where {height} can be 1, sm, base, or lg.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element.</p>

Monospace #

Shift text to the monospace font stack using the .font-monospace class.

<p class="font-monospace">
  y = mx + c is the general equation of any straight line
</p>

Reset color #

You can reset a text's color so that it inherits the color from the parent using the .text-reset class. This is especially useful when used on links inside text whose color has been changed with a utility class.

<div class="text-bg-primary">
  Text with a <a href="#" class="text-reset">reset link</a>
</div>

Text decoration #

You can also decorate text in components with text decoration classes.

<p class="text-decoration-underline">This text is underlined</p>
<p class="text-decoration-line-through">This text has a strikethrough</p>
<a href="#" class="text-decoration-none">A non-decorated link</a>

Font smoothing #

Use the .subpixel-antialiased class to render text using subpixel antialiasing and the .antialiased class to render text using grayscale antialiasing. By default, Halfmoon uses grayscale antialiasing, except for a few components and utilities, where it interferes with optimal readability.

<p class="subpixel-antialiased">This text is rendered using <strong>subpixel antialiasing</strong></p>
<p class="antialiased">This is rendered using <strong>grayscale antialiasing</strong></p>