Responsive typography with REMs | Hacker News Reader

Responsive typography with REMs

bugsnag.com

15 pointsloopj6 comments

I find there is often a need for a relative inverse relationship between screen width and the size of an element.

The most obvious of which is buttons. As screen width decreases the probability of the user being on a touch device increases, and you tend to want relatively larger fat-finger-friendly buttons at smaller screen sizes.

I guess calc() with rem sizing could work well here. But calc() always feels like cheating to me.

There's no law against big buttons on big screens, you know. Doing things big may go against the grain (the typical desktop convention is to squeeze as much stuff in as possible), but it very frequently ends up with surprisingly pleasant results. Also Fitt's Law comes into play—big button, bigger target to aim for.

All those media queries!

  500px ⇒ 14px
  570px ⇒ 15px
  620px ⇒ 16px
  680px ⇒ 17px
  720px ⇒ 18px
  800px ⇒ 19px
  860px ⇒ 20px
  920px ⇒ 21px
  1000px ⇒ 22px

This can be simplified a lot with the vw unit. 1vw = 1% of viewport width.

The differences between each pixel increase in font size seem rather arbitrary: 70, 50, 60, 60, 80, 60, 60, 80. Let's simplify it, going for 14px below 500px, 22px above 1000px, and linear interpolation between widths 500px and 1000px. That way you can just use calc(). Oh, and I'll use `:root` instead of `html`, for joie de vivre.

  :root {
      font-size: calc(6px + 1.6vw);
  }
  @media screen and (max-width: 500px) {
      :root {
          font-size: 14px;
      }
  }
  @media screen and (min-width: 1000px) {
      :root {
          font-size: 22px;
      }
  }

If a browser doesn't support calc() or the vw unit, it will just keep the browser's default of 16px.

The idea of using calc and VW units to linearly increase the font size is pretty cool. On real sites, though, it's important to keep control over exactly when the increases in scale are triggered. I'll set up some breakpoints just for the root font-size shifts, and have other breakpoints coordinated with additional layout changes I make within a design. The scaling and breakpoint settings tend to be unique between designs and non-linear.

I'm going to follow up to this post soon with a SASS mixin that gets around the @media query code bloat and lets you coordinate with globally named breakpoints.

> On real sites, though, it's important to keep control over exactly when the increases in scale are triggered.

I flatly disagree with this. It is typical for some significant alterations of layout to take place somewhere in scaling it down, but that is not incompatible with something like this. It is entirely feasible to have most of your responsive design using a technique like this but at a certain point change the layout; also, the font-size need not be a globally continuous function; it's entirely reasonable to have local discontinuities where you adjust the m or c of font-size = m x + c for a range of widths.

html { font-size: 1vw; }

p { width: 70rem; font-size: 1.6rem; }

Reply on news.ycombinator.com