Web fonts

I’ve been a little bit giddy over the last couple days at my discovery that the fonts used on my website are not limited to the fonts I have or others are likely to have on their computers. Rather, a website owner can use CSS to refer everyone’s browser to a publicly available font at a web font service, thereby allowing everyone’s browser to display exactly the font that the designer wants and not just one of the several that are likely to be available on the visitor’s computer.

This is a really simple concept, but I’m not surprised I didn’t think about it before. When an application on your computer (say, Microsoft Word or Mozilla Firefox) loads text of a certain font, it has a certain folder(s) on the hard drive where it goes to look for fonts and then displays each bit of text in the correct font. Instead of limiting the browser to fonts stored on the same hard drive as itself, or at least the same computer (with multiple drives) as itself, why not tell the browser to fetch the font from a location on a hard drive on a different computer, connected to it via the internet? That’s exactly how web fonts work!

I first realized this when I came across Typekit, a web font service that several blags I’ve encountered use. I’m a little too obsessed with typefaces, so naturally I was curious about what those blags’ fonts were called and where they came from and how it was possible that they displayed as normal text in my browser, not as a static image or snapshot or anything. I eventually decided to click on the little Typekit logo in the bottom-right of the screen of one of those blags, which says “Fonts from” and then the logo.

So I signed this domain up for a free account and started trying a few different serif fonts that would serve me better than my all-time favorite font of Times/Times New Roman had. Times (New Roman) will always be my favorite font because it’s just so…classical, functional, straightforward, unassuming, readable without being bland, elegant without being flashy.

The only problem is that it wasn’t as readable as I’d like on my laptop. I love how the text of my posts looked in Times New Roman on my 19″ desktop monitor (on Ubuntu Linux), but in every single browser I tried on my Windows 7 laptop (a 13″ Toshiba), the text was just too small for the Times New Roman font. It isn’t just a matter of size, because many sans-serif fonts on many web pages are the same size as this text was. Rather, the problem with Times New Roman on web pages is that the font doesn’t scale down well or something, because it is just hard to read at 12 points or smaller. Too much serif or too small spaces between letters or too much black space per white space or something. Part of the problem could be my beige parchment background, which looks very pale on my desktop monitor but quite red-tinged on my laptop. I’ve spent probably upwards of an hour between several different occasions trying to get my laptop’s display closer to my desktop’s, but it seems impossible. I think I would need hardware buttons like the RGB balance and gamma, but they don’t seem to exist on this laptop.

When I work in Microsoft Word for my editing job, 90% of the papers are, thankfully, written in Times New Roman, most of those in 12-point size. When I zoom in to 120% in a Word document with Times New Roman 12-point type, the text looks perfect in every way; my ideal font. In contrast, in Microsoft OneNote, which I use to jot things down and take notes while editing, Times New Roman 12-point font has the same problem as above (suggesting the website readability problem was not due mainly to the parchment background). The dilemma was that if I made it any larger, it would be way too large on my desktop monitor. I don’t know how they would look on visitors’ displays, but if my two computers were any guide, Times New Roman wasn’t achieving a happy medium between readability on a laptop and aesthetics on a desktop monitor. It just isn’t a web font.

The same was unfortunately true with a font I quickly became enamored of from Typekit, Adobe Garamond Pro. When I applied that font to my blag at 16px, it looked wonderful on my desktop, elegantly simple, with a little extra flare or style that Times doesn’t have. However, it was probably even less readable on my laptop than Times. Increasing the size was an option, but not a great one.

The free account at Typekit.com doesn’t give you access to all of their fonts, so I didn’t have many Times- or Garamond Pro–like options, and most available serif fonts again looked too small on my laptop or too big and awkward on my desktop. Liberation Serif initially seemed a good option, but on my laptop it looked even too narrow and almost like the letters were too close together. I want a serif font for my main entry content because it seems a little more professional and academic, more classically stylish and not newfangled-computer-stylish, which matches the brown/red/beige/earthy theme of my website better. Serif fonts also display em dashes and en dashes better than some sans-serif fonts, such as two of my favorites, Lucida Grande (which displays en dashes and hyphens identically) and Trebuchet MS. Looking around at other websites recently, I suppose I could go with Georgia at around 14px, but I have disliked Georgia on other websites before, probably at 16px, so I’ve acquired a little bias against it. It seems to be basically a web font while Times is a word processing font.

To make a long story short, I found the Google Web Fonts service and am now using that with Sebastian Kosch’s Crimson Text as the text you are reading. I have no idea how long I’ll keep it as that.

I have discovered three large advantages of Google Web Fonts over Typekit. 1) There are thousands more fonts available for free, many of which are the same as those available with the free Typekit account (PT Serif, Droid Serif, and Prociono, just to name a few). The free Typekit account has plenty of good ones, hence its popularity, but not all of the open-source ones. 2) Some of the Google web fonts seem to look better, at least on my laptop, than the same font from Typekit does. I am not sure if it’s possible that Google Web Fonts’ version of PT Serif looks better than Typekit’s, but something has convinced me it does. Sebastian Kosch has apparently uploaded two different versions of Crimson: Crimson to Typekit and Crimson Text to Google Web Fonts. I am completely sure that these two look different on my two computers, in favor of the latter. 3) Google Web Fonts’ API is much easier to use and is open-source, so you don’t need an account, username, download, special access, or anything other than minimal CSS knowledge to apply a certain font to a certain type of text on your web page. All you do is add the link rel tag to the appropriate place in a CSS document, with the name of the font at the end of it, and the font will display properly on your web page. I was successful on my first try. You don’t need any WordPress (or other blagging platform) plugin, you don’t have to download, activate, or sign up for anything, and you don’t technically even have to visit the web fonts gallery; if you know the syntax of the CSS tag and the name of the font, you can type it in yourself. You just need access to the right CSS document(s).

In case you’re wondering, some of the other fonts I was attracted to and might cycle through again later were Lusitana, Cambo, PT Serif, Gentium Basic, Ovo, and Poly. The main reason I probably won’t use Lusitana, Ovo, and Poly is because they are a little too squat—too short and wide and not tall and narrow enough. I use those terms relatively, of course, because I hate really narrow fonts like Arial Narrow and other compressed/condensed fonts. I like the fonts that are very slightly on the taller and narrower side. They just seem more elegant and stylized to me. Another one I’m interested in if I can figure out the API or CSS is Century Catalogue. It is listed at webfonts.info as being available for @font-face embedding, but I’m missing some knowledge about how to link to or embed this font. Maybe just link to the .sfd source file?… Its author says it is still a work in progress, so maybe it’s not embeddable yet?…

I know my friends would think I’m nuts for even noticing any font except if it’s unreadable, but given the thousands of font designers and typography afficionados out there, I’m far from alone.

This entry was posted in Blagging, Writing. Bookmark the permalink.

2 Responses to Web fonts

  1. John says:

    Welp, now it’s PT Serif. That lasted a day. I’ve got the over/under on the duration of PT Serif at 1.5 days…

  2. John says:

    Yay, back to Typekit and Adobe Garamond Pro! It actually is perfectly legible on this web page on a small-monitor laptop, although it’s still kind of a more squat font than I typically favor. Maybe I’ll try out some fonts.com free web fonts later…