Category: design

Font Comparison – Free and open source Fonts – Legibility, Professionalism and the Resume

## Introduction ##
Fonts have to perform in a variety of settings, in particular on computers (pdf and web) and in printed documents. Are there open source alternatives to proprietary fonts? Short answer: Yes!

## Two kinds: Serif and Sans Serif ##
Serif fonts have squiggly things on the letters, and sans serif do not (sans means “without). That’s the basic difference. The standard Serif font is Times New Roman and the standard Sans Serif font is Arial (with its younger sibling [Helvetica](http://en.wikipedia.org/wiki/Helvetica)). (For the true typographic geeks, there is a [eature-length film on Helvetica](http://www.helveticafilm.com/) and global design issues.)

## Comparing Serif Fonts ##
The Serif oldie is Times New Roman. The new one from Microsoft is [Cambria](http://bit.ly/KLk32). (For the Serif fonts, Georgia was inadvertantly left out. It can be considered in the place of [Verdana](http://en.wikipedia.org/wiki/Verdana) but for Serif fonts.) [Liberation](http://en.wikipedia.org/wiki/Liberation_fonts), [Droid](http://en.wikipedia.org/wiki/Droid_fonts), and [Libertine](http://en.wikipedia.org/wiki/Linux_Libertine) are three open source offerings. [Droid](http://en.wikipedia.org/wiki/Droid_fonts) was designed for the Google An[Droid](http://en.wikipedia.org/wiki/Droid_fonts) platform.

I have found good reaction to the use of [Cambria](http://bit.ly/KLk32). It is legible, and recognizable as a serif font, yet has enough of a difference to evoke an aesthetic response. I find it simple yet elegant.

## Open Source Serif Fonts ##
How do these three open source options compare? [Liberation](http://en.wikipedia.org/wiki/Liberation_fonts) has less spacing between the letters. At first this might appear a disadvantage, but we read in chunks of words and phrases, not individual letters. The same is with [Droid](http://en.wikipedia.org/wiki/Droid_fonts), which when one shrinks down the size of the font more and more, retains much greater legibility. Overall, [Droid](http://en.wikipedia.org/wiki/Droid_fonts) is more narrow, [Liberation](http://en.wikipedia.org/wiki/Liberation_fonts) taller than [Cambria](http://bit.ly/KLk32) which becomes squat, but retains legibility.

## Linux [Libertine](http://en.wikipedia.org/wiki/Linux_Libertine) ##
Linux [Libertine](http://en.wikipedia.org/wiki/Linux_Libertine) is an excellent comparison font at 6-8 point size. [Libertine](http://en.wikipedia.org/wiki/Linux_Libertine) retains a sense of 19th century elegance, which it is meant to. The Capital Q and W and lowercase w and the upward slanting tail on the lowercase u and the handles on either side of the capital T are all interesting. Because of the 19th century old school/steampunk sensibility, this is a great font for logos and taglines.

## [Droid](http://en.wikipedia.org/wiki/Droid_fonts) Serif ##
I find the [Liberation](http://en.wikipedia.org/wiki/Liberation_fonts) font to have some problems with the u and m. When they get small, legibility is hampered. As such, the [Droid](http://en.wikipedia.org/wiki/Droid_fonts) Serif becomes my choice for reading text, including the Resume, if Serif is chosen (which signals more traditional and conservative sensibility as opposed to sans serif which is more modern and up-to-date).

## Comparing Sans Serif Fonts ##
[Verdana](http://en.wikipedia.org/wiki/Verdana) has been a solid update of Arial and great for web and print work. It is a safe font to use in many situations, though it is becoming a bit dated. [Calibri](http://en.wikipedia.org/wiki/Calibri) is the Microsoft replacement to Arial. Calibri has better spacing than [Verdana](http://en.wikipedia.org/wiki/Verdana), and is therefore more legible and a bigger font when provided the same number of linear inches. This makes it a more narrow font. [Verdana](http://en.wikipedia.org/wiki/Verdana) has a more square feel and uniform spacing per character.

## [Liberation](http://en.wikipedia.org/wiki/Liberation_fonts) Sans ##
Unfortunately [Liberation](http://en.wikipedia.org/wiki/Liberation_fonts) Sans does not fare well. The y appears to be too short compared with the z. The a is a bit out of place. And when comparing the letters o w and n in brown, the w appears to crowd the n but not give too much space to the o.

## [Droid](http://en.wikipedia.org/wiki/Droid_fonts) Sans ##
[Droid](http://en.wikipedia.org/wiki/Droid_fonts) comes out very strong against all other options. It has an interesting letter c and a. It doesn’t have as optimal a spacing as calibri but compares favorably with [Verdana](http://en.wikipedia.org/wiki/Verdana). It is a bit more narrow and taller.

## Bottom Line ##
I prefer [Droid](http://en.wikipedia.org/wiki/Droid_fonts) Sans, [Droid](http://en.wikipedia.org/wiki/Droid_fonts) Serif, and Linux [Libertine](http://en.wikipedia.org/wiki/Linux_Libertine) to compare favorably with Microsoft’s [Cambria](http://bit.ly/KLk32) and Calibri. Open Source offerings rise to the challenges and meet the typographic needs of today.

P.S., Don’t forget to embed the fonts in any PDFs you create. For Windows users, the free [CutePDF](http://www.cutepdf.com/Products/CutePDF/writer.asp) application adds a nice PDF printer driver to create great PDFs.



Font Comparison, originally uploaded by jeffmcneill.

Note: this comparison is with different font sizes, chosen to achieve a similar line length in Sentence case.

* Don’t like these fonts? Make your own with the Open Source tool [FontForge](http://fontforge.sourceforge.net/).

Advertisements

Designing the Moment – Robert Hoekman, Jr. – Book Review

Designing The Moment book coverDesigning the Moment: Web interface design concepts in action by Robert Hoekman, Jr.

There are many useful concepts illustrated in this book, including:

  • Gutenberg diagram–Primary optical area and terminal anchor
  • Ambient signifiers by Ross Howard – color, size, transparency level
  • The goal to create positive moments, with a great example of the use of autocomplete
  • Video!
  • Display validation pre-submit, aka check boxes which activate next to a validated form as the user tabs through the interface
  • Many other nuanced goodies

One of the greatest compliments is that this book doesn’t go far enough, yet its core message is to go further than we have gone, hence it is a book on the path

Some criticisms

  • Talks smack about former client
  • Doesn’t go far enough in reducing instruction text
  • In showing character count in Twitter, does not indicate a “going over limit” could be handled
  • Use of the phrase (e.g., me@mydomain.com) after an attendee email form field label–do we really have people who don’t know what an email address looks like? And if so, are they really going to learn it on this website?
  • Repetitive use of text, e.g., attendee first name, attendee last name, attendee email
  • Heavy use of drop-downs
  • Wants to (needlessly) coin the term protocast, for a screencast used for a demo/walkthrough
  • Inconsistency in handling question marks as helper links in an interface (uses both ? and what’s this? instead of simply ?

But these complaints are largely trying to hold the book to the standard it is trying to create for the interface designer. In other words, any of its detractions and failures are largely seen as indicators of its success in making us think more deeply about what it means to design for the moment.

Thank you sir.