Since writing an article about the benefits of a web typography style guide, I’ve wanted to put together a template to help me keep track of the typographic components that need to be considered during the responsive website mockup process. After wrapping up the design of a recent project that included desktop, tablet, and mobile layouts, I decided it was finally time to knock it out.
The template I created is much more extensive than the sample in the original article. In fact, the file became a little overwhelming and I almost bailed on the whole idea! I’d much prefer for it to be a simple little thing. But the reality is that designing web experiences is complicated. If you ever hear anyone say “Oh, it’s just a simple website,” feel free to respond with “There’s no such thing.”
You can download this Photoshop template and use as you’d like. The basic purpose of the guide is to be a reminder to consider the typographical elements of a site, not to simply change the colors in the file. If you’re going to hand this off to a developer as a guide, remember to change the font details below each type sample.
Let me know what you think of this idea. If you’ve found other techniques that work well, I’d love to hear about them!