PRODUCTION TYPOGRAPHY SYSTEM: 14px base system with Proxima Nova + Arial
HIERARCHY: Display (48px) > H1 (22px) > H2 (18px) > H3 (16px) > H4 (14px) > H5 (12px)
BODY TEXT: Large (18px) > Medium (16px) > Small (14px, default) > XS (12px)
INTERACTIVE: Interaction (14px) | Indicator (12px)

Use semantic HTML tags with production classes for consistent, accessible typography. Display and H1-H3 use Proxima Nova Bold; H4-H5 and all body text use Arial.

Production Typography Quick Reference

Display & Headings: .text-display | .h1-.h5 (or .text-heading-1 to .text-heading-5)
Body Text: .text-body-{l|m|s|xs} - L=18px, M=16px, S=14px (default), XS=12px
Interactive: .text-interaction (14px, buttons) | .text-indicator (12px, badges)
Utilities: .prose (800px max-width container)
Colors: .text-{primary|secondary|success|danger|warning|info|dark|light|muted|white|black}
Weights: .font-{light|normal|medium|semibold|bold} | Style: .italic, .not-italic
Decoration: .underline, .line-through, .no-underline
Alignment: .text-{left|center|right|justify} | Transform: .{lowercase|uppercase|capitalize}
Wrapping: .whitespace-{normal|nowrap}, .break-words, .truncate
Special: .mark, .blockquote, .list-unstyled, .list-inline

Heading Typography

Usage Guide:
H1 (22px): Main title of all pages
H2 (18px): Title of a section/block inside a page
H3 (16px): Title of a listed content inside a page or sub-section
H4 (14px): Input label or table title
H5 (12px): Help text titles, low-priority sub-sections
Note: H1-H3 use Proxima Nova Bold; H4-H5 use Arial Bold. H6 is aliased to H5.

H1-H3: Proxima Nova Bold

Heading 1 - Main Page Title

.h1 or .text-heading-1

Heading 2 - Section Title

.h2 or .text-heading-2

Heading 3 - Sub-section Title

.h3 or .text-heading-3

H4-H5: Arial Bold

Heading 4 - Input Labels

.h4 or .text-heading-4

Heading 5 - Help Text Titles

.h5 or .text-heading-5

Heading 6 (aliased to H5)

.h6 (renders same as .h5)

Body Typography

All body text uses Arial. Choose the appropriate size based on content emphasis:
Body L (18px): Short texts that need much emphasis
Body M (16px): Texts that need emphasis
Body S (14px): Default for all regular texts (most common)
Body XS (12px): Help text or texts with low read priority

This is Body Large (18px). Use for short emphasized text that needs prominence, such as introductory paragraphs or key statements.

.text-body-l

This is Body Medium (16px). Use for text that needs emphasis but is longer than a brief statement, such as important descriptions or highlighted content.

.text-body-m

This is Body Small (14px). This is the default for all regular text throughout the application. Use for standard paragraphs, descriptions, and general content. Most of your body text should use this size.

.text-body-s (or no class for default sizing)

This is Body Extra Small (12px). Use as help text, low-priority information, captions, timestamps, or fine print. This is the smallest body text size.

.text-body-xs

Visual Comparison

Body L - Emphasized introduction text

Body M - Secondary emphasis text

Body S - Default body text (most common)

Body XS - Help text and captions

Interactive & Indicator Typography

Interaction (14px, Arial, lh 1.15): Used in buttons and standalone hyperlinks. Applied automatically via button component.

Buttons automatically use .text-interaction sizing internally.

Indicator (12px, Arial, lh 1.16): Used for badge labels and indication labels throughout the UI.

Badge Label Status

Use .text-indicator for small labels and badges.

Display Typography

Display (48px, Proxima Nova Semibold, lh 1.0): Short titles that need emphasis. Use for hero sections and dramatic headings.

This is Display Typography

<h1 class="text-display">Hero Title</h1> or <h1 class="display-1">Hero Title</h1> (alias)

Prose Container (Optimal Line Width)

The .prose utility: Constrains content width to 800px maximum for optimal readability. Prevents overly long lines that cause eye fatigue. Use on content containers with long-form text.

Example Article Content

This content is wrapped in a .prose container, which limits the maximum width to 800px. This ensures optimal line length for reading comfort. Research shows that lines of text between 45-75 characters are easiest to read.

Notice how the text doesn't extend too far across the screen on large displays. This container automatically centers itself and maintains comfortable reading width regardless of viewport size.

<div class="prose">...long-form content...</div>

Text Colors (Semantic Palette)

Semantic Colors: Use colors to convey meaning - primary for links, success for positive actions, danger for errors, muted for secondary info.

.text-primary

Main actions, links

.text-secondary

Branding accent

.text-success

Positive, confirmations

.text-danger

Errors, warnings

.text-warning

Cautions, alerts

.text-info

Informational

.text-dark

Dark text

.text-light

Light text (on dark)

.text-muted

Muted, secondary

.text-white

White text

.text-black

Black text

Font Weights & Styles

Font Weights: Control text emphasis from light (300) to bold (700). Use Tailwind's native classes.

.font-light - Light weight (300)

.font-normal - Normal weight (400)

.font-medium - Medium weight (500)

.font-semibold - Semibold weight (600)

.font-bold - Bold weight (700)

Font Styles: Italic for emphasis or normal to override. Use Tailwind's native classes.

.italic - Italic text

.not-italic - Normal styled text

<p class="font-bold">...</p>
<p class="italic">...</p>

Text Decoration

Decorations: Add or remove underlines and line-throughs. Use Tailwind's native classes.

.underline - Underlined text

.line-through - Strike-through text

.no-underline - Link without underline

<p class="underline">...</p>

Text Alignment

Alignment: Control horizontal text positioning within containers. Use Tailwind's native classes.

.text-left - Left aligned text (default for LTR languages)

.text-center - Center aligned text

.text-right - Right aligned text

.text-justify - Justified text stretches to fill the full width of the container, creating even edges on both sides for a cleaner, more formal appearance.

<p class="text-center">...</p>

Text Transform

Transform: Change text casing without modifying the actual content. Use Tailwind's native classes.

.lowercase - TRANSFORMS TO LOWERCASE

.uppercase - transforms to uppercase

.capitalize - transforms to capitalized

<p class="uppercase">...</p>

Text Utilities (Wrapping & Overflow)

Wrapping: Control how text wraps and breaks within containers. Use Tailwind's native classes.

.whitespace-normal - This text will wrap normally when it reaches the edge of the container, allowing multiple lines.

Default behavior

.whitespace-nowrap - This text will not wrap and will continue on a single line even if it overflows the container.

Forces single line

.break-words - Thisverylongwordwithnospacescanbreakanywheretopreventoverflowingthecontainer

Breaks long words

.truncate - This very long text will be truncated with an ellipsis when it exceeds the container width

Shows ellipsis (...)

<p class="truncate">...</p>

Special Elements

Mark / Highlight

Use the mark element to highlight specific text within content.

<mark class="mark">highlighted text</mark>

Blockquote

This is a blockquote for displaying quoted text or testimonials. It has distinct styling to set it apart from regular content.

Citation or source attribution

<blockquote class="blockquote">...</blockquote>

Lists

.list-unstyled

Remove default list styling
No bullets or numbers
No left padding

.list-inline

Item 1
Item 2
Item 3

<ul class="list-unstyled">...</ul>
<ul class="list-inline"><li class="list-inline-item">...</li></ul>

Production Sizing Specifications

NAME	CLASS	SIZE (PX)	LINE HEIGHT	FONT	WHERE & WHEN TO USE
Display	`.text-display` or `.display-1`	48px	48px (1.0)	Proxima Nova Semibold	Short title that need emphasise
H1	`.h1` or `.text-heading-1`	22px	24px (1.1)	Proxima Nova Bold	Main title of all page
H2	`.h2` or `.text-heading-2`	18px	22px (1.2)	Proxima Nova Bold	Title of a section/block inside a page
H3	`.h3` or `.text-heading-3`	16px	20px (1.25)	Proxima Nova Bold	Title of a listed content inside a page or sub-section
H4	`.h4` or `.text-heading-4`	14px	16px (1.15)	Arial Bold	Input label or Table title
H5	`.h5` or `.text-heading-5`	12px	14px (1.17)	Arial Bold	Help text titles, low read sub-sections
Body L	`.text-body-l`	18px	28px (1.55)	Arial	Short texts that need much emphasise
Body M	`.text-body-m`	16px	24px (1.5)	Arial	Texts that need emphasize
Body S	`.text-body-s`	14px	20px (1.4)	Arial	Default for all regular texts
Body XS	`.text-body-xs`	12px	16px (1.33)	Arial	As help text or texts with low read priority
Interaction	`.text-interaction`	14px	16px (1.15)	Arial	For interactive elements like button, standalone hyperlink
Indicator	`.text-indicator`	12px	14px (1.16)	Arial	For badge labels or indication labels

Note: All sizing uses the 14px base system (1rem = 14px).

Font Strategy: Display and H1-H3 use Proxima Nova for brand identity; H4-H5 and all body text use Arial for performance and readability.