Skip to content
A meaningful web typography starter kit.
Branch: master
Clone or download
matejlatin Merge pull request #75 from wub/patch-1
Remove `position: relative` from `<em>` and `<i>` in accordance with #74
Latest commit 25ba870 Nov 21, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Cleaned up warnings Oct 8, 2016
src Remove `position: relative` from `<em>` and `<i>` Jul 31, 2018
.editorconfig fix indentation Feb 18, 2016
.gitignore Fixed minor bugs and updated gruntfile Oct 4, 2016
.stylelintrc Add postcss linting for SCSS based on Primer Styleling Config Oct 5, 2016
.travis.yml Change to simple npm install in before_script Oct 23, 2017
grid-image.png optimise images Feb 18, 2016
index.html Shortened text in example page May 15, 2016

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.
You can’t perform that action at this time.