Designing for digital products, specifically the web and mobile devices, boils down to doing three things: making rectangles, selecting colors, and picking out fonts. That’s a crude oversimplification of it, but essentially that’s what we do as user interface designers. We also get to pick out cool photos and provide art direction from time to time. But, since content is king, we work with what we’re given. Instead of thinking about this as limiting or stifling, it’s actually a fantastic opportunity for creative problem solving. When it comes down to it, design is not art. It’s a tool for enhancing communication. For this post, I’m going to focus on how typography can give digital content a voice, and how different typefaces have different personalities and tones.

A semi-brief introduction

There are four main categories of typefaces: serifs, sans-serifs, scripts, and display fonts. Whether we choose to acknowledge it or not, we all have preconceived notions of the characteristics of different fonts. Serifs tend to be more traditional, respectable, and stable, while sans-serifs are more synonymous with a straightforward, simple, sensible tone. Script fonts are typically viewed as more personal, feminine, or fancy. Display fonts are generally associated as being more friendly, quirky, and unconventional. For these reasons, scripts and display faces are seldom used as body copy, especially when it comes to longer portions of text.

Selecting a typeface, or a collection of them, is only half of the solution. As designers, we can also use color and spacing of the text to establish a rhythm to the flow of our content. We rely on tools like leading and kerning, which are similar to the line-height and letterspacing properties of CSS respectably, to help determine the visual tone of the content and break it into manageable, digestible chunks.

It can be a bit overwhelming trying to pick out the right font for your project, especially with so many to choose from. Sometimes, it’s more appropriate to create a typographic system with multiple fonts to establish a clear sense of hierarchy throughout your project. This is true for both digital and printed mediums. Keep in mind when doing this, though, to make sure that your choices are appropriate for the audience and enhance the message, while making sure the content is still legible. For example, HvD’s Brandon Grotesque has become wildly popular over the last several years, and for good reason but, in my personal opinion, it’s often misused. Brandon Grotesque is a warm, geometric sans-serif that is available in a range of weights and is readily available as a webfont via Typekit, but it’s character set is typically rendered a bit smaller than other fonts. Add to that the fact that it has tiny counters (the holes in e’s, o’s, d’s, b’s, etc.) and double story a’s and g’s, makes it’s harder to read at smaller sizes, especially on retina screens, but by making it just slightly larger than you initially would, it becomes a much more legible type choice.

“Pixel Perfect” is a myth

Years ago, front-end developers touted an obsession with pixel perfect design. It was feasible when the web relied on 960 pixel grids for everything, when tablets and mobile devices didn’t account for a large volume of traffic online. But the rise of the mobile web, responsive design, and the variety of screen sizes and pixel densities means we can’t always rely on a precise pixel measurements anymore. What’s important however, is to maintain the spirit of the design in terms of spacing and proportion.

Licensing isn’t just boilerplate legalese

All fonts come with EULAs, or End User License Agreements, which act as legal contracts between the software application’s author or publisher and the users of said application. In this case, it’s between the font foundry and you, the designer/developer. With the increase in both the quantity and quality of screen fonts over the past several years, EULAs have become more complex. Often times, you can buy individual weights of a font based on your needs but according to most EULAs, there are different price points for desktop, webfonts, apps, ePublications, and server applications. This is partially due to the fact that not all typefaces are optimized for the web. When it comes to screen fonts, type designers have to account for a range of display sizes that can be more difficult to render under the restraint of square pixels. As a result, a lot more work goes into maintaining a sense of consistency in individual characters within a typeface across a range of sizes and weights.

Hoefler & Co. does a fantastic job at explaining the difference between print fonts and screen fonts: http://www.typography.com/cloud/the-fonts/#ssm-concept

So what do you look out for when buying/downloading a font? Apart from making sure that it fits the needs of your audience and content, make sure to get the right file format. Typically desktop fonts are saved as open face (.otf) or truetype (.ttf) formats. There are multiple ways to realize screen version of a font. Font-face embedding relies on .woff and .eot files and screen fonts can also be served up as .svgs although, when rendered in a vector format, screen readers can’t pick up on the content. Another method that’s become popular is font hosting services. Cloud based services like Typekit, fonts.com, and cloud.typography offer a more lightweight solution to web hosting.Apart from any legal ramifications you could incur, the overall quality of your product can be affected by the the misuse of the software. Essentially, you get what you pay for. While there are a ton of free resources available like dafont.com, which sometimes have a decent selection of character sets, most are iffy at best. However, with the rise of the mobile web, the quality of free-to-low cost resources has dramatically increased. I’d recommend hunting through resources like Font Squirrel, the Lost Type Co-op, and Google fonts. Myfonts.com is another great resource with a ton of timely sales.

Other sources I find helpful

Below is a list of foundries, resellers, collectives, and blogs with a focus on expressive typography. While not all of them specialize in screenfonts, the characteristics they promote and knowledge they share has personally helped me elevate the quality of my work as a designer. Hopefully it will have some impact on you too.

   
• Latino Type
   
• Grilli Type
   
• Indian Type Foundry
   
• HvD Fonts
   
• FontFont
   
• Font Squirrel
   
• Underware
   
• Myfonts
   
• Emigre
   
• House Industries
   
• Typewolf
   
• Tobias Frere-Jones
   
• Typekit
   
• Lost Type Co-op
   
• You Work For Them
   
• Hoefler & Co.
   
• Fonts In Use
   
• Process Type Foundry
   
• Google fonts
   
• Village
   
• Commercial Type
   
• Type Supply
   
• Darden Studio
   
• Reddit

We design, develop, and ship custom software for web, mobile, and connected applications and experiences. GET IN TOUCH.