Type Scaling

over 3 years ago from , Freelance Designer

Curious to know how you guys handle scaling type based on viewport size. I've been building more websites in Webflow lately and find myself running into this issue often, where I have to set a different pixel size for each heading on each breakpoint. It gets out of hand pretty quickly.

I've also noticed that when I inspect a website to understand their type scaling system, a lot of heading sizes are seemingly random numbers (e.g. 72.2180) and scale with the viewport width, as if they are set at a % of the width or something? Can't figure out the math behind this though.

I'd love to understand more about this subject if anyone has some good insights :)


  • Jordan Maslyn, over 3 years ago

    I think CSS Locks are my favorite way of scaling type. It allows you to have a minimum size and a maximum size and then scale gradually in between. You can check out the theory here: https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/

    4 points
  • Kemie GuaidaKemie Guaida, over 3 years ago

    I usually set sizes for headings, etc in ems, and then set body size for each breakpoint. So for example I have: h1=3em h2=2em h3=1.5 em

    desktop body size is 16px, so at desktop sizes: h1= 48px h2=32px h3=24px

    mobile body size is 12px so at mobile sizes: h1=36px h2=24px h3=18px

    So by just changing one value everything changes proportionally

    2 points
  • Chris Howard, over 3 years ago

    You can use calc. I've been experimenting a bit with it lately. Here's an example:

    h1 { font-size:calc(48px + 6 * ((100vw - 320px) / 1920)); line-height:calc(48px + 24 * ((100vw - 320px) / 1920)); }

    It does take some mucking around to find numbers that work for you across all devices.

    1 point