Typography Helper Classes

TIP

See Color Helper Classes for Color Helper Classes.

These utility classes (prefixed with h-) provide quick overrides for text alignment, weight, and decoration without writing custom CSS for every component.

Alignment Helpers

Controls the horizontal flow of text within its container.

Class	Purpose	Preview (Live)	Code Snippet
.h-type-align-left	Left-aligned text	Text aligned left (Default)	<p class="h-type-align-left">...</p>
.h-type-align-center	Centered text	Text aligned center	<p class="h-type-align-center">...</p>
.h-type-align-right	Right-aligned text	Text aligned right	<p class="h-type-align-right">...</p>

Emphasis & Decoration

Used to highlight specific words or apply visual transformations.

Class	Purpose	Preview (Live)	Code Snippet
.h-type-emphasize	Italicized style	Emphasized text	<p class="h-type-emphasize">...</p>
.h-type-bold	Heavier font weight	Bolded text	<p class="h-type-bold">...</p>
.h-type-uppercase	All capital letters	uppercase text	<p class="h-type-uppercase">...</p>
.h-type-underline	Standard text decoration	Underlined text	<p class="h-type-underline">...</p>
.h-type-underline-pseudo	Custom hover/pseudo underline		<button class="h-type-underline-pseudo">...</button>

Typography Size Utilities

These helper classes allow you to apply specific font sizes from your design scale to any text element, regardless of its HTML tag.

Class	Scale Level	Preview (Live)	Code Snippet
Extra Large	.h-type-extra-large	Extra Large Text Size	<p class="h-type-extra-large">...</p>
Largest	.h-type-largest	Largest Text Size (I know the naming is 🤡)	<p class="h-type-largest">...</p>
Larger	.h-type-larger	Larger Text Size	<p class="h-type-larger">...</p>
Large	.h-type-large	Large Text Size	<p class="h-type-large">...</p>
Base	.h-type-base	Base Text Size (Standard)	<p class="h-type-base">...</p>
Small	.h-type-small	Small Text Size	<p class="h-type-small">...</p>
Extra Small	.h-extra-small	Extra Small Text Size	<p class="h-extra-small">...</p>

Text Wrapping & Breaking

These classes control how the browser handles line breaks when a string of text is too long for its container.

Class	Behavior	Preview (Live)	Code Snippet
.h-break-word	Wraps long words at logical points to prevent overflow.	Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod	<span class="h-break-word">...</span>
.h-no-wrap	Forces text to stay on a single line; collapses extra spaces.	Lorem ipsum dolor sit amet consetetur sadipscing	<span class="h-no-wrap">...</span>
.h-break-all	Breaks words at any character to strictly fit the width.	Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod	<span class="h-break-all">...</span>
.h-break-spaces	Behaves like pre-wrap but breaks at any whitespace sequence.	Lorem ipsum dolor sit amet	<span class="h-break-spaces">...</span>

Overflow Management

Utilities for handling content that exceeds the dimensions of its parent container.

Class	Purpose	Preview (Live)	Code Snippet
.h-overflow-hidden	Hides any content that spills outside the box.	Long text hidden here	<div class="h-overflow-hidden">...</div>
.h-overflow-auto	Adds scrollbars only if content overflows.	Scrollable content goes here	<div class="h-overflow-auto">...</div>
.h-overflow-ellipsis	Adds ... to truncated text (requires block & width).	This text is way too long for this small box	<span class="h-overflow-ellipsis">...</span>

Visual Transformation

Class	Purpose	Preview (Live)	Code Snippet
.h-capitalize-first-letter	Automatically capitalizes the first character of a string.	lorem ipsum (transformed)	<span class="h-capitalize-first-letter">...</span>

Line Height

Class	Purpose	Preview (Live)	Code Snippet
.h-line-height-1	Sets the line height to 1.	This text has a line height of 1.	<p class="h-line-height-1">...</p>
.h-line-height-1-5	Sets the line height to 1.5.	This text has a line height of 1.5.	<p class="h-line-height-1-5">...</p>
.h-line-height-inherit	Sets the line height to "inherit".	This text inherits the line-height.	<p class="h-line-height-inherit">...</p>