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
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.
Oct 4, 2016
- Fixed minor bugs,
- updated the gruntfile.js
Aug 22, 2016
- Added defaults to the config file
Jun 1, 2016
- Improved box-sizing,
- fixed the import heading bug
May 31, 2016
- Project folder structure restructured and modularized thanks to @marcobiedermann
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.
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.
