Responsive Typography

Chapter 9. Notes, Notions, and Sending You on Your Way

This chapter is a bit of a catchall, but I had to include some useful tips and tidbits that don’t fit neatly into the other chapters.

Dynamic Scaling: Great for Layout, Not So Great for Type

Although there are JavaScript libraries and measurement units that allow you to fit text to a specific area, varying size and scale accordingly, I think using them is generally not a good idea, even for headline and display text. Doing so changes the relative proportion between headings and body copy, which can have a detrimental effect on your design.

As I mentioned several times already I’m sure, I firmly believe that in most cases you should leave the size of your body copy alone, allowing the device manufacturer and OS vendor to determine what’s best in that environment. It follows that headings should maintain a predictable scale relationship with the body copy, imparting appropriate hierarchy and importance based on that relationship. Changing heading size dynamically (using FitText.js or viewport-width) changes that hierarchy, therefore changing the imparted meaning. And that undermines your design.

Windows XP: Killing Good Typography Since 2001

I talked a bit about the, ahem, challenges we face with type rendering in older versions of Windows and IE, but I think it’s been too easily brushed aside lately in common discussion. The ugly truth is that Windows XP still represents roughly 40% of Microsoft’s installed base worldwide, and globally ...