I’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.
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.
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.
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.
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.