Gutenberg v1.2

Gutenberg is an open source project licensed under Creative Commons 3.0. Feel free to use, adapt or contribute.

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.

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'};
}

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.

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; // [ Merriweather / OpenSans / 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.

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.

Gutenberg v1.2

Gutenberg is an open source project licensed under Creative Commons 3.0. Feel free to use, adapt or contribute.

More coming soon

New elements like tables and side comments will be added soon.