Main Points

Typography is all about conveying our emotional goals and our brand through our choice of fonts. Going back for a moment to our first work on color selection, we created a whole list of emotional goals for the website that the colors were meant to reinforce. "We want to speak trust to our visitors. We want to speak tradition. We want to speak history and convey a human connection to the past. At the same time, we also want to be forward looking. This is not a site for raw nostalgia or old-time sepia photography." These are all the same principles at work as we choose the fonts that we'll use across the website.

Naturally with a monotone sepia color palette, the fonts may need to make a more forward looking contribution. I like the idea of using a good, clear, readable script, but I want to make sure that the fonts also help convey the futuristic side of Earth Chronicle. One issue, of course is that script fonts are not well supported across the internet. If I'm going to make use of a script font, it will most likely have to be limited to the headings and I would most likely need to use an embedded font system like sIFR (scalable Inman Flash Replacement) to display the script font or accept that it will be seen on only a handful of browsers. An alternative to scripts would be antique fonts that give the letters a battered, nicked, or otherwise aged look, again something with fairly limited application.

On the futuristic side, there are fonts that speak to today and tomorrow. A monospaced font speaks to the history of computing and has a very distinctive feel. While not saying future it definitely splits off from the old fashioned feel of the scroll and is one very visually distinctive possibility. Sans serif fonts also have a very modern feel, though I generally don't like how plain they look. While they are a common body typeface choice for many designers, the reason has little to do with their attractiveness. Many designers have simply fallen in love with microscopic font sizes at which only a sans serif font's ultra-simplicity can look decent. Neither of these options are clearly "forward" looking.

Another option would be a clear, readable fantasy font design with a futuristic motif. However, as with a script font, this would not work for body copy, and would require a system like sIFR in order to render on more than a handful of browsers. Fantasy fonts are even more difficult, because while I can declare a generic script font-family, and then back it up with a serif font and expect visitors will always get something similar to what I want, the generic fantasy font-family includes many wild styles which do not remotely convey forward-looking as a concept. Yet this is an important idea.

While I'm plugging the design to this point into an old-fashioned richly textured paper feel, I have very technological elements built into my page. A clock is the first element on my page. I have heavily interactive features, from menubars with drop down or pull up menus to links which highlight when moused over. We have a classic HTML form in our footer; this is paper, but it is distinctively digital paper. The colors don't really convey this message so far, something I may look to enhance in the final phase of the design. But the fonts will need to pick up some of the slack in terms of futurity.

DOOM

In all my experience on the internet, I find this as unprecedented as it is shocking. There is one item I did not mention previously in the introduction. We are looking for Public Domain fonts because we loudly proclaim that anything on Earth Chronicle is public domain and available for use. Unexpectedly, no such thing exists. Perhaps font designers generate much more, or much less money than normal designers. Perhaps the extent to which fonts are stolen by disreputable designers has font designers obsessed with protecting their rights. I found many sites which advocated various restrictive copyleft licenses... and even a few fonts which actually used them. But by and large, the fonts available on the internet are strictly copyrighted; whether for purchase or for free, no such thing as a public domain font exists. Given the amount of public domain and copylefted audio, video, and images available on the internet this is inexplicable and unjustifiable. It was this kind of stupidity in software design that spawned the open source movement. I'm aghast that the same thing did not happen in the world of fonts, nevertheless, that appears to be the case.

This of course, sent me to the world of legal opinions which has some good and some bad news in terms of our design. First, every item you find declares you should consult your lawyer before doing anything. Yeah, I've got a dozen lawyers working pro bono on speed dial; talk about unhelpful advice. What I've found is that in the US the prevailing opinion seems to be that fonts have a 14 year copyright and after that are fair game. On the other hand there is no reference to where this has actually been affirmed by a court, and there's no rationale offered for Why fonts have different timelimits than all other art. That makes me inherently skeptical. Especially since the prevailing opinion in England seems to be that fonts are identical to any other work of art and copyrighted for a minimum of 70+ years. More curiously, researching the internet standard fonts proved unexpectedly difficult, however, I did find the maker of the Verdana and Georgia fonts which states explicitly that you need your own personal license to make any use of the fonts whatsoever. Techinically, that means anyone who prints out a website or a document in Verdana or Georgia and uses it for business is in violation of the font copyright, unless they've purchased a license from the owner. I'm not sure whether I'm more shocked or appalled.

With this unhappy set of consequences, the question becomes, what happens to the typography of our internet design. I'm necessarily having to scale back my initial plans for beautiful typefaces that emotionally match the psychological goals of the site. We are now in survival mode and trying to keep our heads above water. There are two key issues: one, fonts selected in the CSS stylesheets, and two, fonts used directly in the website.

First, the CSS stylesheets pose a devilish problem. Technically, my website is not using Georgia, Verdana, or anything else. Technically, the only thing a website communicates is content; HTML files contain character encodings that identify the characters to be used, but that's all. Fonts are massive including all the instructions about how to draw each character, and to avoid downloading anything so cumbersome, fonts are installed on computers. This slashes download requirements to what we experience today. So technically, when we define a stylesheet that uses Georgia, or Arial, or any copyrighted font, we're not communicating anything that isn't public domain; the font isn't ours it's the visitor's. But it's still technically illegal to print the page out. Unfortunately, the point is moot. As a developer we have absolutely no ability to install a public domain font on a visitor's browser to correct this problem for them. We can make one available (if we can come up with one), but unless someone downloads it, they will only have copyrighted fonts to render our content. There is no winning this scenario. For now we will simply have to set our type in the stylesheets as best we can, like all other websites and trade on two facts. One, we're not supplying anything that isn't public domain... technically. And two, anything you've ever printed out on a computer was most likely an illegal act. So it's not websites alone, much less Earth Chronicle, that are putting people at risk. It is Microsoft and Apple's choice to only permit you access to copyrighted fonts through your operating system. *sigh* What a mess...

Second, any use of fonts directly on the website falls into a completely different category. If we save an image with text on it, then we are providing non-public domain content, that's the bad news. The good news is that at the same time, because we are providing that content we have control over it. So if we find a public domain font anywhere or create one ourselves, we don't have to worry about font installation or anything else. It's our image, and someone will download it straight from us. The possibility of using sIFR, also falls into this category. sIFR embeds the necessary rendering information into the Flash file it uses to render fonts, so as long as we have access to a public domain font, we can use it and sIFR will render it for all Flash enabled browsers.

Therefore, our immediate gameplan will be to use the standard set of internet fonts that all websites do. The state of its legality aside, it's practice across the web and without it the internet would collapse. While I would prefer a more sound solution, until Microsoft and Apple offer public domain system fonts, this is the only solution available for any website on Earth. Next, any images or Flash which contain fonts need to be temporarily taken down, or at least the text should be removed. The only available public domain letter form we have is the "C" in the Earth Chronicle logo which I created out of circles as part of the logo design process. For step two, I have investigated the possibility of creating my own fonts which I can then issue as public domain fonts both for others and my own personal use. While I am not much interested in doing this, we certainly have a need, and using FontForge with a special auto-tracing module would allow me to autotrace letter forms by taking some pictures of pages in old Latin and Greek texts I have from the 1800s. Whatever the copyright term for fonts, certainly the copyright on these fonts have expired, allowing simple tracing of the PD letter forms to create a PD electronic font. Not a fabulous solution, but something that I "hope" to effect in the near future.

Skip to Main Points

Typography Design

Being more of an image based designer, I really hadn't studied fonts this closely before, and having spent so much time on this looking for Public Domain fonts, I've started dreaming about fonts. Oy! Nevertheless, I've revamped my approach somewhat. Internet standard fonts are pretty good looking, but there's no reason not to choose specialty fonts so long as you back them up. Using Times New Roman and Arial is just as illegal as using Old English Text MT. I can't remember who, but someone once said “If you're going to go to hell because of your sins, I'm not going because of something small. I'm going for the really big ones.” For our design we'll call that progressively enhancing your way to hell. ;) So I took a look at a lot of options, more than I intended when I set out at the end of last section. Note that because they are not public domain fonts, I can't actually provide examples of what they look like. :( My apologies.

In order to make the design easier as I work through, I'm applying very bad practice. I'm using an inline style on each of my list items to apply the font. (e.g. style="font-family: Algerian;") Normally, external styling is the only appropriate use. However, when fonts are so badly supported, it would be ridiculous to create classes for every font when the chances of them being applied range from questionable to zero. Given that these fonts are very specifically attached to this content, which is discussing them, it is not wholly unsemantic to apply them together. That way if one was deleted the other could be deleted with it and avoid the awkward possibility that the content or the CSS styles could be changed without altering the other creating a disconnect on the page. Proof that there are exceptions to every rule. I can give you no guarantees except that some of these fonts will look wrong, rendered with alternative fonts if you don't have the original available. Again, my apologies, but doing something similar is a very convenient way to take a look at your font options, and it's very effective when you are selecting fonts that you have on your computer so that the rendering is accurate.

Here is the list of fonts I've excluded and will not be using in the stylesheet. Some of them are very interesting but in browsers which do not support anti-aliasing the results look too sloppy. As you'll see throughout my demonstrations I use both capital and lowercase letters along with numbers and punctuation. I also include some selections from the Cyrillic alphabet which does a good job conveying the general level of Unicode support. Extended Unicode fonts include Hebrew and Arabic, but few other fonts do. Most fonts typically include Greek glyphs and extended Latin characters including accented letters, though you'd be surprised how many do not. Cyrillic is not usually included and gets rendered in a fallback font, but when they match the other characters in the set, you know the designers went to the extra effort to pack in some Unicode support.

Interesting, but pixelate as browser text

  • Abadi MT Condensed Extra Bold (sans serif)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Algerian (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Arial Rounded MT Bold (sans serif)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Bickley Script (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Blackadder ITC (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Brush Script MT (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Edwardian Script ITC (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Gigi (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Mistral (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
  • Vivaldi (cursive)
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я

So let's take a look at our Typeface Studies on the fonts that are more web friendly.

Skip to Main Points