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

• @matejlatin
• @marcobiedermann
• @GeorgeStrakhov

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

Jan 20, 2016

• Includes the basic elements: headings, paragraph, figure, blockquote & cite, horizontal rule, code, sub, sup, ul, ol, small,
• Gutenberg reset — based on Normalize,
• headings, body and links colors,
• two default themes & custom theme options,
• mobile first with a breakpoint for desktop screens,
• sizes based on Perfect Fifth modular scale,
• fixImgHeight.js — a small & lightweight script that resizes images so they fit the baseline grid.