Using font-face With Responsive Design

by Michael Moores

Using font-face With Responsive Design

by Michael Moores

by Michael Moores

asdf-142411_640As responsive design has evolved, so have many of its techniques. Do a search for “images and responsive design” and you will get an array of blog articles documenting trial and errors of our great front-end pioneers. Their struggles have been based around serving up appropriate image sizes to a multitude of screens and bandwidths. Optimization and quality are key.

The same can be said for embedding appropriate type to different screens and bandwidths. Newer browsers support the font-face method, and it is widely seen as the best typeface embedding solution. However, with ease of implementation comes abuse and misuse. Below are some questions I may ask myself when implementing type using font-face in a web project.

Does this font look weird?

Not all type is made for the screen. This is extremely evident on low resolution screens or when you reduce the size of a font to something below 9 pixels. A good screen typeface has spacing between the letters and a large x-height. (The x-height is the distance between the baseline and the mean line on a typeface. Another way of measuring this is by looking at the height of the lowercase x, u, v, w, or z.) Sizing is important because using percentages or ems in your responsive stylesheet will push your font to its limits. Bonus points for type that takes extra care to distinguish between letters like a lowercase “L” and an uppercase “i”.

You may be surprised to know that most designers would agree that the best type for screen available on all computers are Verdana, Georgia, and Trebuchet MS. It is always a good idea to test different sizes, styles and glyphs on different browsers and operating systems before committing to a typeface that may be the focus of your brand.

Do I really need this entire font package?

Browsing through different typeface offerings, one quickly realizes how thorough a particular typeface can be. Using Exo as an example, I am presented with 18 different styles each containing 729 glyphs. Exo styles include light, regular, extra light, medium, bold, extra bold and black; each with their own italic or bold variation.

This is great. I’m a person that loves options. But these extra options used together can get expensive, and this particular example would cost about an extra 1.9 megabytes. I need to ask myself if I can afford all these fancy options or if my users will just be happy with the standard styles. There have been many complaints regarding how bulky a responsive site can get. I take optimization anywhere I can get it.

I can have 10 different font families in my project right? …. RIGHT?

Do you really need a different typeface for each type of headline? Does your body text benefit from looking as if it were written by hand? Why does your nav bar look like a ransom note? One of my designer mantras is to keep a balanced relationship between the elements on a page. Not only will complexity increase download time, but it might take away from the message. Generally, good design is not distracting or attention hogging. Good design supports and compliments.

Why am I not seeing my fonts?

You’ve agonized over choosing the right typeface, applied it strategically and, despite your best efforts, it is just not showing up. I can’t promise that all browsers, operating systems, and devices will play nice with your typeface. That is just the world that we live in as front-end designers. So you must always have a “plan b”.

Font-family degradation in stylesheets is extremely important. I usually have two basic “go to” degradation styles when building my stylesheet. For serif it’s: Georgia, Times New Roman, serif. For sans-serif it’s: Helvetica, Trebuchet MS, Tahoma, Arial, sans-serif.

Looking forward.

I think that we, as front-end designers, are constantly trying to step out of print’s shadow. Instead of applying print techniques to web design, we need to start thinking of web as its own separate entity with completely different needs and possibilities. Responsive design is important because it’s pushing us to refine our techniques as designers and ask ourselves why we do things the way we do. As technology evolves, I think typeface design will be big for web. I’m excited to see what the future has in store.

Nicole Domanski is a founding partner and the Chief Design Officer for Envalo, Inc., a Beachwood, Ohio-based eCommerce solutions company.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.