Vertical rhythm: the Holy Grail of front-end development
By Olaf Muller, designer at VI Company
Just like a horizontal grid, the vertical grid is used for structure and balance in design. Simply put: a vertical grid is the basis for good typography and harmonious alignment.
View the demo or the Github page.
Grids have been around for quite some time in print. Applying the same technique in the browser is a complicated and time-consuming task. There are a lot of factors and formula’s to which all elements should comply. Our solution is SASS-based and does all the calculations automatically after defining the font size and modular scale for the body text.
Versatile and fully supported cross-browser, our vertical rhythm is a long-awaited step in the direction of better in-browser typography.
“Vertical rhythm is the Holy Grail of front-end development.”
- Someone at VI Company
For the best reading experience, a basic knowledge of the following subjects is required:
- Typography
- (Vertical) grids
- HTML and SASS
- Basic mathematics
So how did we get around creating a stable solution? Like any other design problem, we started with a question: how can we implement a vertical rhythm without too much hassle?
The first step was reading up on typography and all its wonders. We soon realized that starting with the most simple settings was the best way to get the formulas correct. After lots of trial and error, the project was beginning to materialize into a simple solution that focuses on the core of typography: typefaces, font size, line height, leading and modular scales.
The input needed to make the vertical rhythm work is encapsulated in a list of variables that can be easily set by the designer. These variables are run through a mixin that outputs the correct values to align an element to the baseline.
Base typography
The goal of typography is to create balanced, readable and legible text. Good typography depends on many factors, luckily there are calculators that give a good indication of what combinations work best. Because we know designers are going to use the code, we wanted to start things off easy by letting them define the base font size and line height in pixels. These values are automatically converted to rems.
$px-font-size: 16;
$px-line-height: 24;Modular scale
The next step is selecting a modular scale. A modular scale is nothing more than a list of values that share the same relationship. For example: if we apply the golden section (1.618) to a base font size of 16px, the outcome would be:
- Font size xs: 16 * 1.618^-1 = 9.89px
- Font size s (starting point): 16px
- Font size m: 16 * 1.618 = 25.89px
- Font size l: 16 * 1.618² = 41.89px
- Font size xl: 16 * 1.618³ = 67.77px
There are 17 predefined modular scales:
$modular-scale: "golden section"; $modular-scales: (
"minor second": 1.067,
"major second": 1.125,
"minor third": 1.2,
"major third": 1.25,
"perfect fourth": 1.333,
"augmented fourth": 1.414,
"perfect fifth": 1.5,
"minor sixth": 1.6,
"golden section": 1.618,
"major sixth": 1.667,
"minor seventh": 1.778,
"major seventh": 1.875,
"octave": 2,
"major tenth": 2.5,
"major eleventh": 2.667,
"major twelfth": 3,
"double octave": 4
);
Applying the vertical rhythm
Applying the vertical rhythm should be as easy as possible. For this, we’ve predefined 5 font sizes. To apply one of the font sizes to an element, you’ll only need the following code (the mixin does the calculations):
small { @include vertical-rhythm($font-size-xs); }
p { @include vertical-rhythm($font-size-s); }
h3 { @include vertical-rhythm($font-size-m); }
h2 { @include vertical-rhythm($font-size-l); }
h1 { @include vertical-rhythm($font-size-xl); }Alignment
To round it all up, aligning other elements can be done using predefined distance and size variables that are based on the vertical rhythm itself:
div { margin: $distance-s; }
img { height: $size-m; }Conclusion
We think our solution makes the process of creating harmonious typography easier but there’s still a long way to go. When using this vertical rhythm, it is essential that all other elements on the site are aligned as well. We’ve done this by using predefined sizes and distances based on the rhythm of the vertical grid. We have the basics working and are eager to continue improving the vertical rhythm.
Originally published at www.vicompany.nl.
