Zit Seng's Blog

A Singaporean's technology and lifestyle blog

Beauty with Fonts

I did not expect myself to be so passionate about fonts. I know that fonts can be beautiful. Using the right fonts can make a page full of text more pleasing, more inviting, and even easier to read. A beautiful website design requires much thought on the selection of fonts. Fonts, without a doubt, serve a very important function.

So it is not surprising that I will spend time to choose the right fonts. What is surprising is that I just found myself selecting non-standard fonts that are not available out-of-the-box on the platform or environment I’m using the fonts for.

It started because a friend bought a font. That was for a Samsung Galaxy S II (SGS2) Android smartphone. Until then, I had not seriously considered buying a font. But this got me interested in exploring fonts on my SGS2. The default choices included was very limited. There are more free ones available, and there are also paid options. They don’t cost much per single font, but of course, the cost adds up pretty quickly if you want to buy a bunch of them.

For me, choosing fonts is both easy and hard. It’s easy, because I can filter quickly based on some of my “mandatory requirements”. For me, fonts for general text must have several characteristics:

  1. I really, really, want typefaces where the ‘I’ (capital-eye), ‘l’ (small-ell), and ‘1’ (number one) are easily distinguishable. These are usually the most problematic ones. Sometimes, the ‘O’ (capital-oh) and ‘0’ (number zero) also look-alike, or the ‘j’ (small-jay) looks too much like the ‘i’ (small-eye).
  2. I have a preference for serif fonts, at least for body text. They are easier to read. Serifs usually look good in print and on-screen when you have a high resolution display (i.e. enough pixels for each character). It might be a bit different with small text on a small display when you don’t have enough pixels. So, for example, I would go with a sans-serif font on my SGS2.
  3. This is a difficult characteristic to describe. I like to see “more”, which may mean that the font needs to be compact. Yet at the same time, I want to see clarity and separation in the strokes. This may mean the font needs to be more “spacious” and “roomy”. I think, basically, what is needed is some moderation.

When I apply these “rules”, the selection of available fonts gets narrowed down very quickly. I won’t have too many to choose from. Herein lies the problem. The “rules” narrow down the selection till there’s nothing left. So now, I have to work in the reverse direction: relaxing my “rules”, see what I’m willing to compromise, until something comes up for consideration. At that point, I realize, whatever I compromised on, well, I don’t really want to compromise that.

Then, the cycle repeats. It’s really frustrating.

So on my SGS2, after much tedious effort of buying and refunding on Android Market (now called Google Play), I sort of decided Felbridge was it. However, there was a problem. There was too much inter-line spacing such that in the Android Agenda Widget, Felbridge could not display as many lines as I would like it to. Tahoma, a free font that I could download, did much better in showing more lines. But Tahoma was a little “congested”, and in my opinion did not look as good as Felbridge. Sigh, dilema. Tahoma won. Free doesn’t cost money, so I’ll make do with Tahoma.

Fortunately, it seems the display problem in the Android Agenda Widget could be a bug, because I noticed in an app update, Tahoma could now show even more lines than before! Ok, so I put back Felbridge, and while it still did not show as many lines as Tahoma did, it was good enough.

Felbridge is beautiful. It is designed for online use, and also renders well in print. The designer describes Felbridge as “straightforward sans serif with strong, clear letterforms which would not degrade when viewed in low resolution environments”.

You should take a look at it. Here’s a screenshot from my SGS2.

A new font can make the Android interface on the SGS2 so much more beautiful and nicer to look at. I know, I can just imagine some of you out there are thinking right now, “it’s just a font, what’s the big deal about it?” Well, I think this is like art. Some people appreciate it, some other people might not. Felbridge is gorgeous to me.

So anyway, it got me thinking about fonts for the web again. Could I do something with my blog site?

Previously, for my blog site, I had settled on Georgia for the main body text. It’s a font that is available in all modern web browsing environments. This is important because it ensures the most consistent look for the blog site whether you’re viewing it on Internet Explorer, Firefox, Chrome, Safari, or whatever, on whichever platform. I chose to go with it instead of the de facto Times New Roman.

Now, I’m looking beyond standard fonts provided out-of-the-box from the web browser environment. Why not consider web fonts? Modern web browsers are supported by Google Web Fonts, so it seems I can still somewhat guarantee the rendering consistency across various web browser environments.

So what I’ve now come up with is the Droid Serif font. It satisfies all my requirements. Its metrics are close to Georgia’s, which makes the latter a good fallback font in the event the Google Web Font magic fails to work. This is the description of Droid Serif from Google Web Fonts:

The Droid Serif font family features a contemporary appearance and was designed for comfortable reading on screen. Designed by Steve Matteson, Type Director of Ascender Corp, Droid Serif features slightly condensed letterforms to maximize the amount of text displayed on small screens. Vertical stress, sturdy serifs and open forms contribute to the readability of Droid Serif while its proportion …

Notice the keywords “comfortable reading”, “condensed letterforms”, “maximize the amount of text displayed”, and “open forms”. Just the sort of things I look for. Here’s a zoomed in screenshot of a paragraph from above.

I’ve decided to keep other san-serif fonts on this site using Arial for now. The Droid Sans font doesn’t seem to render very nicely in Chrome on Mac OS X. (Firefox and Safari on Mac OS X is okay, as is Chrome on Windows 7.) It’s a pity that Google’s own web browser doesn’t work all that well with their web font service.

Leave a Reply

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

View Comment Policy