How To Use Typography In A Responsive Web Design Environment. 

By Jeremy Girard

 

Mar 23, 2015

 

Back in 2006, an expert wrote that “Web Design is 95% Typography.” With the recent rise of responsive web design, another authority upped that percentage for responsive sites, stating that “The responsive web will be 99.9% typography.” While these percentages may not be perfectly exact in every instance, the point is that the overwhelming majority of our website designs are driven by text content and the typography decisions that we make as designers.

  

 

A Little History On Websites And Fonts.

 

If you’ve been designing websites for any period of time, you’ve likely heard the phrase “web safe fonts.” For many years, limitations in web browsers forced designers to utilize a very small group of fonts for websites – Arial, Verdana, Times New Roman, Georgia, and Trebuchet MS being the main ones. If you wanted to use a font that fell outside of this select group, you would have to make that text an image, something that couldn’t be done for large blocks of text and which ultimately had a negative impact of a site’s accessibility and performance, as well as a negative impact on SEO.

 

In the past few years, this “web safe font” restriction has been greatly minimized as a new feature called @font-face has been introduced, allowing designers to make use of thousands of new fonts on our websites in a reliable way and really expanding the quality of web typography.

 

This is awesome because we now have so many choices open to us that we can create incredibly rich and unique designs with the wonderful typefaces available to us today. The challenge is that, with so many options now open to us, it is very easy to overdo it.

 

Responsive web design also creates a number of challenges for us in terms of how we use typography on our sites. Since a responsive design will “reflow its layout for different devices and screen sizes so that it can provide the best possible experience to the widest range of users and devices possible,” we need to make sure that our typography choices respond as well as we strive for pixel-perfect responsive web design.

 

A Little History On Websites And Fonts.

 

Don’t Overdo It On Fonts.

 

This is a general typography best practice. The wealth of fonts available to use today make it very easy to overdo it, but by practicing restraint and limiting our site to maybe 2 or 3 different font choices at most, we can work to avoid overuse.

 

As Robert Bringhurst says in his definitive volume, The Elements of Typographic Style:

 

“Don’t use a font you don’t need.”

 

By limiting your site’s design to only a couple of choices, you create a clean, clear rhythm and ensure that the variety of type styles do not create a confusing mess.

 

 

Avoid Overused Fonts.

 

Certain fonts carry a stigma with them due to how they may have been used, or overused, in other places. Fonts like Papyrus have been used in so many ways, oftentimes poorly applied ways, that they immediately have a negative association attached to them.

 

Other fonts become overused in a short burst of time. The “Gotham” typeface was used by the Barack Obama campaign in 2008 and it quickly started showing up everywhere, as political messaging became impossible to escape, and other designers jumped on the popularity of this font. This quickly hit the saturation point as everyone starting using this distinctive font all at once.

 

Overused fonts could also mean that a company’s competitors all use the same font. Even if that company only has a few local competitors that they are concerned about, if they all use the same type choices, there is an unmemorable, vanilla quality to that approach. By choosing a different typeface, you can set that design, and that company, apart from their competition right from the start.

 

Quality typography is often about understanding what other designers have done, good or bad, and making decisions based on those associations.

 

 

Choose Complementary Fonts.

 

One way to limit your font choices is to select just a pair of fonts that contrast and complement each other, perhaps with one choice for headlines and another for body text. This contrast, and the restraint your choices show, will help create a professional and readable presentation. You can choose two fonts made by the same designer or type foundry as one way to pair two typefaces that work well together.

 

Choose Complementary Fonts. 

 

The Importance Of Readability.

 

Readability is another general typography best practice. If 99% of our web design is typography, we need to be sure that our type is, above all, easy to read.

 

A number of factors contribute to the readability of text, including:

 

Contrast.

Black text set against a white background has been shown to be the easiest for web users to read. This is due to the high contrast between these two colors. While black and white may not work for your design, keep this contrast need in mind. Dark text set against a much lighter background will always make for better readability, especially for long blocks of text.

 

Type Classification.

Typefaces comes in a variety of styles, including serif, sans-serif, script, handdrawn, grunge, display, novelty, etc. While fonts that fall into the display, grunge, or script categories may be stylistically exciting, they can only be used for large headlines and not for large blocks of body copy. For body copy, it is best to go with a serif or sans-serif font.

 

A serif is “any of the short lines stemming from, and at an angle to, the upper and lower ends of the strokes of a letter.” If you look at a font like Times New Roman, you will notice the little flourishes that hang off the ends of each letter. Sans-serif, or “without serif,” fonts do not have these flourishes. Helvetica is an example of a sans-serif font.

 

While, historically, serif fonts were used in the body text of printed works because they made large blocks of text easy to read, typography studies for computer screens has shown that both serif and sans-serif fonts are effective in this medium. These fonts are what you should use on your site’s body copy to make it readable.

 

Other Factors.

The size of your text, the color it is displayed in, and the line length of your text passages are other factors that will contribute to readability and quality web typography. We will cover each of these separately later in the article.

 

Other Factors.

 

 

Different Screen Sizes = Different Font Sizes.

 

Recently, “big text” has become a popular trend on many websites. The challenge is that, while oversized text may work great for larger screened devices, small screens (like smartphones) may look silly with such large text. As part of pixel-perfect responsive web design, you, the designer, can control the text size used in each instance. Different screen sizes can each have different font sizes!

 

Just like a responsive web design can change its layout for different screen sizes and devices, so too can the font size change as needed. You may have a main message set in a gloriously large 100pt font size for wide, desktop screens, but that won’t work for phones, so as your responsive website scales down for smaller screens, you can also scale the font accordingly so that is presents an aesthetically pleasing, and also readable, display.

 

 

Color And Accessibility.

 

Color choices and adequate contrast not only make a website easier to read, they also aid in usability and accessibility and are an important part of web typography. Links with good contrast stand out and are easy for users to find (and click!). Proper contrast will also help visitors who have poor vision or some level of color blindness use your website. You use us this website to test different color combinations for text and backgrounds to see how different kinds of color-blind users would see that site.

 

Color And Accessibility.

 

 

Using Real Text As Opposed To Images Of Text.

 

As mentioned earlier, in the past when we wanted to use exciting typefaces on websites, we had to turn that text into an image. While we could not do this for large blocks of text, you often saw this technique used for navigations buttons, headlines, or large billboard messages. The downsides to “text as images” are the negative impact on performance because it requires the download of those images, the fact that it often makes that text inaccessible to search engines or screen readers, and it also makes updating that text a challenge. All of these are headaches that we do not want for our responsive websites – and with the rise of @font-face fonts and improvements in web typography, we don’t need to!

 

By using “real text”, which means HTML text styled with CSS, your websites will perform better, be more accessible, and easier to manage and update over time.

 

 

Fonts For Icons.

 

Because we can reliably now use many new fonts on our sites, we can also use “icon fonts.” These are fonts where, instead of normal letterforms, we have icons and small pictures. These fonts are perfect for use in place of images for icons on our sites! Many responsive websites have begun using fonts in place of icons!

 

 

Avoiding Uncomfortable Line Lengths.

 

One of the problems that early responsive websites suffered from were inappropriate line lengths for text. For the widest screen displays, line lengths often grew far too big, while the opposite became true for small screen. Ideally, you want between 45-75 characters per line of text. For pixel-perfect responsive web design, you can use responsive styles to ensure this remains the case as your site scales for different devices.

 

Avoiding Uncomfortable Line Lengths.

 

 

In Summary.

 

With a basic understanding of typography best practices and how those best practices work for pixel-perfect responsive websites, you can make your typographic design choices the best that they can be. A few points to remember:

 

  1. Do not overdo it with font choices. A few carefully chosen fonts should be all you need. 
  2. Look for typefaces that pair well together. Choosing one typeface for headlines and another for body copy is one way you can limit your choices and still have some nice variety and contrast. 
  3. Avoid overused fonts or fonts that carry a negative association with them from the very start.
  4. Always remember that readability is key and choose typefaces set at a size and color contrast that make them easy to read on the screen. 
  5. Change the size of your fonts as your pixel-perfect responsive website adapts to different screen sizes. 
  6. Also make sure line lengths are optimal as different screen sizes are supported by your website. 
  7. Always use real text as opposed to “text as images” on your site and experiment with icon fonts to replace icon images as well.

 

 

What Do You Have To Add?

 

Do you have any additional typography tips for creating pixel-perfect responsive websites? How about some examples of good or bad typography for responsive websites? Share your thoughts with us and help contribute to the conversation on how to use typography in a responsive web design environment!

Brought to You by Webydo.

See how Webydo fits into your design workflow and business.

Request A Live Demo

Blog Menu

Subscribe to our blog:

//The disqus (comments) addition
comments powered by Disqus