Text formatting, alignment and size

zenCSS provides a robust set of text formatting utilities, enabling you to style and align text with ease. Whether you are aiming for a bold statement or subtle emphasis, these classes have got you covered.

Text Formatting Classes

Class Name	Description	Example
.text-thin	font-weight: 300	This text is thin.
.text-regular	font-weight: 400	This text is regular.
.text-medium	font-weight: 500	This text is medium.
.text-semibold	font-weight: 600	This text is semi-bold.
.text-bold	font-weight: 700	This text is bold.
.text-bolder	font-weight: 800	This text is bolder.
.text-boldest	font-weight: 900	This text is the boldest.
.text-italic	font-style: italic	This text is italic.
.text-uppercase	text-transform: uppercase	This text is uppercase.
.text-lowercase	text-transform: lowercase	This text is lowercase.
.text-underline	text-decoration: underline	This text is underlined.
.text-decoration-none	text-decoration: none	This text is undecorated.

Text Alignment Classes

Class Name	Description	Example
.text-center	Centers text horizontally within its container.	Center aligned text
.text-center-vertical	Centers text vertically within its container.	Vertically center aligned text
.text-right	Aligns text to the right within its container.	Right aligned text
.text-left	Aligns text to the left within its container.	Left aligned text

Text Size Classes

Class Name	Description	Example
.text-xxs	Decreases font size to 0.6em	xxs text size
.text-xs	Sets the font size to 0.8em	xs text size
.text-sm	Adjusts font size to 0.9em	sm text size
.text-md	Adjusts font size to 1.2em	md text size
.text-lg	Adjusts font size to 1.5em	lg text size
.text-xl	Adjusts font size to 2.5em	xl text size
.text-xxl	Adjusts font size to 4em	xxl text size

Span Classes

Class Name	Description	Example
.text-superscript	Displays text as superscript.	$49
.label	Displays text as a label.	NEW
.eyebrow	Displays text as a callout above content areas.	NEW
.text-dual	Switches text to light color for dark mode only.	text-primary text-dual

Usage Examples

Here are some examples showcasing how you might use these utilities in your HTML:

<!-- Example 1: Apply italic style to text -->
<p class="text-italic">This text is italic.</p>

<!-- Example 2: Center align text -->
<p class="text-center">This text is center aligned.</p>

<!-- Example 3: Set font size to bigger -->
<p class="text-xl">This text is extra large.</p>