If you picked up this month’s copy of Web Designer Magazine, or took a stroll through their blog, you might have caught my little tutorial on a Mobile-First Approach to Fluid Typography and Layouts.

If not, no worries. Let’s explore the concept in a tad more detail right here on the Pigeon Wisdom blog.

We Broke the Web

First off, it’s important to realize that the web is a natively responsive medium all on it’s own. Think back to all those full width sites of yore. We broke this inherent fluidity by imposing fixed measurement units (pixels). By ditching pixels in favor of relative sizing units (ems, rems, percentages, and now/soon viewports), we can establish a much more meaningful relationship between layouts and typography. This approach enables global and proportional control over your entire site via a single font-size deceleration on the body tag.

1. Establish Typographic Scale

Set up your typographic scale and vertical rhythm. While there’s plenty of sass fuctions/mixins to assist with this, Grid Lover is a great tool that calculates modular scale of your headers from common ratios. For example, if you go with the historic golden ratio (1:1.618), your headers would look something like below.

/*-----------------------------------   
--Typography Mixins
------------------------------------  */
@mixin font-h1 {
  font-size: 4.238095238em;
  line-height: 1.213483146em;
  margin-top: 0.80898876em;
  margin-bottom: 0.40449438em;
}
@mixin font-h2 {
  font-size: 2.619047619em;
  line-height: 1.30909091em;
  margin-top: 1.30909091em;
  margin-bottom: 0.65454546em;
}
@mixin font-h3 {
  font-size: 1.619047619em;
  line-height: 1.058823529em;
  margin-top: 1.05882353em;
  margin-bottom: 1.05882353em;
}
@mixin font-h4 {
  font-size: 1em;
  line-height: 1.714285714em;
  margin-top: 1.71428571em;
  margin-bottom: 1.71428571em;
}

/*------------------------------------   
--Typography Styles
--------------------------------------  */
h1, .font-h1 {
  @include font-h1;
}
h2, .font-h2{
  @include font-h2;
}
h3, .font-h3 {
  @include font-h3;
}
h4, .font-h4 {
  @include font-h4;
}

p, ul, ol, pre, table, blockquote {
  margin-top: 1.71428571em;
  margin-bottom: 1.71428571em;
}

I’m using mixins for greater flexibility and consistency. It might seem like overkill, but this technique allows you to easily apply the global sizings to any type element – bridging the gap between symantic structure and presentation. Sidebar – you don’t have to be so precise. Font families can vary widely in their rendering, so don’t be afraid to round off and make some tweaks. I’ve yet to uncover a perfect baseline system, so if you have one – shout out.

2. Keep Layouts Fluid

Ensure that layout elements are using percentage and relative sizing. This includes your grid system, container width, margins, paddings, and media queries. Speaking of Media Queries, stay away from the mobile, tablet and desktop breaks of yesteryear. Instead, let content determine the breakpoints and use as many as needed to create a fluid experience. For consistency and tracking, rely on SCSS variables to define the breaks, with something like:

/*-----------------------------------   
--MQ Vars
-------------------------------------  */
$mq-xsmall: 22em;
$mq-small: 32em;
$mq-med: 54em;
$mq-large: 65em;
$mq-xlarge: 91em;
$mq-xxlarge: 115em;
$mq-xxxlarge: 132em;

If you rock MQs directly on their effected elements (aka, media query bubbling), variables will make life so much easier. And believe me, you wanna bubble.

3. Body Font-Size and Em-based Media Queries

Now, for the body, set font-size to 100% at mobile. Leave p (paragraph) tags alone, as they’ll inherit sizing from the body. In the past, a common approach was to set the body to 62.5% to baseline ems to 10px. But in a proportional setup, pixel to em equation is not relevant. So, as you move up from mobile/100%, incrementally increase the body’s font-size over a series of min-width, em-based breakpoints (using the MQ variables we set up from the last step).

/*-----------------------------------  
--Fluid body sizing
-------------------------------------  */
body {
font-size: 100%;
  
  @media (min-width: $mq-small) {
    font-size: 110%
  }
  @media (min-width: $mq-med) {
    font-size: 120%
  }
  @media (min-width: $mq-large) {
    font-size: 130%
  }
  @media (min-width: $mq-xlarge) {
    font-size: 150%
  }
  @media (min-width: $mq-xxlarge) {
    font-size: 160%
  }
  @media (min-width: $mq-xxxlarge) {
    font-size: 180%
  }
}

From a single declaration we can now globally and proportionally increase the entire site – typography and all, while sustaining the modular ratio. Since browser width and typography are also linked, modify your container’s max-width to maintain the characters per line for best readability – generally accepted as 45 – 75 or 40 – 50. As a fan of big ass type, I lean towards the later.

/*-----------------------------------   
--Container/Row Class
-------------------------------------  */
.row{  
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  
  @media (min-width: $mq-small) {
    max-width: 85%;
  }
  @media (min-width: $mq-med) {
    max-width: 75%;
  }
  @media (min-width: $mq-large) { 	
    max-width: 70%
  }
  @media (min-width: $mq-xlarge) {
    max-width: 60%
  }
  @media (min-width: $mq-xxlarge) {
    max-width: 50%
  }
  @media (min-width: $mq-xxlarge) {
    max-width: 45%
  }
}

How About A Demo

You got it. Here’s a Demo
Resize your browser to see the fluidity.

I also put the demo on github Right Here

What’s Next?

Viewport relative sizing (vh, vw, vmin, vmax) represents a game changer for responsive design, and especially typography. Once full support arrives (sorry IE9), sizing units truly relative to the viewport will make proportional systems a snap. Did a little post about this some time back in my freelance days, perhaps it’s time for an update?