Three Tools To Improve Your Site’s Typography

WordPress DashboardI’ve banged the better typography drum numerous times on this blog. Typography is the beating heart of web design, and without decent typography, even the best designs will provide a poor user experience. After all, reading is at the core of the what we do on the web, and typography is all about improving the reading experience.

In previous articles, I’ve talked about simple ways we can make typography better. In this article, I’m going to look at some of the tools you can integrate into design workflows that make it easier to achieve better typography.


WordPress Dashboard

Typeset is an HTML preprocessor written in JavaScript. It’s a lovely tool for typographical tweaks that would otherwise be time-consuming or impractical.

Among the improvements it makes are hanging punctuation, optical margin outdents, and soft hyphen insertion. These are common in print typography, but they’re rare on the web, which is a shame because they make a big difference to the appearance of text.

As I said, Typeset is an HTML preprocessor. That means you feed HTML to Typeset and it will output modified HTML. It’s important to note that Typeset runs on the server or development machine, not in the browser, although an in-browser version is probably on the way. On its own, Typeset can be a little awkward to integrate with your design workflows if you’re not a JavaScript whizz, so you’ll be happy to hear that there are Gulp and Grunt plugins to do the hard work for you.

If you aren’t familiar with these task runners, take a look at our introduction to Gulp, which should teach you all you need to integrate Typeset.


WordPress Dashboard

Typeplate bills itself as a “typographical starter kit.” It’s a framework that provides CSS (or SASS) to help designers create pleasing typographical layouts. TypePlate incorporates a wide array of typographical helpers that make it much easier to effectively implement a solid typographical scale, drop caps, small caps, and hyphenation, among others.


WordPress Dashboard

The alignment of text to a baseline is commonplace in printed media, and largely ignored on the web. That’s a shame because vertical rhythm and the ability to align elements across horizontal space are key parts of creating a pleasing and cohesive typographical layout.

Sassline offers a set of SASS mixins that make implementing a baseline with a modular scale relatively straightforward.

If you want to go further with your site’s typography than simply tweaking line height and measure, then these three tools will help you take the next step.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.