Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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


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.


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


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.