

Responsive typography with REMs - loopj
https://bugsnag.com/blog/responsive-typography-with-rems

======
chrisfarms
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
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
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
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
> 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
html { font-size: 1vw; }

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

