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.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.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:
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 afont-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.
Color Theory
Understand how color palette decisions interact with your typographic choices to shape brand perception.
Brand Psychology
Learn how shapes, colors, and type work together to influence how customers perceive and trust your brand.