Home>Typography Guide

Typography Guide – Professional Font & Text Layout Rules for Designers

Introduction

Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. Great typography does not only make your design look professional — it improves user experience, strengthens brand identity, and guides viewers’ attention through your content.

This guide covers standard Western typography rules followed by UI/UX designers, graphic artists, and web developers worldwide. These universal principles apply to logos, websites, posters, print media, and social media visuals.

1. Basic Typography Terminology (Must-Know)

Understanding core terms helps you choose fonts and adjust layouts accurately.

  • Typeface / Font Family: A complete set of letter designs (e.g., Arial, Times New Roman, Script fonts).

  • Font Weight: The thickness of strokes — Regular, Medium, Bold, Semibold, Black, Light.

  • Kerning: Spacing between inpidual letter pairs for balanced visual rhythm.

  • Tracking (Letter Spacing): Overall uniform spacing across an entire line of text.

  • Leading (Line Height): Vertical spacing between lines of text, critical for readability.

  • Baseline: The invisible horizontal line where most letters sit.

  • X-Height: The height of lowercase letters, which determines how open and readable a font feels.

2. The Four Core Font Styles & Best Use Cases

Professional design always starts with correct font classification. Mixing font styles improperly is the most common beginner mistake.

2.1 Serif Fonts

Serif fonts have small decorative strokes at the ends of letterforms. They deliver a classic, elegant, formal, and trustworthy feeling.

Best for: Long reading content, books, newspapers, official documents, luxury branding, wedding invitations, and vintage-style posters.

Avoid for: Small mobile UI text and modern minimal interface design.

2.2 Sans Serif Fonts

Sans serif means “without strokes”. These fonts feature clean, sharp, minimalist lines with excellent screen readability.

Best for: Website body text, mobile UI design, app interfaces, modern logos, banners, and minimal branding.

Why designers love it: High clarity on digital screens, neutral tone, easy to pair with almost any font style.

2.3 Script & Handwritten Fonts

Script and handwritten fonts simulate natural handwriting, bringing warmth, personality, and artistic flair.

Best for: Headlines, signature logos, wedding designs, greeting cards, social media captions, and decorative titles.

Rule: Never use script fonts for body paragraphs — they reduce reading speed significantly.

2.4 Display & Decorative Fonts

Display fonts are highly stylized, unique, and eye-catching, created specifically for visual impact rather than long-form reading.

Best for: Poster titles, game visuals, brand slogans, festival banners, and hero text.

Limitation: Use only in short text; overusing decorative fonts makes designs messy and unprofessional.

3. Standard Font Pairing Rules (Professional Level)

Good font pairing creates visual hierarchy without visual conflict. Follow these universal rules:

3.1 The 2-Font Maximum Rule

One design project should useat most two different font families: one for headings, one for body text. More than two fonts will break visual consistency.

3.2 Classic Safe Pairings

  • Sans Serif Headline + Sans Serif Body: Clean, modern, safe for all web and UI designs.

  • Serif Headline + Sans Serif Body: Elegant contrast, perfect for blogs, magazines, and luxury brands.

  • Script Headline + Simple Sans Serif Body: Artistic and balanced for social media and print artwork.

3.3 What to Avoid

  • Do not pair two overly decorative fonts together.

  • Do not mix two similar sans-serif or serif fonts (causes visual confusion).

  • Avoid bold, stylized fonts for small paragraph text.

4. Text Hierarchy Rules (Web & Print Standard)

Hierarchy guides users to read content in the correct order: Headline → Subheading → Body Text → Caption.

4.1 Standard Size Scale for Digital Design

  • H1 Main Title: 28px–36px (Bold, high contrast)

  • H2 Subheading: 22px–26px (Semibold)

  • H3 Minor Title: 18px–20px (Medium)

  • Body Text: 14px–16px (Regular, highest readability)

  • Caption / Footer Text: 12px–13px (Light)

4.2 Line Height (Leading) Golden Ratio

  • Body text line height: 1.5x – 1.6x of font size (most readable for long articles)

  • Heading line height: 1.2x – 1.3x (tight and compact for titles)

4.3 Letter Spacing (Tracking)

  • Large headlines: Slight letter spacing +5~10 improves premium feeling

  • Body text: Keep default tracking for natural reading

  • All-caps titles: Always add extra letter spacing to avoid cramped visuals

5. Color & Contrast Typography Rules

Poor color contrast is one of the biggest reasons for low-quality design.

  • Body text: Avoid pure black (#000000). Use dark gray (#222222 / #333333) for softer, eye-friendly reading.

  • Background rule: Dark background uses light text; light background uses dark text.

  • Contrast standard: Follow WCAG accessibility rules — ensure readable contrast for all users.

  • Colored text limit: A single design should have no more than 3 text colors to maintain consistency.

6. Capitalization & Punctuation Standards

  • Title Case: Capitalize the first letter of major words for page titles and headings.

  • Sentence Case: Only capitalize the first word for body paragraphs (most natural for reading).

  • All Caps: Only use for short slogans or highlights; never for long paragraphs (slows reading speed).

7. Web Font Best Practices

  • Use WOFF2 format for website embedding — smallest file size and fastest loading speed.

  • Choose sans-serif fonts for UI and mobile content to guarantee screen clarity.

  • Avoid too many custom web fonts on one page to prevent slow page loading.

  • Always verify commercial licensing before embedding any font on public websites.

8. Common Typography Mistakes to Avoid

  • Using overly decorative fonts for body text

  • Mixing more than two font families in one layout

  • Too tight or too loose line height

  • Pure black text on white background (harsh for long reading)

  • Uneven letter spacing in headlines

  • Overusing bold, italic, and colors randomly

9. Final Tips for Professional Typography

Good typography is invisible — it makes content smooth and easy to understand. Great typography balances readability, consistency, and aesthetics. Always prioritize user reading experience over fancy visual effects. When in doubt, keep your layout simple, clean, and well-structured.