4

Type Scaling

9 months 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 :)

5 comments

  • Jordan Maslyn, 8 months 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
    • S B, 8 months ago

      That's fascinating, I'll have to give that a shot.

      1 point
  • Kemie GuaidaKemie Guaida, 8 months 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

    3 points
    • Ed P, 8 months ago

      Yep +1 to this. Also works for paddings and margins. By using the base font as the root value and changing that value based on desktop or mobile the design adjusts without having to code for breakpoints. Also CSS grids helps

      0 points
  • Chris Howard, 8 months 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