Week 10 Page 10: Web Typography Tips

Web Fonts

Type on the web has a reputation for being notoriously difficult to handle although the technology options are improving all the time. How can you stick to the rules of readability when your viewers' devices have different screen sizes and personal settings for default fonts and text sizes? At some point, you have to accept that you're not going to get the perfect result on every device. Here are a few ideas for achieving something close to your design and readability goals! 

Cross-platform Fonts and Screen Fonts:

One way of avoiding incompatible font issues is to designate fonts that are commonly installed on both Windows and Mac platforms. Consider using Verdana and Georgia which have been specifically designed for onscreen reading (unlike Arial and Times). You can also specify generic font families to cover all your options: sans serif or serif.

This site uses a sans serif as the main text font. The text is very readable.

• http://www.itcfonts.com/Ulc/4011/Headlines.htm Links to an external site.

Look at the sans serif used at the site below? It is a different font from the one used for ITC Fonts (above). Is it as readable?

• http://fanzone50.com/recipesHints.html Links to an external site.

Font Embedding or Downloading Options

There are several companies that now offer font libraries that you can embed into your site design (@font-face). You select the font at their site, they provide the code to display the font, you then paste the code into your site's HTML and when the page is displayed, the browser accesses the font files at the site to retrieve the embedded font data. Of course, most will charge you for the convenience... However there are some exceptions: check out Google's public domain web fonts (for example):

• http://www.google.com/webfonts Links to an external site.

There are several companies in addition to Google fonts including Adobe TypeKit and Font Squirrel. Most of these free sites also allow you to download the font files to your computer and upload them to your own web server. It's important to make sure you know what the licensing is for each font. Some are licensed for all uses, others only for use on desktop computers! Here are the different licenses at Font Squirrel:

Here's an overview of font embedding options:

• http://mediumwell.com/web-font-revolution-embed-custom-fonts/ Links to an external site.

 

Typeface Excess!

Avoid the temptation to use every typeface in your font collection! The general rule is: 2-3 different font families per design. How many typefaces are used at this site? Does the number of typefaces help or hinder the site's unity?

 

Colored Type!

Avoid too much colored type. Remember that some colors are easier to read than others and will be impacted by the background you choose. Black/dark grey type on a white (or light) background is best. White type on a dark background is much harder to read (particularly in serif type at small sizes). The bright, luminescent colors are generally the most difficult to read (and the hardest on the eyes). The bottom line for colored type is: make sure there is contrast between the type and the background. If it gives you a headache, think how your readers will feel!!!

Here is a fine example of that! (The serif typeface is really hard to read in white on a dark background)

 

Line Length:

Use fixed width tables or div blocks to control the line length of your type (don't just let it expand to the window size!). For pages with multiple columns, make sure you have adequate spacing (gutter) between each column so the type doesn't touch the borders or isn't too close to the column next to it.