How to Create Fluid Typographic Scales for Your Responsive Website

In this video you’ll learn how to define the typography sizing for your responsive website using fluid typographic scales.

Fluid Typography?

Let’s say you’ve chosen fonts for your new web design and now you need to work out the size of the various typographic elements. What size should the headings be? How big should the body text be, and on which size screens? Should you just eyeball it, or is there a standard process?

Happily, there is such a process, and that’s by designing a typographic scale (in the case of this tutorial fluid typographic scales, because we’re talking about responsive typography). Check out the video below to learn all about designing your own and achieving perfect web typography.

CSS Fan? Check Out These Videos!

If we haven’t met before my name’s Adi and I’m a web designer. It’s my goal with these videos to help you become a better web designer and developer!

• 
  CSS
  Exploring Creative CSS Hover Effects for Inline Links
  Adi Purdila

• 
  CSS Grid Layout
  CSS Grid vs. Flexbox: Which Should You Use and When?
  Anna Monus

• 
  CSS
  Quick tip: How to Make Elements Resizable with CSS Resize
  Adi Purdila

• 
  CSS
  Better Focus Styles with CSS Pseudo-Class :focus-visible
  Adi Purdila

Resources

• Type Scale Basics
• Fluid Type Scales
• Creating a Figma Design System: Typography, Spacing, and Sizing
• A Beginner’s Guide to Using Typographic Scales
• Precise control over responsive typography – MadeByMike
• Type Scale – A Visual Calculator
• Tim Brown: Molten leading (or, fluid line-height)