Gutenberg: A Meaningful Web Typography Starter Kit

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).

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.

The backbone of your typography.

—The Smashing Magazine

View an Example | Read the Docs

Installation

Gutenberg is built with Sass and Grunt. Fork or download the repository to get started.

npm install gutenberg-web-type

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.

Contributors

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

History

Follow @gutenbergtype for updates.

Gutenberg v1.2.3

Oct 4, 2016

Fixed minor bugs,
updated the gruntfile.js

Gutenberg v1.2.2

Aug 22, 2016

Added defaults to the config file

Gutenberg v1.2.1

Jun 1, 2016

Improved box-sizing,
fixed the import heading bug

Gutenberg v1.2

May 31, 2016

Project folder structure restructured and modularized thanks to @marcobiedermann

Gutenberg v1.1

Jan 20, 2016

Code optimized and simplified by use of mixins,
horizontal rule styling now more flexible with its own configuration,
Attention Grabber — a new element,
quotes — an alternative to blockquotes; can be floated,
added an option for paragraph indenting.

Gutenberg v1.0