Responsive Typography: Saving Websites One Design at a Time

May 14, 2015

Emil Ruder once said, “Typography has one duty before it…to convey information in writing.  No argument or consideration can absolve [it] from this duty.  A printed work which cannot be read becomes a product without purpose.”

We couldn’t have said it better ourselves.  A major, but often overlooked, part of web design is its typography.  When trying to sell a potential new client on a service or product, you may be tempted to fixate on the color scheme or layout of your site, but it’s critical to ensure that your typography is legible, responsive, and conveys the proper message to your site visitors.  Follow these simple steps to ensure your typography is setting you up for success.

Select the Proper Typeface

The first step in creating awesome typography is selecting a typeface.  There are four basic categories that you can choose from: Serif, Sans Serif, Script, and Novelty.  Serif and Sans Serif are great choices for standard site copy since they are simple and easy to read.  (Sans Serif typically conveys a more new and modern feel while Serif conveys a more traditional feel.)  Script and novelty fonts can be decorative and great for adding a bit of flair to your project as long as it is paired with legible copy.  Script can convey formality and elegance, so if you decide to use it, be sure that a formal feel aligns with your brand.  Novelty typefaces can convey a lack of formality, so be mindful of that when opting for them.

Use a Legible Font Size

The easiest way to ensure that your copy is legible is to make sure you use the right font size.  The recommended size for the web as of 2015 is 16 pixels with a line height of 1.5.  Be mindful that the default line height is typically set to 1.2, so you may need to manually adjust that.)

Make Sure Your “Measure” is Reader Friendly

In typography, “measure” refers to the length of a line of text.  In order to ensure maximum readability, measure matters.  The perfect measure is thought to be 65 characters (which happens to be 2.5 times the length of the Roman alphabet.)  In general, the acceptable measure range that all designers should strive for is between 45 and 75 characters per line of print.

Assess Your Whitespace

While you may not realize it at first, the space between your words and paragraphs is just as important as the letters themselves.  Kerning (the space between pairs of letters), Tracking (the space between all letters), and Leading (line spacing) all have a profound impact on the way copy is read.  When letters are improperly spaced, they can run together, which can occasionally result in egregious misinterpretations of what the letters actually spell.

Your whitespace is also an important tool in making a site clean and readable.  Too much copy, design, and color can confuse the eye, making it unsure where to look first.  Less can certainly be more with whitespace.  Use it wisely.

Utilize Contrast to Your Benefit

Finally, let’s talk about contrast.  You can have the best copy and site design in the world, but if you’re putting canary yellow letters on a white background, your audience isn’t going to be able to read it.  Adding contrast between text and background is critical to ensure that your messages are received and legible.

Continue Reading