Tag Archive for: resizable type

You’ve heard me preaching the benefits of responsive web design, but you probably haven’t seen much about responsive typography. This is interesting because for most websites, the text is by far the most important content on the page.

Well, good news everybody, because responsive typography is pretty easy. You just need to think through how you want type to respond to the changes in screen size, and then follow through.

Responsive typography has two main factors. The first is resizable type, which is obvious. Resizable type rescales itself based on the size of the screen, but it is also important that it is resizable by the user.

The second factor is optimized line lengths, which are still readable. On some screens, keeping content areas smaller actually makes more sense, though they technically could be larger.

Cameron Chapman has all the code and technical information you need at Weddesigner Depot to implement solid responsive typography. Most importantly, you should be using rems for sizing your type because they are relative to html elements, which makes maintaining proper sizing of your type very efficient. Chapman also will help you through how to keep your line lengths the optimum length, which is slightly more tricky than just making your text resizable.

Designers should never neglect their typography on the page, and making it readable for any size screen is essential. Sure, if your site is more image and video heavy, it may not be as important for you as it is for bloggers, but I doubt your site has zero text on the page. Even in those situations, you want every part of your page to work perfectly for everyone.