Revisit responsive typography

[ghost]

This theme does a great job at managing responsive font sizes. But I noticed there's a need for another breakpoint for larger viewports. To get a feel for what I mean on OS X open System Preferences and access Displays, and scale for More Space as shown here:

Here's an example of what the theme looks like with the More Space setting on a Retina display with a full-screen browser window:

As you can see things are a bit eye-straining. As a result, next time responsive typography is revisited please consider adjusting based on the guidance here:

https://ia.net/know-how/responsive-typography-the-basics
https://ia.net/know-how/100e2r

And take a peek at how iA looks at the More Space setting:

Cheers!

[mmistakes]

This one is actually pretty easy to fix. I purposely set type in relative units like ems and rems to globally scale font-sizes and white space up/down.

Inside of _reset.scss there's this line that bumps up the base font size from the default of 16px to 18px. Could easily add another breakpoint to go to 20px for larger screens.

I'm not at my iMac currently, but if you wanted to test this minor change and see if it improves things that would be cool.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

+  @include breakpoint($large) {
+    font-size: 20px;
+  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

If type goes to large too quick might work better on $x-large instead.