Skip to content

matejlatin/Gutenberg

Repository files navigation

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

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.