Condensed font family switching/setting for smaller viewports

Until we have true variable open sourced mono spaced fonts and the spec that goes with it I think it would be nice if we have along with setting the font family and size, there could be a condensed font family setting for smaller viewports.

It is a bit related to: https://github.com/zeit/hyper/issues/175

This gives a source for some good options for condensed fonts: http://graphicdesign.stackexchange.com/questions/28456/a-good-monospace-condensed-and-open-source-typeface

This can currently be done with:

     termCSS: '
      @media (max-width: 600px) {
        x-row {
          font-family: 'm+ 1m';
        }
      }
    `,

Start by tracing the existing font-family and font-size settings, then review how termCSS and x-row apply media-query styling. Define how a separate condensed family setting should be exposed and applied for smaller viewports, while preserving the current termCSS approach. Done means the setting works at the requested viewport size and does not alter larger viewports.