Home/Blog/Typography
    Typography

    Font Size and Spacing Guide for UI Design: The Complete System

    By InspoAI Editorial Team

    •

    April 18, 2026

    Typography and spacing are the unsung heroes of user interface design. They determine not only how content looks but how it feels and how easily users can digest information. A well-structured font size scale paired with consistent spacing creates rhythm, hierarchy, and readability. This guide dives deep into practical, actionable rules for establishing a typographic system, with a focus on the Denton font—a versatile serif that brings elegance to modern UIs. We'll also explore how to implement these principles in a React + Tailwind CSS project using InspoAI's generative capabilities.

    Summary

    This guide covers font size hierarchy and spacing units (4px/8px grid) for UI design. Apply Denton font with scale 14–48px and spacing multiples of 8px. Use InspoAI to generate a responsive React+Tailwind layout with structured cards.

    Table of Contents

    AI Design & Brand Compliance Audit
    Try InspoAI App →

    InspoAI Platform Feature

    AI Design & Brand Compliance Audit

    Try App
    Agentic UI Generation Workspace
    Try InspoAI App →

    InspoAI Platform Feature

    Agentic UI Generation Workspace

    Try App

    The Foundation of Visual Harmony: Font Size and Spacing in UI

    Understanding Font Size Hierarchy

    A clear size hierarchy guides users through content effortlessly. Here's a proven scale for UI (in pixels):

    • Heading 1 (H1): 48px – Hero sections, major landing page titles.
    • Heading 2 (H2): 36px – Section headers, blog post titles.
    • Heading 3 (H3): 28px – Card titles, subsection headers.
    • Heading 4 (H4): 22px – Modal titles, feature labels.
    • Body (Regular): 16px – Primary reading text.
    • Body Small: 14px – Captions, metadata, secondary info.
    • Caption: 12px – Legal text, tooltips, small labels.

    This scale follows a 1.25 modular scale (major third), ensuring each step is visually distinct yet harmonious. For Denton, which has a larger x-height, you might slightly reduce sizes (e.g., H1 at 44px) to maintain balance.

    Spacing with the 8px Grid System

    Spacing should be mathematically predictable. The 8px grid is the industry standard: all margins, paddings, and gaps are multiples of 8 (4px for fine-tuning). For example:

    • Section padding: 64px (8 × 8)
    • Card padding: 24px (3 × 8) or 32px (4 × 8)
    • Gap between elements: 16px (2 × 8) or 24px
    • Line height: 1.5× font size (e.g., 24px for 16px body)

    When using Denton, adjust line height slightly (1.4×) because of its elegant serifs that need breathing room.

    Practical Implementation with InspoAI

    InspoAI lets you generate a fully responsive React layout based on these guidelines. Here's a step-by-step example:

    Prompt: "Create a clean React layout based on the font size and spacing guide for ui guidelines. Include structured cards, Denton font styling, and responsive layout spacing."

    InspoAI outputs a component like:

    Code
    Code
    Practical application & checklist
    ✓
    Modular Font Scale
    Use 48/36/28/22/16/14/12 px for H1–caption, adjusting Denton slightly.
    ✓
    8px Spacing Grid
    All margins, paddings, and gaps are multiples of 8 (e.g., 16, 24, 32, 48, 64).
    ✓
    Denton Line Height
    1.4× for headings, 1.6× for body to accommodate serifs.
    ✓
    Responsive Adjustments
    Scale down sizes and spacing by 25–50% on tablets and mobile.
    SC
    Sarah Chen
    Lead Design Engineer at InspoAI, formerly UX Architect at Stripe. Sarah specializes in developer-friendly Figma specs and design system code generation.
    Frequently asked questions
    Quick answers to help clarify layout workflows for "font size and spacing guide for ui".
    Sources and documentation
    developers.google.comdevelopers.google.comdevelopers.google.comblogs.bing.comw3.org
    Related Solutions
    → ai saas ui generator
    Related Educational Guides
    → blogs→ best font pairings for websites→ best google fonts for saas→ inter font alternatives
    TL;DR Key Takeaways
    • 1Use a modular scale (1.25 major third) for font sizes from 12px to 48px.
    • 2Adopt an 8px grid system for all spacing: padding, margins, gaps, and line heights.
    • 3Pair Denton serif headings with a clean sans-serif body for contrast.
    • 4InspoAI generates React+Tailwind code that automates these typography and spacing rules.
    Generate this UI with InspoAI
    Start from a prompt, not a blank canvas. Generate Tasteful, design-grounded React + Tailwind CSS code instantly in our Creator Studio.
    Start generating7-day free trial · Cancel anytime