RhythmMeister

Introduction

Print has solved typography problems ages ago. Things like the baseline and kerning are industry standards, the web however evolving from hypertext does not use these standards.

The main problem lies in the use of line-height instead of a base-line. RhythmMeister provides a css extension so you can use base-line instead of line-height.

It provides this via a clever trick. It sets the line-height to the selected rows and than it adds a little padding to the top and the bottom.

Rhy
Baseline (print)
Line-height (web)

Installation via npm

You can install RhythmMeister via npm.
npm install rhythmmeister --save-dev

rhythmmeister.json

You need to create a file that holds your font presets. This is what you need to inject in the postCSS plugin. An example about configuring postCSS is about to follow but first things first.

For the grid we need to have a row size defined by document-row-size.

Next come all the font presets you want to use.

All the css properties you add to a font preset will be copied where you use it. It has two special properties: rows and base-line-percentage.

Rows is used for the number of rows a text line may span vertically. It sets the line-height.

Base-line-percentage is used for putting the text on the grid. You have to figure this out manually. The system is clever enough that you only have to do this only once per font weight and font face combination.

Try it out, it will change this site!

{
    "document-row-size": "8px",
    "presets": {
        "s": {
            "rows": 3,
            "base-line-percentage": 0.81,
            "font-family": "'Open Sans', serif",
            "font-weight": 400,
            "font-size": "16px",
            "font-style": "normal"
        },
        "m": {
            "rows": 3,
            "base-line-percentage": 0.81,
            "font-family": "'Open Sans', serif",
            "font-weight": 400,
            "font-size": "18px",
            "font-style": "normal"
        },
        "l": {
            "rows": 5,
            "base-line-percentage": 0.87,
            "font-family": "'Open Sans', serif",
            "font-weight": 400,
            "font-size": "28px",
            "letter-spacing": "-.2px",
            "font-style": "normal"
        },
        "xl": {
            "rows": 12,
            "base-line-percentage": 0.875,
            "font-family": "'Open Sans', serif",
            "font-weight": 600,
            "font-size": "74px",
            "letter-spacing": ".4px",
            "font-style": "normal"
        },
        "xxxl": {
            "rows": 12,
            "base-line-percentage": 0.73,
            "font-family": "'Open Sans', serif",
            "font-weight": 600,
            "font-size": "154px",
            "letter-spacing": ".4px",
            "font-style": "normal"
        }
    }
}

Initialisation

RhythmMeister is a postCSS plugin. With a small trick we make it possible to reload the rhythmmeister.json file on each change.

This is nice for getting the right base-line-percentage for font presets.

Gulpfile.js


var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var rhythmmeister = require('rhythmmeister');
var path = require('path');

gulp.task('css', function () {
    var fontPresets = rhythmmeister.load(
        path.resolve('./app/rhythmmeister')
    );

    var processors = [
        rhythmmeister.processor(fontPresets),
        autoprefixer({browsers: ['last 1 version']})
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

vertical-rhythm-grid

You can use this to visualize the baseline grid. See our javascript.

You can press CTRL + \ to see it work.

vertical-rhythm-grid:
#000000 #ffffff #bbb #ffffff 1px 4;

First parameter is the first color of the primary stripes. Second parameter is the second color of the primary stripes. Third parameter is the first color of the secondary stripes. Fourth parameter is the second color of the secondary stripes. Fifth parameter is the width of the color parts. Sixth parameter is how many secondary stripes are drawn before starting over.

The css for the grid helper


html {
  &:before {
    vertical-rhythm-grid: #000000 #ffffff #bbb #ffffff 1px 4;
    opacity: 0;
    z-index: 100;
    position: absolute;
    content: '';
    top: 0;
    min-height: 100vh;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity .4s ease-in-out;
    pointer-events: none;
    height: 100%;
    width: 100%;
  }
}

html {
  &.has-visible-vertical-rhythm-grid {
    &:before {
      opacity: .7;
    }
  }
}
              

vertical-rhythm()

This is the main function of RhythmMeister, you need to use this for setting padding and margins on font objects (h1, h2, span, p, etc). The reason all these inputs need to be in one function is because we use the padding for our trick and maybe you still want to use it for adding extra rows than we need to add the rows to the small padding.

The first for four parameters are unitless. You just need to supply a number. The font variant needs to be a key out of the $font-presets variable. The last two are fixes to substract the border of the margin. You just need to supply the pixels to it.