In practice, however, publishing on the web is supposed to be fast, and the little details are often overlooked, which is a pity, because they are not only pleasing to the eye but also improve the reading experience.
The tools and resources compiled in this article will help you bring some of that meaning that typography has always benefited from in print to your web projects. They simplify the process of establishing a solid foundation and modular scale to build upon, take care of the little details, so they don’t get lost along the way, and offer solutions to common pitfalls. Are you ready to do some catching up on that type game?
Setting the Baseline Grid Link
Web typography often lacks that sense of craftsmanship that typography in print has benefited from since Johannes Gutenberg invented the printing press more than 500 years ago. To bring back a more meaningful typography, the Gutenberg Web Typography Starter Kit sets the baseline grid to establish a proper vertical rhythm which makes sure all elements fit into it harmoniously. The kit is based on Sass and comes with two predefined themes based on the Google Fonts Merriweather and Open Sans, but custom options allow you to load custom typefaces as well. The backbone of your typography.
Calculating a Modular Scale Link
A modular scale sets the visual harmony of your design. You use it like a ruler to set type sizes or to measure and set the size of any element or negative space in your composition. Body text size is a good base to establish your scale, also fixed-width images, for example. The modular scale calculator by Scott Kellum and Tim Brown provides valuable tips to choose a base and ratio for your design and uses these values to calculate your scale. Once set, you can get your scale as a Sass or JavaScript plugin, or you can reference your calculated results right on the site. A great tool to achieve responsive typography.