Words Need A Typelift

by Vikram Babu
Product Designer and Writer

When Tim Brown first introduced a modular scale for typography in 2011, it seemed like a good compliment to web grid systems. I began using it immediately on projects, starting with a cutting–pasting of type scales. I would repeat this until I found the right visual typographic combination.

absurd.di.register('modularScale', function (msBase, msValue, msRatio){
  for ( var x=0; x<msValue; x++) {
    val[x] = '' + Math.pow(msRatio,x)*msBase; + 'px';
      console.log(val[x])
  }
 });

While attending Gray Area’s Creative Code, I wondered if I could add more feel to exploring typography and vertical rhythm. I choose Absurd.js for it’s css preprocessing library. After a weekend of studying the documentation, coding and designing layouts, Typelift was born. For someone who appreciates preprocessed CSS, I was geeked to render CSS client side with a simple power function. What was once a manual and interruptive process of playing with modular scales became a lot more fluid. The visual responsiveness took a lot of guesswork out of typography exploration.

Words per line

Building font size, line height and font scale into the product seemed intuitive. Aside from aesthetics, what other function does typography serve?

Readability.

Designers typically talk characters per line. But given that comprehension is tied to words, I didn’t think CPL was very meaningful. I’ve even critiqued the word count per line on mobile Medium and how interruptive I found it.

I wrote a simple function to read the number of words on each line and average them out for a paragraph. The counter runs on any interface event or after a screen resize, to give me a sense of readability on various devices.

function wordsPerLine(){
  var wplLine = [],
  wplCounter=1,
  wplLines=0;

  for (i=1; i<wplWords-1; i++){
    var wplCurrent = document.getElementById('wpl'+i),
    wplNext = document.getElementById('wpl'+(i+1));
    if (wplCurrent.offsetTop != wplNext.offsetTop){
      wplLine[wplLines] = wplCounter;
      wplLines++;
      wplCounter = 0;
    };
    wplCounter++;
  };

  for (i=0; i<wplLine.length; i++){
    wplCounter += wplLine[i];
  };
  wplAvg = wplCounter/wplLine.length;
  document.getElementById('adjWordsPerLineVal').innerHTML = (wplAvg).toFixed(2);
};

window.onresize = function(event) {
  wordsPerLine();
};

Quick CSS

This CSS output box let me port the values over to whatever site prototype I was working on.

Looking back, I should have included the settings that generated these values in a CSS comment.

Layout

For the viewport, I chose elements common to an article. The value of well chosen typography scales is especially noticeable on content heavy sites.

I obviously took some inspirations from how Medium looks.

—

I built the Typelift prototype in the summer of 2014, just as Typekit was gaining popularity. I’ve since discovered other similar projects like Type Scale & Grid Lover. Tim Brown also updated Modular Scale to display fonts. I still use Typelift, but there are plenty of good tools to help designers use modular scale in their projects.

Project: Typelift
Tasks: Research, Design & Frontend Development
Tools: AbsurdJS & Pure Framework
Date: Summer 2014

Vikram Babu is a product designer and writer, living in Oakland. He can be found on twitter and sometimes dribbble.