Posts

Part 3 | The UI Masterclass: Typography Rules That Ship Better Products

Image
Pairing, hierarchy, grids, accessibility, and emotional resonance — everything you need to apply great typography in real product work. Parts One and Two built your foundation and sharpened your technical eye. Part Three is where you use those tools. This section is structured as a practical decision framework — moving from how you choose type, to how you combine it, to how you make it inclusive and emotionally effective.   How to Pair Typefaces: The Rules and the Logic Behind Them Combining typefaces is one of the most common and most feared challenges in typography. Beginners often pair randomly and hope for the best. Professionals follow a set of principles that make the outcome feel inevitable rather than arbitrary. Rule 1: Contrast over Similarity Two typefaces that are nearly alike but not quite the same create discomfort — they're too similar to register as an intentional choice, but not identical enough to be the same. This is called "near-miss" pairing, and it re...

Part 2 | The Science of Letters: What Separates Pros from Amateurs

Image
Anatomy, spacing, families, and optical principles — the technical layer that makes your typography feel right even when readers can't explain why. Part One gave you the vocabulary. Part Two gives you the instruments. The difference between a designer who picked "something nice" and one who made a typographic decision comes down to understanding what's actually happening inside the letterform — and why those details affect everything from legibility to brand perception.   Type Anatomy: Reading What the Letter Is Telling You Every typeface can be dissected. Once you can name the parts, you can diagnose problems, compare options intelligently, and specify changes precisely. Here are the anatomical terms that matter most in practice: Baseline — The Foundation Line The invisible horizontal line that every letter rests on. In UI frameworks like Material Design, the baseline is a critical measurement point — every text element's baseline must sit on the 4dp grid. When b...

Part 1 | The Foundation: Learning to Speak Typography

Image
How type works, why it matters, and the language that will change how you see every design around you. From the app on your phone to the label on your coffee cup, every piece of text you encounter was chosen deliberately. Or it wasn’t. And that difference — the gap between intention and accident — is exactly what defines professional design. Typography is the art and system of arranging type to make written language legible, readable, and visually effective. It’s not decoration; it’s the invisible architecture that holds your entire design together. This first part of our series covers the fundamentals: the core terminology, the distinctions most designers gloss over, and the five classification families every designer should know by heart. Font vs. Typeface: The Distinction That Matters Most designers use these terms interchangeably. And while the world won't end if you do too — knowing the distinction puts you in a different category entirely. It changes how you talk about type w...