Typography Extended

Extended typography utilities beyond the core library. Adds display-sized text (5xl through 9xl), gradient text effects, a prose class for auto-styling rich content, and text-pretty for improved line breaking.

Installation

Install the addon via npm or load it from a CDN. Requires the core library.

npm install @thenewcss/typography-extended

Design Tokens

Custom properties added to :root for extended font sizes.

Token	Value
`--text-5xl`	3rem
`--text-6xl`	3.75rem
`--text-7xl`	4.5rem
`--text-8xl`	6rem
`--text-9xl`	8rem

Size Utilities

Display-sized text classes for hero sections, landing pages, and large headings.

Class	Properties
`.text-5xl`	font-size: 3rem; line-height: 1
`.text-6xl`	font-size: 3.75rem; line-height: 1
`.text-7xl`	font-size: 4.5rem; line-height: 1
`.text-8xl`	font-size: 6rem; line-height: 1
`.text-9xl`	font-size: 8rem; line-height: 1

Example: Display sizes

text-5xl

text-6xl

text-7xl

text-8xl

text-9xl

<p class="text-5xl font-bold">text-5xl</p>
<p class="text-6xl font-bold">text-6xl</p>
<p class="text-7xl font-bold">text-7xl</p>
<p class="text-8xl font-bold">text-8xl</p>
<p class="text-9xl font-bold">text-9xl</p>

Gradient Text

The .text-gradient class applies background-clip text with a transparent text fill. Combine it with a CSS gradient background to create colorful text effects.

Class	Properties
`.text-gradient`	background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent

Example: Gradient text

Gradient Text

<span class="text-gradient text-5xl font-bold"
  style="background: linear-gradient(135deg, var(--color-blue-500), var(--color-purple-500))">
  Gradient Text
</span>

Prose

The .prose class auto-styles rich text content. Wrap any block of HTML content and it receives sensible typographic defaults -- headings, paragraphs, lists, blockquotes, code blocks, tables, and more are all styled automatically.

Class	Properties
`.prose`	max-width: 65ch; color: gray-800; line-height: 1.75

Prose child element styles

Element	Styles
`h1`	font-size: 2.25em, font-weight: 800, letter-spacing: -0.025em
`h2`	font-size: 1.5em, font-weight: 700, margin-top: 2em
`h3`	font-size: 1.25em, font-weight: 600
`h4, h5`	font-weight: 600
`h6`	font-size: 0.875em, color: gray-600
`p`	margin: 1.25em 0
`a`	color: blue-600, underlined, font-weight: 500
`ul`	list-style: disc
`ol`	list-style: decimal
`code`	color: gray-900, background: gray-100, border-radius
`pre`	background: gray-900 (dark), border-radius, overflow-x: auto
`blockquote`	font-style: italic, border-left: gray-300
`hr`	border-color: gray-200, margin: 3em 0
`table`	auto-styled with borders

Example: Prose content

The Art of Typography

Why Typography Matters

Good typography makes content readable and inviting. The prose class handles all the spacing, sizing, and styling so you can focus on writing great content.

Automatic heading sizes and weights
Consistent paragraph spacing
Styled lists, blockquotes, and code blocks

Typography is the craft of endowing human language with a durable visual form.

Inline code is styled automatically. Links like this example link get the right color and decoration.

<div class="prose">
  <h1>The Art of Typography</h1>
  <h2>Why Typography Matters</h2>
  <p>Good typography makes content readable...</p>
  <ul>
    <li>Automatic heading sizes and weights</li>
    <li>Consistent paragraph spacing</li>
    <li>Styled lists, blockquotes, and code blocks</li>
  </ul>
  <blockquote>
    <p>Typography is the craft of endowing human language...</p>
  </blockquote>
  <p>Inline <code>code</code> is styled automatically.</p>
</div>

Text Pretty

The .text-pretty class applies text-wrap: pretty for improved line breaking. It prevents orphans and creates more balanced text blocks.

Class	Properties
`.text-pretty`	text-wrap: pretty

Example: Text pretty

This paragraph uses text-pretty for improved line breaking. The browser will try to balance lines and avoid leaving single words on the last line, creating a more visually pleasing text block.

<p class="text-pretty max-w-md">
  This paragraph uses text-pretty for improved line breaking.
  The browser will try to balance lines and avoid orphans.
</p>

Full Class Reference

All classes included in the typography-extended addon.

Class	Properties
`.text-5xl`	font-size: 3rem; line-height: 1
`.text-6xl`	font-size: 3.75rem; line-height: 1
`.text-7xl`	font-size: 4.5rem; line-height: 1
`.text-8xl`	font-size: 6rem; line-height: 1
`.text-9xl`	font-size: 8rem; line-height: 1
`.text-gradient`	background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent
`.prose`	max-width: 65ch; color: gray-800; line-height: 1.75; auto-styles child elements
`.text-pretty`	text-wrap: pretty