> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nomiq.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Typography Guide: Choosing Brand Fonts Using Nomiq
> Explore typographic principles, font archetypes, type scale ratios, and pairing strategies to build a cohesive, expressive brand with Nomiq.
Typography is the part of your brand identity that most people sense but rarely consciously notice—until it's wrong. The right font pairing makes a website feel authoritative, welcoming, or cutting-edge without a single word being read. The wrong pairing creates a subtle but persistent feeling of mismatch that erodes trust. Because Nomiq generates a complete typographic system alongside your logo and color palette, understanding how font choices work helps you evaluate, guide, and refine your brand's voice with far greater precision.
## Display Fonts vs. Body Fonts
Every robust brand uses at least two typefaces with distinct roles. Mixing these roles—or using a single font for everything—is one of the most common typographic mistakes in brand design.
**Display fonts** (sometimes called heading or primary fonts) carry the personality of your brand. They appear at large sizes: logo wordmarks, hero headlines, section titles, pull quotes. At these scales, their distinctive character traits—the curve of a serif, the geometry of a letterform, the idiosyncratic details of a display cut—are visible and impactful. Display fonts should be expressive, memorable, and closely aligned with your brand's emotional tone.
**Body fonts** (also called secondary or UI fonts) prioritize legibility over personality. They appear at reading sizes—body copy, captions, navigation labels, form fields, data tables. At 14–18px, decorative details become noise rather than character. A great body font is "invisible" in the best sense: it lets the content breathe without drawing attention to itself.
Never use a display font at body-copy sizes (below 18px). The decorative features that make a display font striking at 72px become visually cluttered at 14px, reducing readability and making long passages exhausting to read. Nomiq enforces this boundary automatically by assigning display fonts only to heading-level tokens in your generated type scale.
## Font Personality: What Different Archetypes Communicate
Just as colors carry psychological associations, typefaces communicate personality through their structure and history. Understanding these archetypes lets you evaluate whether a font Nomiq suggests genuinely fits your brand voice.
| Archetype | Visual Characteristics | Personality | Best For |
| ----------------------------- | ----------------------------------------------- | --------------------------------------- | -------------------------------------- |
| **Old-Style Serif** | Angled stress, low contrast, bracketed serifs | Heritage, trust, editorial authority | Law firms, publishers, luxury goods |
| **Modern / Didone Serif** | Vertical stress, high contrast, hairline serifs | Elegance, fashion, high-end positioning | Fashion brands, fintech, agencies |
| **Slab Serif** | Heavy uniform serifs, low contrast | Bold, sturdy, direct, confident | Startups, food brands, sports |
| **Humanist Sans-Serif** | Organic, varied stroke width, open apertures | Friendly, approachable, warm | Healthcare, education, non-profits |
| **Geometric Sans-Serif** | Perfect circles and squares, uniform strokes | Modern, rational, clean, technical | SaaS, tech, design tools |
| **Grotesque / Neo-Grotesque** | Neutral, minimal quirks, high legibility | Professional, utilitarian, versatile | Enterprise software, news, finance |
| **Monospace** | Fixed-width characters, mechanical feel | Technical, precise, developer-native | Dev tools, coding platforms, data |
| **Display / Decorative** | High personality, unconventional letterforms | Expressive, bold, niche | Creative agencies, hospitality, events |
## Type Scales: Creating Visual Rhythm
A type scale is a set of predetermined font sizes that follow a mathematical ratio, ensuring that each level of your heading hierarchy feels proportionally related to the next. Rather than choosing sizes arbitrarily (24px, 28px, 34px…), a modular scale produces sizes that feel cohesive because they share a common multiplier.
The **Major Third scale (ratio: 1.250)** is one of the most versatile scales for digital brands:
| Token | Ratio Step | Approximate Size (base 16px) |
| ----------- | ---------- | ---------------------------- |
| `text-xs` | –2 | 10.24px |
| `text-sm` | –1 | 12.80px |
| `text-base` | 0 | 16.00px |
| `text-lg` | +1 | 20.00px |
| `text-xl` | +2 | 25.00px |
| `text-2xl` | +3 | 31.25px |
| `text-3xl` | +4 | 39.06px |
| `text-4xl` | +5 | 48.83px |
Other commonly used ratios include the **Minor Third (1.200)** for compact, information-dense UIs, the **Perfect Fourth (1.333)** for editorial and marketing sites with dramatic hierarchy, and the **Golden Ratio (1.618)** for very expressive, large-display contexts.
Nomiq generates a complete modular scale as part of every brand kit, expressed as CSS custom properties and Tailwind-compatible tokens so your developers can implement the scale without manual calculation.
## Font Pairing Principles
A well-paired type system creates tension and contrast between the display and body fonts—enough difference to create visual interest, but enough shared DNA to feel like they belong in the same family. Nomiq uses several tested pairing strategies:
**Geometric Sans + Humanist Sans**
The workhouse pairing for modern SaaS and tech products. The geometric font (e.g., *Plus Jakarta Sans*, *Outfit*) gives headlines a clean, rational energy, while the humanist body font (e.g., *Inter*, *Source Sans*) adds warmth and legibility at reading sizes. This combination is familiar without being boring and works exceptionally well across light and dark interfaces.
**Modern Serif + Geometric Sans**
The editorial pairing. A high-contrast serif (e.g., *Playfair Display*, *DM Serif Display*) in headlines signals elegance and authority, while a clean geometric sans in the body keeps modern readability intact. This is the preferred pairing for agencies, fintech startups, premium consumer brands, and any brand that wants to feel sophisticated without being inaccessible.
**Monospace + Grotesk**
The developer pairing. A monospace display font (e.g., *JetBrains Mono*, *Space Mono*) in headlines signals precision, technical depth, and authenticity to a developer audience. Paired with a neutral grotesk body font (e.g., *Space Grotesk*, *IBM Plex Sans*), the system feels raw and credible without becoming illegible. Nomiq selects this pairing when your brand prompt includes terms like "developer," "API," "DevOps," or "CLI."
**Display + Neutral Sans**
For brands that need maximum personality in their headlines—creative studios, hospitality brands, event companies—a high-character display font (e.g., *Clash Display*, *Cabinet Grotesk*, *Fraunces*) paired with a completely neutral body font lets the display font own the stage without the body copy competing for attention.
## Web Font Compatibility and Performance
Beautiful font choices mean nothing if they slow down your site or fail to render consistently across browsers. When Nomiq selects typefaces, it prioritizes fonts available through **Google Fonts** or **Adobe Fonts**—both of which serve fonts from globally distributed CDNs with excellent caching characteristics. Nomiq also generates a `font-display: swap` declaration for all web font assignments, ensuring that users see text immediately (using a system fallback) rather than waiting for the custom font to load.
If you're building with a CSS framework like Tailwind or a design system like Radix, Nomiq's exported design tokens include the exact `fontFamily` values you need to drop directly into your `tailwind.config.js` or CSS variables file—no manual setup required.
## How Nomiq Assigns Fonts Based on Brand Voice
When you write a prompt in Nomiq, the AI extracts emotional and positional signals to make typographic decisions. Here's how that translation works in practice:
* Prompts containing words like **"trustworthy," "established," "premium"** → Nomiq leans toward serif display fonts with high-contrast stroke variation.
* Prompts containing **"modern," "clean," "SaaS," "minimal"** → Geometric or neo-grotesque sans-serif display fonts.
* Prompts containing **"developer," "API," "technical," "data"** → Monospace or mechanical sans display fonts.
* Prompts containing **"bold," "confident," "disrupting"** → Slab serif or heavy display grotesque.
* Prompts containing **"friendly," "community," "accessible"** → Humanist sans for both display and body, with a rounder, warmer character.
You can always override Nomiq's recommendation by locking the font roles before regenerating, or by specifying a font preference directly in your prompt (e.g., "use a serif headline font reminiscent of editorial magazines").
***
Understand how color palette decisions interact with your typographic choices to shape brand perception.
Learn how shapes, colors, and type work together to influence how customers perceive and trust your brand.