Typography isn’t just about picking a pretty font, it’s about mastering the tiny details that decide whether your text feels clear, balanced, and memorable.
Every letter has its own anatomy. Every line of text sits on invisible guides. And every adjustment you make, in spacing, weight, or alignment. Changes how people read and feel your words.
Understanding these type properties is what separates good design from professional typography. It’s how you build readability, establish hierarchy, and give your brand a consistent voice.
In this part of the series, we’ll break down the anatomy of type, explore its core properties, and learn how to use them to design with clarity and intention.
What is a Typeface?
A typeface is more than just a set of letters.
It’s a collection of shared patterns, shapes, curves, and proportions, that give a family of letters a unified look.
When you select a typeface for a project, you’re not just picking “letters.”
You’re choosing a visual language, one that impacts style, legibility, and readability across your design.
Core Letterform Anatomy
Every typeface is built on invisible rules. These rules — lines, proportions, and shapes define how letters sit, scale, and interact with one another. Understanding them is essential to creating clean, balanced typography.
Here are the key parts of letterform anatomy every designer should know:
Baseline
The invisible line on which most letters rest.
Example: In the word type, the bottoms of t, y, p, e all sit on the baseline.
In digital design (like Material Design), the baseline is also used as a measurement reference to align text with other UI elements.
Cap Height
The height of flat-topped capital letters (like H or I) measured from the baseline.
Rounded or pointed capitals (like O or A) often extend slightly beyond the cap height for optical balance.
X-height
The height of the lowercase x in a typeface, measured from the baseline.
Determines the visual size of lowercase letters.
Typefaces with larger x-heights are easier to read at small sizes.
Ascender
The vertical stroke on lowercase letters that extends above the x-height.
Example: b, d, h, k, l.
Descender
The downward stroke that falls below the baseline.
Example: g, j, p, q, y.
If line spacing is too tight, ascenders and descenders can collide.
Aperture
The partially enclosed space in letters like c, e, s.
Open apertures → better readability on screens.
Closed apertures → more compact, sometimes harder to read at small sizes.
Stem & Stroke
Stem → The main vertical line of a letter (e.g., the upright in H or l).
Stroke → Any diagonal or curved line (e.g., the diagonal in N or S).
Serif vs. Sans Serif
Serif → Small decorative strokes at the end of a letter’s stem/stroke.
Sans Serif → “Sans” means without — clean, undecorated letterforms.
Type Properties That Influence Readability
Beyond letterform anatomy, the way you set and style type directly affects how easy it is to read and how it feels to your audience. These are the core properties every designer needs to understand and control:
1. Weight
Weight refers to the thickness of a font’s strokes.
Common weights: Light, Regular, Medium, Bold, Black.
Many typefaces have a scale from 100 (Thin) to 900 (Ultra-Black).
Impact: Light weights feel elegant but can be hard to read small, bold weights grab attention but can overwhelm if overused.
2. Size
The overall size of text sets the foundation for hierarchy and accessibility.
Standard web body size: ~16px.
Headings scale up proportionally (e.g., H1 = 48px).
Impact: Too small = strain; too large = visual clutter.
3. Leading (Line Height)
The space between baselines of text.
Good rule: 115%–120% of the font size.
Example: 16px body text → 18–20px line height.
Impact: Too tight → crowded, hard to read. Too loose → text feels disconnected.
4. Kerning
The adjustment of space between individual letters.
Example: Adjusting A V so they visually balance.
Impact: Bad kerning distracts readers and feels unprofessional.
5. Tracking
The uniform spacing applied across all letters in a word or block of text.
Example: Increasing tracking in ALL CAPS makes it more legible.
Impact: Too tight → letters blur together. Too loose → text loses rhythm.
Fine-tuning weight, size, leading, kerning, and tracking can completely change the mood and readability of your design — without changing the typeface itself.
Principles of Typographic Design
Typography isn’t just about choosing the right font — it’s about using it intentionally. These principles help you turn type into design that’s clear, balanced, and meaningful.
1. Alignment
Alignment creates order and rhythm on a page.
Left-aligned → The most natural for long-form text (easy to scan).
Center-aligned → Works well for short quotes or headings, not paragraphs.
Right-aligned → Adds contrast but is harder to read in bulk.
Justified → Clean edges but can create uneven spacing (“rivers”) if not managed.
Rule of thumb: Use alignment to guide the eye smoothly down the page.
2. Color & Contrast
Typography must be legible against its background.
Pair text and background with strong contrast (e.g., black on white, white on navy).
For accessibility, follow WCAG contrast ratios (minimum 4.5:1 for body text).
Use bolder/brighter colors for headings, neutral tones for long paragraphs.
Always test your type in grayscale, if it’s legible without color, it’s accessible.
3. Hierarchy
Hierarchy shows readers what matters most.
Headings (H1, H2, H3) → Big and bold to capture attention.
Body text → Smaller, consistent for readability.
Use size, weight, color, and spacing to create levels of importance.
Example:
H1: 48px → H2: 32px → Body: 16px.
Add white space to separate sections and make scanning easy.
Alignment ensures order, contrast ensures clarity, and hierarchy ensures focus. Together, these principles make your typography not just readable, but powerful.
How to Pick the Right Typeface
Choosing a typeface isn’t about what looks trendy, it’s about what works best for your project, audience, and brand. A strong choice balances style, function, and emotion. Here’s a step-by-step guide:
1. Define Your Project Scope & Goals
What medium is this for - app, website, print, or packaging?
Who’s the audience, and what tone should they feel?
What are your content needs - headlines, menus, long-form text, or data tables?
2. Research Competitors & Industry Norms
Look at how similar brands use typography.
Finance brands → often use serif fonts for trust.
Tech brands → usually sans serif for modern minimalism.
Creative industries → mix scripts or display fonts for uniqueness.
This helps you decide whether to align with norms or break them to stand out.
3. Build a Mood Board
Collect visual inspiration (ads, websites, packaging).
Define the mood you want: bold, elegant, playful, minimal.
Match that mood with typefaces that evoke the same energy.
4. Explore Typeface Options
Use tools like:
Google Fonts → Free, versatile web-safe fonts.
Adobe Fonts → High-quality professional options.
5. Test with Real Content
Never choose a typeface in isolation.
Apply it to your actual text (headlines, body copy, buttons).
Test in different sizes (small labels vs large headings).
Check on multiple screens (desktop, mobile) or print samples.
6. Check Brand Alignment
Ask: Does this typeface reflect our brand personality?
Professional vs playful
Minimal vs decorative
Luxury vs casual
If your brand tone is serious and professional, avoid whimsical or overly stylized fonts — and vice versa.
7. Validate with Colors & Accessibility
Test typefaces against your brand colors.
Black text on white and white text on black → baseline check.
Apply brand palette → test contrast ratios for readability.
When in doubt, choose a versatile family with multiple weights (light, regular, bold), it gives you flexibility to build hierarchy without juggling too many fonts.
Weight & Style
Once you’ve chosen a typeface, how you use it matters just as much. Weight and style can completely shift the tone of your text, from subtle elegance to bold impact.
1. Weight
Weight refers to the thickness of a typeface’s strokes. Most modern families include multiple weights, often ranging from Thin (100) to Black (900) in increments of 100.
Light / Thin → Elegant, airy, but hard to read at small sizes.
Regular (400) → Neutral, best for body text.
Medium (500–600) → Balanced, often used for subheadings.
Bold (700) → Strong, eye-catching, best for emphasis.
Black / Ultra-Bold (800–900) → Loud and powerful, works for big headlines.
Use bold for emphasis sparingly, overusing heavy weights reduces their impact.
2. Style
Styles modify how characters appear without changing their weight.
Italic → Adds emphasis, conveys motion, or distinguishes elements (like quotes or foreign words).
Oblique → Similar to italic but mechanically slanted rather than redrawn.
Condensed / Expanded → Adjusts letter width; condensed fits more text in small spaces, expanded feels more open and luxurious.
3. Case (Letter Case)
Letter case dramatically changes readability and tone:
Sentence case → Natural, easy to read (This is sentence case).
Title Case → Formal, emphasizes importance (This Is Title Case).
ALL CAPS → Strong, urgent, but harder to read in long blocks (THIS IS ALL CAPS).
all lowercase → Casual, modern, sometimes playful (this is lowercase).
Small Caps → Uppercase letterforms scaled to x-height, often used for acronyms or subheadings.
Weight and style are not just technical settings, they’re tools of expression. Use them strategically to balance readability with personality.
Typography is more than picking a font, it’s a system of details that shape clarity, mood, and brand identity.
From the baseline and x-height to weight, style, and size, every property works together to influence how people read and how they feel about your message. Mastering these fundamentals means you’re not just arranging letters, you’re designing communication.
Know the anatomy, it’s the grammar of typography.
Use weight, style, and size intentionally to create hierarchy.
Align type with grids and contrast for legibility and consistency.
Test across mediums, what works in print may not on mobile.
When typography is thoughtful, it disappears.
Readers don’t notice the type, they just feel the message.
