Pairing fonts the EASY way

Learn UI Design
29 Apr 202615:10

Summary

TLDRUX/UI designer Eric Kennedy breaks down the art of great font pairing into a practical five-step framework that transforms typography from guesswork into a repeatable design process. Using real examples and a fictional Egyptology website, he explains how designers should first define brand personality through specific adjectives, then choose fonts that subtly reflect those traits without becoming clichéd or overwhelming. He explores how to identify legible body fonts, pair contrasting typefaces that express different aspects of a brand, and create clear rules for font usage across a design system. Throughout the lesson, Kennedy reveals the hidden instincts professional designers use to make typography feel polished, intentional, and visually compelling.

Takeaways

  • 😀 Define your brand adjectives before selecting fonts to ensure a clear design direction.
  • 😀 Get specific with brand adjectives; the more granular you are, the better you can match fonts to your brand.
  • 😀 There are five main brand types: clean & simple, fancy/classy, friendly/casual, quirky/design-forward, and techy/science-based.
  • 😀 Font choices should subtly align with your brand’s adjectives but avoid being too on-the-nose (e.g., avoid fonts like Papyrus for scholarly work).
  • 😀 Use the 'Good Fonts Table' as a resource to explore a variety of free and cheap fonts that fit your brand.
  • 😀 When narrowing down font choices, focus on legibility, especially for body text. Look for descriptors like 'text', 'body', or 'workhorse' in font descriptions.
  • 😀 When choosing body fonts, ensure they’re legible at small sizes and don't overwhelm the user with excessive decoration.
  • 😀 Header fonts should convey a different aspect of your brand compared to body fonts. This contrast helps create a coherent and dynamic design.
  • 😀 Don’t just rely on the common advice to pair a serif with a sans-serif; experiment with pairing two sans-serif fonts if they convey different brand aspects.
  • 😀 Clearly define rules for font usage across your design to ensure consistency, especially when multiple fonts are used on a single page.

Q & A

  • What is the first step in creating a top-notch font pairing according to the video?

    -The first step is to specify how you want your brand to be perceived, using adjectives to describe the brand's personality, tone, and vibe.

  • Why does Eric Kennedy suggest using granular adjectives for brand perception?

    -Being specific with adjectives provides more precise guidance for matching fonts to the brand’s identity, making the design feel intentional rather than random.

  • What are the five major brand categories in Kennedy's '80/20 hack' for UI design?

    -1) Clean and simple/modern minimalist, 2) Fancy/classy or luxurious, 3) Friendly/informal/casual, 4) Quirky/design-forward/offbeat, 5) Techy/sciency/futuristic/authoritative.

  • What common mistake do designers make when choosing a font for a brand?

    -Designers either pick a font that doesn't convey the brand's personality or pick one that is over-the-top, which can feel inappropriate or distracting.

  • Why is Papyrus considered a bad choice for most UI projects about ancient Egypt?

    -Papyrus is overly strong and flashy, making it feel exaggerated and inappropriate for subtle or scholarly designs—it’s often used in contexts unrelated to ancient Egypt.

  • What is the purpose of the 'good fonts table' mentioned in the video?

    -It’s a curated resource with over 100 fonts organized by category, including brand notes and samples, used to find fonts that subtly convey desired brand attributes.

  • How should body fonts be chosen differently than header fonts?

    -Body fonts must match the brand but also be highly legible at small sizes, often signaled by descriptors like 'text,' 'workhorse,' or 'book-length reading.'

  • Why does Kennedy recommend pairing fonts that convey different aspects of a brand?

    -Pairing fonts that express different facets of the brand creates visual contrast and interest, preventing the design from feeling monotonous or unclear.

  • What is the common heuristic for font pairing, and why is it not a strict rule?

    -The common heuristic is to pair a serif with a sans-serif font to avoid similar messages from both fonts. It’s a guideline, not a rule, because fonts of the same type can work if they convey distinct brand facets.

  • What role do usage rules play in font pairing?

    -Usage rules define where and how each font is applied, preventing designs from feeling messy or inconsistent, especially when multiple fonts are used on a page.

  • How does Kennedy evaluate the final font pairing choice for his Egyptology site example?

    -He compares options in context, considering formality, legibility, and subtle brand communication, ultimately selecting Minion Pro for the body and Scala Sans for headers as the most coherent combination.

  • What additional resources does Kennedy mention for learning more about typography and font pairing?

    -He references the 35-hour Learn UI Design video course with a typography unit and his free newsletter, Design Hacks, which provides practical design tips.

Outlines

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Mindmap

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Keywords

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Highlights

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Transcripts

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora
Rate This

5.0 / 5 (0 votes)

Etiquetas Relacionadas
Font PairingUI DesignUX DesignTypography TipsDesign ProcessBrand IdentityLegibilityHeader FontsBody FontsDesign ConsistencyWeb Design
¿Necesitas un resumen en inglés?