A web typography template for responsive experiences

Posted 8 years ago by Crowd Favorite

*This article was originally published on Forty.co. Forty is now Crowd Favorite.


A web typography template is a good tool to help web designers remember all the styles they’ll need to consider to make sure none of their content’s formatting options fall through the cracks.

After writing an article about the benefits of a web typography style guide, I 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.

While working on 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 smart, responsive 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.”

But the reality is that designing smart, responsive web experiences is complicated.

Download the template

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.

Download web typography Photoshop template

Written by

Amy Lamp
Former Design Director


The same team and processes that made Forty synonymous with high-quality UX design and content strategy have been extended through integration with Crowd Favorite.
If you have a digital project in mind, now’s a great time to reach out!