Responsive typography with REMs

Responsive typography with REMs(bugsnag.com)

15 points by loopj 12 years ago | 6 comments

chrisfarms 12 years ago |

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.

chrismorgan 12 years ago | |

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.

chrismorgan 12 years ago |

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.

max_luster 12 years ago | |

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.

chrismorgan 12 years ago | | |

> 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.

MRSallee 12 years ago |

html { font-size: 1vw; }

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

: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; } }