Creative

Making Responsive Typography Beautiful

By Shawn Krohn, Senior Interactive Designer

September 05, 2017

Behind every beautiful and effective website is a struggle with the beast called responsive typography. We may not all understand the term or why it’s important, but we tend to instinctively know when something is wrong with it. In this article, we’ll explore some basic and advanced ways to pump up your website’s typographic mojo.

typography1

 

Start with the Basics

Responsive type design is no longer a static variable that a designer sets and forgets. It’s an ever moving target influenced by the rapid evolution of devices that consume web content. One way to simplify the technology challenge is to use Front-end frameworks like Bootstrap and Foundation. These frameworks contain HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components.

The plus side of using these frameworks is the math and design decisions are made for you. The negative side is that unless you customize these design decisions, your website is immediately recognizable for the framework behind it, therefore blending into the sea of websites that all end up looking the same.

 

Kicking it Up a Notch

A slightly more advanced solution is to customize the framework’s responsive typographic template using the principle of modular scale. For the sake of brevity, Modular Scale is a way to create typographic harmony and rhythm using a prearranged set of proportions. This scale is calculated by defining your base body text size and your selected ratio number.

typography html

 

I have pre-built a free Modular Scale Starter Kit which is available here. The Kit offers a visual starting point for the necessary math and CSS code. The template uses a base font size of 16px and a 4:5 Major Third Scale which has a ratio of 1:25.

Typography2

 

Once the scale is selected, EM units are calculated to make our typography responsive to the screen width of the device’s web browser. Success!

responsive typography

 

The last piece of the puzzle is to further enhance our web typography with consideration with an enhanced Mobile experience. The smallest devices are targeted through the use of Media Queries. This final part is what separates average from excellent website design, and usually the point where standard frameworks fail.

Responsive typography2

 

Final Considerations

While these new principles will allow superior design control, it is important to note that you must work carefully together with your developer. Because standard frameworks are so frequently used, doing something non-standard will cause issues and frustration if open dialogue doesn’t happen. Having a working prototype will go a long way in explaining your vision as will proper specification documents.

The decisions you make for type in web design impact every aspect of the experience. Remember that “content is king,” so keep pushing the envelope and keep making the web a beautiful place.

 

Further Reading

I’ve compiled a short list of resources to help you dive deeper into Modular Scale:

More Meaningful Typography

Prototyping Responsive Typography

Modular Scale Calculator

Type Scale Calculator


Comment

MORE IDEAS:

ADM Grain silo and blue skies

Get the Advantage

Get the Advantage

To fit ADM’s new branding, we developed a modern website, complete with custom videos.

To fit ADM’s new branding, we developed a modern website, complete with custom videos.

View Project