Review of Gutenberg

Web typography is hard. Good typography is a hard-learned skill and when it’s applied to responsive design and the ever-changing web, it’s no wonder that so many websites are difficult to read.

I’ve wanted to improve my typography skills for a while now. I’ve been making an effort to focus on fonts and spacing in all of my client projects. So when I came across Gutenberg, I was very excited.

Gutenberg is a little pet project of Trevor Phillippi which allows you to play with type settings and see how they affect readability and overall attractiveness of a body of text.

screenshot of gutenberg.io

What it Does Well

The first thing you’ll notice about Gutenberg is its minimalism. The design matches its purpose: the focus on typography. Because of this, you can quickly style the type the way you want without distraction.

Other nice features include:

  • Adding & removing properties
  • Showing live CSS code
  • Quickly copying the CSS to your clipboard
  • Entering your own text or using a text generator

How it Could Be Improved

Unfortunately, there are a number of things lacking with this web app. Most issues boil down to a lack of polish, nothing an hour or two of tweaking couldn’t fix.

The primary fault of Gutenberg is lack of fonts. There are only five to choose from, but if you’re not on Mac, only one works: Times New Roman. Being able to manually enter a font that I know I have installed would be a step up. Ideally, I’d love to be able to select from a larger list and even pick from Google Web Fonts‘ massive list of free fonts.

The secondary issue is its inconsistency of controls. I tested it in Chrome and Firefox. Some controls didn’t work in Firefox (a problem with so many pet projects), but other controls didn’t work anywhere.

To get columns working, you’ll need to be using Chrome. This is due to the use of -webkit prefixed CSS, with no -moz or even standard column properties. Okay, simple enough. But controls like drop cap and page color (both I was really looking forward to testing) simply do not work in any browser.

Other places for improvement:

  • Strange leading blank line when adding columns
  • Text generator controls disappear when trying to use them
  • Layout is not designed responsively
  • Inspector easily blocks the text
  • No way to style multiple elements, just paragraphs

Summary

As a fun side project, Gutenberg is really cool. At this time it’s not a finished product and that’s a shame. I know I’d use it a lot if I could, but until all its pieces are put together, I’ll be admiring from a distance.

In the meantime, there’s CSS Type Set which is barely more complete, Typetester which is bulky and better for comparing side-by-side, and typecast which looks amazing, but you have to sign up. So check out those options and then, like me, keep wishing Gutenberg was a little further along.

Everybody tweet at the creator and bug him to work on Gutenberg. I think it could be awesome.


Update…

March 17th, 2015: Shortly after posting this review, the creator of Gutenberg started chatting with me on Twitter. It would seem that he is interested in seeing his project finished at some point. There’s no telling when, but I think its a safe bet that we could see a polished final product in the near future.

Demo of new features in the works for Gutenberg.