Text utilities

Halfmoon comes with utility classes which can be used to set the text alignment, wrapping, weight, size, and more.

Text alignment #

Text can be justified using the class .text-justify.

The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.

<!-- Justified text -->
<p class="text-justify">
  The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
</p>

Responsive classes are available for left, center, or right alignment:

  • text-left/text-{breakpoint}-left
  • text-center/text-{breakpoint}-center
  • text-right/text-{breakpoint}-right

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

Text aligned to left on all screen sizes

Text aligned to center on all screen sizes

Text aligned to right on all screen sizes

Text aligned to left on small screens and up

Text aligned to center on medium screens and up

Text aligned to right on large screens and up

Text aligned to right on extra large screens and up

<!-- Text aligned to left -->
<p class="text-left">
  Text aligned to left on all screen sizes
</p>
<!-- Text aligned to center -->
<p class="text-center">
  Text aligned to center on all screen sizes
</p>
<!-- Text aligned to right -->
<p class="text-right">
  Text aligned to right on all screen sizes
</p>
<!-- Text aligned to left on small screens and up (width > 576px) -->
<p class="text-sm-left">
  Text aligned to left on small screens and up
</p>
<!-- Text aligned to left on medium screens and up (width > 768px) -->
<p class="text-md-center">
  Text aligned to center on medium screens and up
</p>
<!-- Text aligned to left on large screens and up (width > 992px) -->
<p class="text-lg-right">
  Text aligned to right on large screens and up
</p>
<!-- Text aligned to right on extra large screens and up (width > 1200px) -->
<p class="text-xl-right">
  Text aligned to right on extra large screens and up
</p>

Text wrapping and overflow #

The following classes can be used to control the wrapping and overflow of text:

  • The .text-wrap class wraps text.
  • The .text-nowrap class prevents the text from wrapping.
  • The .text-truncate class truncates the text with an ellipsis. It should be noted that this only works on elements with the display: inline-block or display: block property.
This text should wrap.
This text should overflow.
This text should be truncated.
<!-- Text with wrapping -->
<div class="text-wrap w-150"> <!-- w-150 = width: 15rem (150px) -->
  This text should wrap.
</div>
<!-- Text without wrapping -->
<div class="text-nowrap w-150"> <!-- w-150 = width: 15rem (150px) -->
  This text should overflow.
</div>
<!-- Text truncated -->
<span class="text-truncate d-inline-block w-150"> <!-- d-inline-block= display: inline-block, w-150 = width: 15rem (150px) -->
  This text should be truncated.
</span>

Please note that the boxes above are given margin, padding, and also a border using utility classes. This is not shown in the code for the sake of conciseness.

Word break #

The class .text-break sets the word-wrap: break-word to the text. This can be used to prevent very long strings from breaking the layout.

When you reply "Hmmmmmmmmmmmmmmmmmmmmmmm" to a stupid message.
<!-- Word break -->
<div class="text-break w-200"> <!-- w-200 = width: 20rem (200px) -->
  When you reply "Hmmmmmmmmmmmmmmmmmmmmmmm" to a stupid message.
</div>

Text transform #

The capitalization of text can be set using the following classes:

  • The .text-lowercase class lowers the capitalization of all the letters.
  • The .text-uppercase class capitalizes all the letters.
  • The .text-capitalize class capitalizes only the first letter of each word.

LOWERCASED TEXT

uppercased text

capitalized text

<!-- Text lowercase -->
<p class="text-lowercase">
  LOWERCASED TEXT
</p>
<!-- Text uppercase -->
<p class="text-uppercase">
  uppercased text
</p>
<!-- Text capitalized -->
<p class="text-capitalize">
  capitalized text
</p>

Font weight and italics #

The table below shows the classes which can be used to set the font-weight and font-style properties of text.

Class Description
.font-weight-light Sets the font-weight: 300 property
.font-weight-lighter Sets the font-weight: lighter property
.font-weight-normal Sets the font-weight: 400 property
.font-weight-medium Sets the font-weight: 500 property
.font-weight-semi-bold Sets the font-weight: 600 property
.font-weight-bold Sets the font-weight: 700 property
.font-weight-bolder Sets the font-weight: bolder property
.font-italic Sets the font-style: italic property

Please note that for a font to render properly in a specific weight, that weight must be available for that font. You can see some of the above classes in action in the example below:

This text will be normal.

This text will be bold.

This text will be italic.

<!-- Normal font weight -->
<p class="font-weight-normal">
  This text will be normal.
</p>
<!-- Bold font weight -->
<p class="font-weight-bold">
  This text will be bold.
</p>
<!-- Italic font style -->
<p class="font-italic">
  This text will be italic.
</p>

Font size #

The table below shows the classes which can be used to set the font-size property of text.

Class Description
.font-size-12 Sets the font-size: 1.2rem (12px) property
.font-size-14 Sets the font-size: 1.4rem (14px) property
.font-size-16 Sets the font-size: 1.6rem (16px) property
.font-size-18 Sets the font-size: 1.8rem (18px) property
.font-size-20 Sets the font-size: 2.0rem (20px) property
.font-size-22 Sets the font-size: 2.2rem (22px) property
.font-size-24 Sets the font-size: 2.4rem (24px) property

By default, the body text in Halfmoon is set to 14px. You can see the above classes in action in the example below:

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

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

The quick brown fox jumps over the lazy dog

<!-- font-size: 1.2rem (12px) -->
<p class="font-size-12">
  The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 1.4rem (14px) -->
<p class="font-size-14">
  The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 1.6rem (16px) -->
<p class="font-size-16">
  The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 1.8rem (18px) -->
<p class="font-size-18">
  The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 2.0rem (20px) -->
<p class="font-size-20">
  The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 2.2rem (22px) -->
<p class="font-size-22">
  The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 2.4rem (24px) -->
<p class="font-size-24">
  The quick brown fox jumps over the lazy dog
</p>

Monospace #

The .text-monospace class shifts the text to the monospace font stack.

This text will be monospace

<!-- Monospace font stack -->
<p class="text-monospace">
  This text will be monospace
</p>

Text decoration #

The text-decoration property can be set using the following classes:

  • The .text-decoration-none class sets it to none.
  • The .text-decoration-underline class sets it to underline.

No text decoration

Underlined

<!-- No text decoration -->
<p class="text-decoration-none">
  No text decoration
</p>
<!-- Text decoration underline -->
<p class="text-decoration-underline">
  Underlined
</p>

Reset color #

The .text-reset class makes the text inherit the color of its parent. This can be used on links for instance.

Muted text a nice link.

<!-- Text reset -->
<p class="text-muted">
  Muted text a <a href="#" class="text-reset text-decoration-underline">nice link</a>.
</p>

Extra letter spacing #

The class .text-extra-letter-spacing adds extra letter spacing to all the text. While the difference is very subtle, this can often improve the readability of the text.

It was going to rain

The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.

<!-- Extra letter spacing -->
<div class="content text-extra-letter-spacing">
  <h2 class="content-title">It was going to rain</h2>
  <p>
    The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
  </p>
</div>

Anti-aliasing # Since v1.1.0+

Anti-aliasing is a technique that can be used for making text smoother (if the browser supports it). It works best on light fonts on dark backgrounds. Otherwise, there is a slight loss of readability, especially if the font size is small. In Halfmoon, anti-aliasing is applied by default to all the light text in dark mode. This means that things like contextual buttons and alerts are left out (in dark mode). In light mode, anti-aliasing is not applied anywhere.

It is often useful to control the anti-aliasing using utility classes. The following classes are available for this purpose:

  • .text-smoothing-auto/.text-smoothing-auto-{lm|dm} removes any anti-aliasing, by resetting the filter to default.
  • .text-smoothing-antialiased/.text-smoothing-antialiased-{lm|dm} sets anti-aliasing to the text.

The *-lm classes work only in light mode, while the *-dm classes work only in dark mode. Without these extensions, the classes obviously apply to both modes.

This is anti-aliased in light mode

This is not anti-aliased in dark mode

<!-- Anti-aliased in light mode -->
<p class="text-smoothing-antialiased-lm font-size-16"> <!-- font-size-16 = font-size: 1.6rem (16px) -->
  This is anti-aliased in light mode
</p>
<!-- Not anti-aliased in dark mode -->
<p class="text-smoothing-auto-dm font-size-16"> <!-- font-size-16 = font-size: 1.6rem (16px) -->
  This is <strong>not</strong> anti-aliased in dark mode
</p>

It is worth repeating that anti-aliasing is applied by default to most things in dark mode. Therefore, the two scenarios in the above example are the most common use cases for these utility classes.

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.