Responsive Typography and Vertical Rhythm

What is Gutenberg?

Gutenberg is a flexible and simple-to-use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).

The reader should be able to read the message of a text easily and comfortably. This depends to a not inconsiderable extent on the size of the type, the length of the lines and the leading.
—Josef Mueller–Brockmann

Gutenberg sets the baseline grid to establish a proper vertical rhythm and makes sure all elements fit into it. It sets up the macro typography so you can focus on the micro–typographic details.

Base type & line-height

All calculations in Gutenberg depend on base type size and line-height. Multiplication of these two results in leading which is essential for setting a correct vertical rhythm and a baseline grid.

$base-font-size: 100; // Converts to 16px
$line-height: 1.6;
$leading: $base-font-size * $line-height;

Vertical rhythm and baseline grid

By calculating the leading Gutenberg sets a vertical rhythm by resetting line-height and margins for all elements.

* {
  line-height: $leading;
  margin-bottom: $leading;
}

Correct vertical rhythm results in consistent spacing between elements that helps clarifying the structure and order of the content and link it with other elements. Its ultimate goal is to invite the reader into the text and improve the readability.

Johannes Gutenberg
Johannes Gensfleisch zur Laden zum Gutenberg (c. 1398–1468) was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe.

Correct but flexible

To make Gutenberg more flexible but still correct, half of leading sizes can be used. For example: heading 2 has a default margin-top of 2.5 leading and a line-height of 1.5 leading.

h2 {
  margin-top: #{2.5 * $leading + 'px'};
  line-height: #{1.5 * $leading + 'px'};
}

Heading 2

Modular scale

Typographers have been using scales for centuries. Gutenberg is based on Tim Brown’s Modular Scale to bring meaning and harmony to the typographic style.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Modular Scale Alpha

Modular Scale Beta

Modular Scale Gamma

Modular Scale Delta

Modular Scale Epsilon
Modular Scale Zeta
Modular Scale Eta
Modular Scale Theta
Modular Scale Iota

Mobile first

Gutenberg sets base type size, line-height and calculates the leading for the mobile screens first. The break point is calculated based on maximum (ideal) width of elements. When a screen is wider than that, it resets and recalculates all the sizes so they better fit for desktop screens.

// Base sizes
$base-font-size: 100; // Converts to 16px
$base-font-size-desktop: 112.5; // Converts to 18px
$line-height: 1.625;
$line-height-desktop: 1.8;
$max-width: 35;

Themes & customization

Gutenberg comes with two beautiful predefined themes based on two typefaces provided by Google Fonts: Merriweather and Open Sans.
There is a custom option that allows loading custom typefaces for body text and headings.

$theme: custom; 
$custom-font-body: Merriweather, serif;
$custom-font-headings: "Open Sans", sans-serif;

The Birth of Movable Type

Default theme example
View Example

Humane Typography in the Digital Age

Custom theme example
View Example

Made with Sass

Sass makes it easy to understand and reuse most parts of the code. Line-heights, margins, paddings and font-sizes are all calculated based on base font-size and leading. So there’s a mixin for each that sets its value in both pixels (fallback) and REMs. Below is an example of a mixin that sets the bottom margin to x numbers of leading.

@mixin margin-bottom($number){
  margin-bottom: #{$number * $leading + 'px'};
  margin-bottom: #{$number * $leading-rem + 'rem'};
}

Correct image height

Images and figures are resized so they don’t break the baseline grid. This small and lightweight JavaScript function takes the original height of a figure and calculates a new height which is a multiplication of leading.

Fix image height
Resizing images so they fit in the grid.

Why Gutenberg?

Johannes Gutenberg invented a printing press with movable type more than 500 years ago. His invention led to improved readability of books and enabled a distribution on a large scale. His invention improved a medium and took it to another level. This web typography starter kit aims to do exactly the same for another medium — the web.

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!


Notice: Theme without sidebar.php is deprecated since version 3.0.0 with no alternative available. Please include a sidebar.php template in your theme. in /var/www/2018.codeable.io/wp-includes/functions.php on line 4486