Responsive Type Doesn’t Have to Be Complicated

Building a type scale for your website

on Winging It episode 29 with Stacy, Miriam, & James on February 19, 2026 | 60 min

Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern CSS can help us out. There are equations and graphs! But you don’t need anything that complicated to build a type scale for your next site. With the right units, we can get excellent results from a few lines of (readable) code – without relying on third party tools.

Check out our Typography Playlist today.

Subscribe to Channel »

What We Cover:

My base rule is that we want to avoid unit conversions
- If we’re talking about pixels, use pixels
- If we’re talking about relative sizes, use relative units
How do we work with the user default font size? [12:05]
- How it’s often been done: a multiple of the user’s size, calculated
- My approach: Just say the size I want, but clamped by the user
How will the font respond to viewport sizes? [19:00]
- Big ol’ warning about zoom and viewports
  - We don’t know if it’s a small screen or a zoomed screen
  - See how zoom becomes less effective as we add responsiveness [21:53]
- Rules:
  - Never change the font size more than 2.5x based on the window [31:00]
  - Fluid type always starts with a base size
- If you know the breakpoints, set the breakpoints, it’s easier
- For a fluid approach, don’t worry about the exact breakpoints
How do we generate a ‘scale’ of relative font-sizes?
- Using the pow() function!
How do our scales scale?! Making the scale itself responsive
- Using a breakpoint is the easiest option
Bonus material:
- Spacing relative to both the screen and text

Recent Episodes

Winging It post type

Quick & Easy UI Wins (for real)

Hidden gems of UI development

on Winging It episode 30 with Stacy, Miriam, & James on Mar 19 | 49 min

Join Stacy, James, and Miriam as we explore some hidden gems of UI development – from @starting-style for smoother entry transitions to performance boosts with AVIF images and using the browser’s built-in lazy-loading. We cover a variety of quick wins that you can use to make your life easier and…

see all Winging It posts
Winging It post type

CSS Scope & Mixins

A chat with Chris Coyier

on Winging It episode 28 with Stacy & Miriam on Jan 22 | 60 min

At the end of 2025, Firefox added the CSS @scope rule – making the new feature available across all major browsers! Since Chris Coyier has done a fair amount of writing and speaking on the topic, we wanted to talk with him about what that means. Chris has also been…

see all Winging It posts
Winging It post type

CSS IS AWESOME Game 2

With special guests Adam Argyle, Cassondra Roberts, and Dave Rupert

on Winging It episode 27 with Miriam & Stacy on Dec 18 | 81 mins

The second annual CSS is Awesome Game was a heated battle between a few of our favorite CSS professionals including Adam Argyle, Cassondra Roberts, Dave Rupert, and Miriam Suzanne. If you love CSS as much as we do, we hope you will play along and enjoy the challenge.

see all Winging It posts