Typography Basics for the Web

As the basis for all web content, typography has a substantial role to play in web design. Something as simple as font choice effects nearly every aspect of a website. Therefore, its important that even the average content producer takes the time to learn some of the fundamentals around typography.

Sans-serif for Screen, Serif for Print

typographic differences between sans and sans serif fonts

Type for the web comes in two basic flavors:

  • Serif – with serifs, ex. Times New Roman
  • Sans-serif – without serifs, ex. Arial

Sub-classifications lie within the serif and san-serif font type and differ among features such as stroke-width, serif type, x-height, shape, and various other parameters. Hover, delving into font families and sub-types will be saved for a future post.

Here’s a basic rule of thumb for font selection:

Serif fonts are for better reading print-outs while san-serif fonts are better for reading on screen.

Serifs allow the eye to flow from one letter to the next unlike the abrupt corners of san-serif fonts. However, due to the low resolution of some digital screens which have a tough time accurately rendering small and intricate serifs, sans-serif fonts are actually easier to read on screen. There are exceptions to this guideline and knowing when to apply it makes all the difference.

Contemporary Typography Trends Show Use of Serif Fonts in Body Copy

As the quality of digital screens has improved so has the clarity and resolution of visuals. As a consequence, many readers now enjoy the increased readability of clearly rendered serif fonts. Sites meant for lengthy reading such as The Intercept and The Guardian make great use serif fonts to increase content accessibility.

Sans Serif Remains a Good Choice for Body Copy and Bold, Attention-grabbing Headlines

Serifs have an edge in readability in ideal on-screen conditions, but when the clarity of on-screen visuals falters in such cases as low resolution mobile devices and inadequate lighting, sans serif fonts are still the ideal all-around choice. Moreover, sans-serif fonts are a better choice for clear, bold headlines.

Keep Fonts Simple and Stick with Traditional Typography

In the world of DIY web design I often see some horrid typography selections. The intent to pursue artistic vision, creativity, and a touch of uniqueness has merit although fonts don’t have as much wiggle room as imagery.

Basic Typography selections from Google fonts

The most common mistake is choosing a ineligible, stylistic font for headlines or body copy. Firstly, this makes content extremely hard to read while also immediately connoting a lack of professionalism. Sticking out from the crowd definitely helps in getting noticed, but it only helps to be noticed for the right reasons.

The second most common mistake is choosing too many typefaces. Using too many different fonts makes a for a chaotic, inconsistent design which is undesirable in most cases.

As a general rule, choose a maximum of two different typefaces.

Many websites use one font for body copy and another for headlines and call-outs. Although, using one typeface is perfectly fine to maintain simplicity.

When choosing fonts for your website, remember to stick with the basics. This list of popular Google Fonts from Typewolf is a great starting point.

Save Stylized Fonts for Special Cases and Short Headlines

using display fonts in web design

Playful fonts such as Pacifico and Lobster have an important role in design. They break the flow of monotonous, perfect shapes and provide needed excitement and contrast. Use fonts such as these for accenting key areas of the site that need extra attention such as call-outs, badges, and banners.

Web Fonts are Plentiful and Mostly Free but Choose Wisely

One last topic of note concerns desktop fonts, web fonts, and licensing. Just as copy-righted music can’t be uploaded to the internet for public use, desktop fonts are also restricted to individual owners. Only web fonts which are licensed specifically for the internet are allowed on websites. Many web fonts are freely available as open source though some must be purchased for use.

Now that you know the basics and a few guidelines be sure to pick from choices that best match your situation. There are many web fonts to choose from among a variety of font libraries such as Google Fonts and the League of Movable Type.

Thanks for reading and if you enjoyed this article please share with your friends and colleagues.

Featured image courtesy of Marcus dePaula

 

 

Leave a comment

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