> TYPOGRAPHY

Headings

Heading 1 (3xl)

Heading 2 (2xl)

Heading 3 (xl)

Heading 4 (lg)

Font Sizes

3xl - Extra Extra Large

2xl - Extra Large Plus

xl - Extra Large

lg - Large

base - Base Size

sm - Small

xs - Extra Small

Paragraphs & Links

This is a paragraph with a styled link inside it. The NFO aesthetic brings back memories of the demoscene era. Links turn white and underline on hover.

Small text for captions and metadata. Try selecting this text to see the custom selection color.

Text Alignment

.nfo-left

Left aligned text for standard reading flow.

.nfo-center

Centered text for headings and emphasis.

.nfo-right

Right aligned text for special layouts.

Font Weight

.nfo-normal - Regular weight (400)

.nfo-bold - Bold weight (700)

Text Transform

.nfo-uppercase

all caps text

.nfo-lowercase

ALL LOWERCASE TEXT

.nfo-capitalize

capitalize each word

Letter Spacing

.nfo-tracking-tight - Tight letter spacing

.nfo-tracking-normal - Normal letter spacing

.nfo-tracking-wide - Wide letter spacing

.nfo-tracking-wider - Wider letter spacing

Line Height

.nfo-leading-tight

Tight line height for compact text. This paragraph demonstrates how leading-tight brings lines closer together for a denser appearance.

.nfo-leading-snug

Snug line height is slightly tighter than normal. This paragraph shows the snug spacing which works well for UI elements.

.nfo-leading-normal

Normal line height for body text. This is the default spacing that provides comfortable reading for longer content.

.nfo-leading-relaxed

Relaxed line height with extra spacing. This paragraph has more breathing room between lines for improved readability.

Text Decoration

.nfo-underline

.nfo-line-through

.nfo-no-underline

Text Shadow

.nfo-shadow-text - Basic text shadow effect

.nfo-shadow-none - No text shadow

Whitespace

.nfo-whitespace-nowrap

This text will not wrap to the next line even if container is narrow.

.nfo-whitespace-pre

Preserves spaces and line breaks exactly as written.

.nfo-whitespace-pre-line

Collapses multiple spaces but preserves line breaks in the source.

.nfo-whitespace-pre-wrap

Preserves spaces and line breaks, but also wraps when needed to fit the container width.

Text Overflow

.nfo-truncate

This is a very long text that will be truncated with an ellipsis when it exceeds the container width.

.nfo-break-words

Superlongwordthatwillbreakwhenneeded to fit the container.

Code

Inline code: const greeting = "Hello, World!";

Use .nfo-code for inline code snippets.