Typography Mastery

The Art of Hierarchy

Typography is the carrier of information. In MockaUI, you can command precise font scales, weight distributions, and personality pairings to guide the user's eye.

The Technical Scale

Display Text (H1)
72px+ Headlines

Best for Hero sections. Describe as: "Ultra-bold display font with -0.05em tracking".

Sub-Headings (H2)
32px Section Headers

Describe as: "Tight leading, semi-bold sans-serif".

Body Copy
The majority of your content should be 16px - 18px. Our AI defaults to high-readability line-heights (1.6x) but you can prompt for "Dense body copy" if needed.
Micro-Copy
Captions & Tags

Perfect for badges. Use "uppercase tracking-widest font-black" for that premium feel.

Pairing Archetypes

The Tech Startup

Inter + JetBrains Mono

Clean, neutral sans-serif headings paired with monospaced accents for a developer-centric, precise look.

"Pair a bold serif heading with a wide-tracked sans body..."

The Luxury Brand

Playfair Display + Montserrat

Elegant, high-contrast serif headlines with a wide, airy sans-serif for the body copy. Premium feel.

"Pair a bold serif heading with a wide-tracked sans body..."

The Modern SaaS

Outfit + Plus Jakarta Sans

Geometric sans-serifs that feel friendly, approachable, and highly legible on high-resolution screens.

"Pair a bold serif heading with a wide-tracked sans body..."

Prompting for Readability

When prompting for text, don't just say "Add text". Use specific Tailwind Utility descriptors in your English sentence:

  • →
    "Use leading-relaxed for long paragraphs"
  • →
    "Add tracking-tighter to the main H1"
  • →
    "Ensure text-balance for centered headings"
"Design is 95% Typography. The words shouldn't just be readable; they should have presence."
Next Lesson
Styling & Visual Effects →