Change the size, weight, and other font properties of the text, including global settings, headings, body text, and more.

• #font-size
• #font-weight
• #font-familly
• #text-alignment
• #text-transform
• #text-style

# Headings

All HTML headings from <h1> through <h6> are accessible. Additionally, classes .h1 through .h6 are provided to replicate heading font styling when the corresponding HTML element cannot be used.

With the fs-* as font-size utility, it's aligned with common sizes used in word processors. This provides a familiar and consistent experience for text styling across your web content.
Syntax: {fs}-{size}, use {qs}-{size} for quote.

• Text with font-size class [fs-16]
• Text with font-size class [fs-21]
• Text with font-size class [fs-28]
• Quote with `quote-size` class [qs-2]

# Text weight

You can transform the text weight with the use of

# Font familly

Suppoted font-familly include:

• body: Use a native font stack that selects the best font-family for each OS and device.
• headings: Use Segoe UI font.
• and about 70+ most used Google Fonts predefined class.

# Text alignment

Use text utilities as needed to change the alignment of your elements.

• .text-left : Makes the text aligned to the left
• .text-center : Makes the text centered
• .text-right : Makes the text aligned to the right
• .text-justified : Makes the text justified

# Text transformation

Use text utilities for controlling the transformation.

• .uppercase : Transforms all characters to UPPERCASE
• .lowercase : Transforms all characters to lowercase
• .capitalize : Transforms the first character of each word to Uppercase
• .upperfirst : Transforms the first character of the Text to Uppercase

# Text style/decoration

Use text utilities for controlling the style of text.

• .text-italic : Transforms all characters to italic
• .text-oblic : Transforms all characters to oblic
• .underline : underline the text.
• .underline-* : Utility controlling the underline decoration

Make use of underline
With underline-* utilities, we can use:

• .underline-{color}: To change the line color. (eg: .underline-red)
• .underline-{border-style}: To change the line style. (eg: .underline-double)

# Line height

Use

• .lh-{size} - utility for controlling the leading (line height) of an element.
• line-height based from a range of 1 to 6

# Line clamp

Use

• .line-clamp-{lines} - utility for clamping text at a specific number of lines.
• line-clamp based from a range of 1 to 6