Typography Design Checklist

Typography isn't just about choosing a pretty font—it's the art of organizing text to make written language legible, readable, and visually appealing. Typography is about communication, connection, and care. By following both the design checklist and business checklist, you’ll create typography that doesn’t just look good, but works well—legally, functionally, and emotionally.

✅ 1. Match Typography Design Choice with Target Audience Preference

Why it matters: The font you choose communicates a tone—formal, fun, modern, traditional, technical, etc. That tone must resonate with your audience.

Best Practices:

• Kids & Teens: Use friendly, rounded fonts like Comic Neue or Quicksand. Avoid overly complex serif fonts.

• Corporate/Professional: Go for clean and modern typefaces like Roboto, Helvetica Neue, or Lato.

• Luxury or Editorial: Use elegant serifs like Playfair Display, Bodoni, or Georgia.

• Tech-savvy Users: Sans-serifs with geometric structures like Inter, SF Pro, or IBM Plex Sans work well.

Pro Tip: Test your typography choices with your audience. A quick A/B test or survey can go a long way.

✅ 2. Font Size and Visual Hierarchy (3–4 Sizes Max per Section)

Why it matters: Size communicates importance. A clear hierarchy ensures readers know where to start and how to navigate the content.

Best Practices:

• Use 3–4 sizes per section: e.g., Title, Subtitle, Body, Caption.

• Example sizes for web:

  • Heading 1: 32–48px

  • Heading 2: 24–32px

  • Body Text: 16–18px

  • Caption/Labels: 12–14px

• Avoid using large jumps (e.g., going from 14px body to 40px subhead without intermediate steps).

Pro Tip: Use modular scales to determine harmonious font sizes (e.g., 1.25x or 1.333x scaling systems).

✅ 3. Font Weight and Opacity

Why it matters: Weight and opacity control contrast, emphasis, and visual rhythm.

Best Practices:

• Use bold weights (600–800) sparingly—for titles, headers, or emphasis.

• Use light weights (300–400) for long paragraphs or secondary info.

• Use opacity adjustments to de-emphasize supporting text (e.g., 80% opacity for timestamps).

• Never use opacity to fake contrast if the text must remain legible.

Pro Tip: Use semantic styling (e.g., <strong> tags for bolding) for accessibility and screen readers.

✅ 4. Text Alignment

Why it matters: Alignment influences how eyes scan a block of text.

Best Practices:

• Left-align for almost everything (especially body text)—it’s natural and easiest to read in left-to-right languages.

• Center-align only for short headlines, quotes, or invitations.

• Avoid justified text on web unless you manage spacing manually—it often causes awkward gaps and rivers of white space.

• Right-align rarely, unless designing a bilingual layout or creating emphasis for a specific callout.

Pro Tip: For mobile devices, always test alignment across screen sizes—centered text can feel "floaty" on small screens.

✅ 5. Spacing (Letter, Word, and Paragraph)

Why it matters: Good spacing helps avoid visual clutter and fatigue.

Best Practices:

• Letter-spacing (tracking):

  • Increase slightly for uppercase text.

  • Decrease slightly for large headers to tighten the feel.

• Word-spacing: Default is usually best. Avoid manually adjusting unless you’re setting logos or posters.

• Paragraph spacing: Maintain a vertical rhythm. Use 1.5x line height and consistent spacing between blocks.

Pro Tip: Use a baseline grid to maintain vertical consistency in designs with multiple text blocks.

✅ 6. Line Length (Characters per Line)

Why it matters: If lines are too long, readers get lost. Too short, and reading becomes choppy.

Best Practices:

• Ideal line length is 50–75 characters for desktop, 35–50 for mobile.

• In pixels: aim for 500–700px wide text containers on desktop.

• Adjust margins and padding to keep this range consistent across devices.

Pro Tip: Combine optimal line length with line-height (1.5x) for best readability.

✅ 7. Use Only One Font Family per Page (Or Two, Max)

Why it matters: Too many fonts can look chaotic and unprofessional.

Best Practices:

• Stick to one well-crafted typeface that offers multiple styles (e.g., bold, italic, light).

• If needed, use a second font for contrast (e.g., pairing a serif header with sans-serif body).

• Common pairings:

  • Merriweather (serif) + Open Sans (sans-serif)

  • Montserrat + Lora

  • Roboto Slab + Roboto

Pro Tip: When using two fonts, make sure their x-heights and visual textures complement each other.

✅ 8. Prioritize Readability Over Everything Else

Why it matters: If people can’t read it, they won’t engage with it—no matter how “stylish” it looks.

Best Practices:

• Use high contrast (black on white or dark on light background).

• Avoid ornate or decorative fonts for body copy.

• Ensure accessibility: WCAG recommends a minimum contrast ratio of 4.5:1 for body text.

• Use sufficient font size on all devices—minimum 16px for body text on web.

Pro Tip: Test your typography with tools like WebAIM's Contrast Checker and always preview your design on real devices.

✅ 9. Consistency Across the Board

• Use a typographic scale and stick to it.

• Define and document rules for headers, subheaders, body, captions, buttons, etc.

• Create reusable text styles in design tools like Figma or Adobe XD.

✅ 10. Responsive Typography

• Use relative units like em, rem, %, or vw instead of fixed px values.

• Leverage CSS clamp() to scale typography smoothly across screen sizes.

• Define media queries to adjust line height, font size, or spacing for mobile.

✅ 11. Accessibility & Language Support

• Use fonts that support multiple languages and character sets.

• Avoid overly thin fonts—they reduce legibility, especially for users with low vision.

• Ensure proper semantic structure: use correct HTML tags like <h1> to <h6>, <p>, and <label>.

✅ 12. Visual Rhythm and Flow

• Use consistent spacing between sections to guide the eye.

• Create typographic contrast using size, weight, color—not too many flashy elements.

• Break content into digestible sections (e.g., use lists, callouts, quotes).

✅ 13. Tone and Branding Alignment

• Your typography should feel like an extension of your brand personality.

• Is your brand fun? Use rounded and bubbly fonts.

• Is it innovative? Use minimal, geometric sans-serifs.

• Is it traditional? Consider timeless serifs and classic scales.

✅ 14. Verify Commercial Licensing

Why it matters: Just because a font is free doesn’t mean it’s free for commercial use.

Best Practices:

• Check font licenses on platforms like Google Fonts, Adobe Fonts, or the foundry’s website.

• Avoid using personal-use-only fonts in client work, websites, or monetized content.

• For high-traffic or product-based usage (e.g., app interfaces, merchandise, brand assets), verify extended license requirements.

Pro Tip: Keep a folder or spreadsheet documenting each font’s license and source for legal peace of mind.

✅ 15. Embed Licensing in Client Deliverables

Why it matters: If your client distributes or edits your design files (e.g., PowerPoint templates, PDFs), the embedded fonts may trigger license issues.

Best Practices:

• Use fonts that are licensed for embedding (desktop + web + app use, if needed).

• Include font details and usage permissions in your project handoff documentation.

• For PDFs or printed materials, consider converting text to outlines to preserve appearance and avoid font issues.

✅ 16. Use Web-Safe or Web-Licensed Fonts for Online Projects

Why it matters: Not all fonts render the same on every browser or device.

Best Practices:

• Stick with web-safe fonts (e.g., Arial, Georgia, Times New Roman) or web-licensed fonts via services like Google Fonts or Adobe Fonts.

• Self-host fonts only if you have the correct license and font files (e.g., .woff, .woff2).

• Always include fallback fonts in your CSS stack to maintain graceful degradation.

✅ 17. Align Typography with Brand Guidelines

Why it matters: Inconsistent typography weakens brand identity and confuses customers.

Best Practices:

• If working with a company or client, ask for their brand guide before choosing fonts.

• Ensure headings, body text, buttons, and captions follow the brand’s defined typography rules.

• If you're creating a new brand, establish a typographic system with naming conventions (e.g., Heading XL, Subhead M, Body Regular) and document it.

✅ 18. Accessibility Compliance (Legal and Ethical)

Why it matters: Accessibility is not just a best practice—it’s a legal requirement in many countries.

Best Practices:

• Follow WCAG (Web Content Accessibility Guidelines).

• Use readable fonts (no cursive, overly decorative, or low-contrast combinations).

• Ensure minimum font sizes and contrast ratios meet accessibility standards.

• Use semantic HTML and ARIA labels where needed for assistive tech support.

Pro Tip: Use free tools like WAVE or axe Accessibility Checker to audit your typography’s accessibility.