Responsive Typography

Typography is an art. It also so happens to be the primary way through which we communicate information. From websites to television to billboards, typography represents a mood and style that further solidifies the message the text itself holds.

Unfortunately, many web designers treat typography as a one-size-fits-all process. Doing so leaves so many opportunities left behind, whether that be a better way to communicate a message or a more defined way of branding a company. Additionally, most of us understand the importance of responsive web design but fail to take into account responsive typography.

The Importance of Responsive Typography

Readability is one of the primary concerns for all web designers. If readers cannot physically read your content, they won’t stick around long, and with more readers using mobile devices to find information online the need for responsive typography is more evident than ever. When typography is clear, the message is more effective—plain and simple.

How to Achieve It

Here are just a few tips to help you achieve better typography in your web design.

  • Consider the Font— For example, Times New Roman should be replaced with something like Serif for a better effect.
  • Use Fewer Characters—Text lines should max out at 60 to 75 characters, more than that and you end up overwhelming users.
  • Use a Vertical Grid—Outline a Vertical Grid first before you set your horizontal grid. There are various tools to assist you with this goal.
  • Scale it Down—Typography should scale down for mobile devices since readers hold mobile devices closer than they do a laptop or desktop. Proportions are key, so keep them neat and tight for the best result.

Responsive typography is a critical design aspect, even more so when effectively utilized. Mobile design should include vertical rhythm and consider both mobile phones and tablets, as the size will vary. To create the best user experience, keep in mind the numerous devices used for online browsing when finalizing your typography. The result will be a more loyal readership.


Take a look at this tutorial from designmodo

Leave a Comment