Main Points

  1. Check out our Drop Cap!
  • It only affects the first list or paragraph on the page.
  • Yes, I'm a little ahead of myself. I need to back it up, but so be it. The riskier something is, the more inappropriately front-loaded it gets so you can analyze your options over a longer period – including deciding if it's not gonna happen.

As you can see, I've done a little advance work for the drop cap, which is not the most pressing item. However, there are two competing issues. One, my thought had been to style a fancy Medieval gold inlaid drop cap, maybe even built from a PD image of the real things, etc. That ran into accessibility problems however. I could still do it, but I'd need to apply a dropCapA or dropCapT class to the first letter, then target and replace it, with the appropriate letter image. It would also look tacky if I don't remove the text letter, so I'd need an extra span wrapped around it (this is in addition to the span with the dropCap class) so now I've got two inserted spans wrapped around one letter And I'm using Fahrner Image Replacement on text and need to deal the accessibility issues... Yuck, what a mess.

So I started looking at option two - swapping the font characteristics on the first letter using a CSS pseudo element, :first-letter. This requires no extraneous markup of any kind, so it's much more standards friendly, and I'm not going to stress if IE6 users don't get the drop cap. I'm willing to call it a progressive enhancement especially when doing so avoids all of the accessibility issues of the alternatives. I had to wrap an id="intro" div around my introduction, but I probably needed to do that anyway. Then I just started playing. We'll take a closer look at the code later since it may very well change.

Typography Design

Cursive fonts

Support for cursive fonts is positively awful. Comic Sans MS is usually cited as the classic example of a cursive font. Have you seen it??? Cursive? Are you kidding me? Cursive fonts vary from the Comic Sans MS end of the spectrum (slightly curvy block letters), to elegant, lacy Cinderella style cursive script, to block letters with a beautiful (or messy) handwritten feel. That's a lot of ground, so I've no intention of taking pot luck. You will not find the cursive generic family backing up any of my font selections. I intend to use the much more reliable "serif" backup instead. These are a list of slanted italic fonts that are fairly widespread and look nice. They convey the sort of old-fashioned feel I want and have a more handwritten look than any of the other widely supported fonts (like Comic Sans MS. Seriously!?) The exceptions are Castellar and Old English Text MT which have the feel of fancy old-fashioned printing type, both of which I think are gorgeous.

  • Castellar -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Castellar looks like a monument inscription, as it substitutes capital letters for the lowercase letters. Lots of variation in stroke widths, characterized by huge widths with an elegant single pixel wide gap near one edge. Breaks up a little, but not bad for a decorative font. Normal leading and normal-height glyphs, but wide.
  • Lucida Calligraphy -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Lucida Calligraphy breaks up a little but even at small fonts remains unusually readable for a cursive font. Some variation in stroke width, but generally thicker strokes. Normal leading, but wider glyphs.
  • Monotype Corsiva -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Monotype Corsiva is a bold italic style with calligraphic serifs. It breaks up a little but remains pretty readable. Some variation in stroke width, but generally thicker strokes. Small leading and glyphs.
  • Apple Chancery -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Mac font similar to Monotype Corsiva.
  • Old English Text MT -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Old English Text MT is an old-fashioned, elaborately decorated font. I believe it's modeled on a fancy Victorian era style, but it's far and away the font that most closely resembles a drop cap in Medieval manuscripts. It's early, but I'm virtually certain that if I choose the more accessible font option (as opposed to image replacement) to do drop caps, this will be my preferred font. It breaks up a little but remains remarkably readable at all sizes for a font that's this decorative. Huge variation in stroke width from thick bars and curves to fine lines and serifs. Normal leading and very slightly narrower glyphs (this results in a pretty large display which is what makes it so readable despite the flourishes – not that I can imagine this for body copy).
  • Script MT Bold -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Script MT Bold lives up to it's name. It breaks up a little at small size, but larger it's a very attractive bold script that holds up well. Varies in stroke width, but generally thick strokes. Normal leading, but narrow glyphs (this may be why it's pretty unreadable at small font sizes).
  • "Tempus Sans ITC" -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Tempus Sans ITC is a clean, pretty readable font. Not a script, each letter stands alone but has a deceptively handwritten shape. The one downside is the unusally handwritten quality. A few loops being too small for easy reading, and unfortunately the most common letter, e, is the worst offender. It also has plays with apparent ex heights for several letters; this increases the natural look, but makes it significantly difficult to read across the line. Medium stroke width, with subtle variation. Normal leading, but narrower glyphs.

Fantasy fonts

I was hoping to find some forward looking fonts in this section, but there really isn't anything available for use that I can depend on being available. I may wind up resorting to the clean standard computer fonts that convey a modern vs. old-fashioned look. There's nothing "cutting edge" in the repertoire of fonts that a visitor might have available; I'm very disappointed.

  • Broadway -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Broadway is an homage to the strong geometric fonts used to publicize Broadway shows in posters and playbills. It has two stroke widths, fat half-filled letters and fine single-pixel strokes. It might make a strong sans-serif drop cap or possibly headings but is far too distracting for body text. Normal leading, but wider glyphs noted for an absence of descenders.

Monospace fonts

Monospace fonts are specialty, and give a very distinctive old fashioned computer look. I use it for code samples, but not much else.

  • "Courier New" -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Standard font: ships with both PCs and Macs. Courier New has that distinctive computer look of all monospace fonts, and the letter forms are created to blend with that old-fashioned style rather than fight it. However, it's a new font designed to look good for the modern reading public and is much less pixelated on new monitors than the older Courier. Even, thin stroke widths with small, clean serifs. Slightly shorter leading, but smaller glyphs.
  • Courier -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Standard font: ships with Macs. An early version of Courier New.

Sans serif fonts

I dislike sans serif fonts personally. Partly for the extreme simplicity, I like the more decorative touch that serifs add. Also, it's unfair, but so many designers used sans serif fonts because they it allows them to crank type down to 10px and below, without looking awful. ...though you need a magnifying glass to tell. That's ridiculous practice, and unfortunately sans serif faults are guilty by association in my head. I'm trying to get over that. On the other hand, the major extended Unicode fonts are all sans serif fonts as well. If they are installed, they're likely to be only fonts available to do certain jobs and would be used anyway. However, as an ardent supporter of Unicode who desires better support for rare languages, I want to give those fonts some extra love. If font designers are excellent enough to build them, I prefer to cite them specifically, and as highly as I can.

Note: For the Unicode fonts (and the universal fonts like Arial) I've included Hebrew and Arabic alphabets to test those encodings. It's the first time I've ever worked with right to left (rtl) languages before. Here are some notes for those interested in the process – including me when I come back in a month or two. When implementing rtl encodings, internationalization (i18n) and localization (l10n) become issues, though not as much as I expected. First, the language of the text should be specified. Simply locate the appropriate language code (like "en" for English) and include it in the xml:lang and lang attributes. These attributes are applied to a container element (block or inline, whichever is appropriate) that wraps the content. This is only necessary when you change language because the base language is defined in the <html> tag. In this case I've included alphabets, and an alphabet does not have an intrinsic language. An alphabet is a script which is used to write a language, but the same script can be used to write many real languages. (the Latin alphabet is used to write English, French, Spanish, German, and many others) It can also be used for imaginary languages. ("Lumos" in Harry Potter is written in the Latin alphabet but it is clearly not intended to be a word from any known language, but J. K. Rowling's language of magic) These alphabets therefore should not properly take a language code so I have not used one.

Also, text direction for Hebrew and Arabic encodings run right to left, which is backwards for what I'm used to. This is my first opportunity to apply the attribute dir="rtl" so I read up on everything I could find about it. Apply the dir attribute to whatever convenient block or inline element encloses the text whenever you need to change text direction, probably the same one which defines the language. Note that like language, this is only necessary when changing the base direction of the webpage which is defined in the <html> tag. (for left to right languages no dir attribute is used because ltr is the default direction, but dir="rtl" is necessary to include in the <html> tag for right to left languages) In my case however, this turned out to be unnecessary. In browsers, most Unicode encodings themselves are strongly typed as ltr or rtl and will automatically follow a their preferred direction. Best practices dictate that I probably should have wrapped each alphabet in a <span> and specified the direction. However, in this case I was so surprised by the strong typing that I wanted to show it off. I've added "no" markup to make the Hebrew and Arabic alphabets run from left to right, yet your browser is automatically doing all the necessary work. Stunning! (I will never do it like this again though, and you shouldn't either.)

  • Arial -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    Standard font: ships with Macs and PCs. Typically the ultimate default font of the sans serif family. It's hard to argue with how legible Arial looks on screen, a nice clean, attractive font. The more I spend time looking at fonts in detail, the more I appreciate why the universally available fonts were selected. Even, thin stroke widths. At small sizes in particular the font barely breaks up in a browser, and the thin strokes, which I dislike in general are the reason it looks "straight" instead of pixelated. Normal leading, and nice large glyphs.
  • "Arial Unicode MS" -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    As you'd expect Arial Unicode MS looks very similar to Arial. The thin strokes, simple letters, it's a good choice. Normal leading, but the glyphs are slightly shorter and wider, giving them a slightly squashed appearance. Includes one of the most extended catalogs of Unicode characters available in any font; other fonts aimed at target sets of glyphs will almost certainly be more accurate and attractive, but Arial Unicode MS is an excellent fallback font to ensure that you have at least one glyph for virtually any Unicode character.
  • "Lucida Sans Unicode" -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    Standard font: ships with all PCs since Win98. Lucida Sans Unicode is a variation on Arial. At default settings, most browsers display it as Arial with the primary stroke bolded. This provides a more interesting letter, but it breaks up just a little. Normal leading, but the glyphs are slightly wider because one stroke is bold. Includes extended Unicode characters not available in most fonts; a good fallback font.
  • "Lucida Grande" -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    Standard font: ships with Mac OS X. An extended version of Lucida Sans Unicode.
  • Verdana -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    Standard font: ships with PCs and Macs. Verdana is basically a bold variation of Arial with the letters wider as a result. At small font sizes it reduces to one pixel width strokes, giving it a clean but generously large look. Normal leading, but the glyphs are wider.

Serif fonts

Serif fonts are generally my favorite for body copy. Some designers dislike them because the detailed serifs break down at very low font sizes. If you are using font sizes so small that serifs break up, you have much bigger readability problems than bad looking serifs.

  • Baskerville Old Face -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Baskerville Old Face has some beautiful letterforms similar to classic printing, but breaks up a little onscreen at all sizes. Varies from large to fine stroke width but generally a thicker bold look. Normal leading but lowercase glyphs are distinctly smaller.
  • Calisto MT -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Calisto MT is a clean readable serif at all sizes. Shares similarities with the popular serif fonts but has rounder forms and unusually strong geometric serifs. Varies from large to medium stroke width creating strong letterforms. Slightly smaller leading and glyphs, though good use of serifs helps maintain readability despite the reduced size.
  • Colona MT -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Colona MT is an nice readable serif font similar to the other popular serifs. Wide variation from bold to fine stroke widths, but very fluid. Smaller leading and glyph width, but significantly shorter. Scratch this. Colona/Colonna is a broken font by Monotype Corp. It needs to be referenced alternatively with one or two ns by different applications to display. It's unstable. The font described was an unknown fallback font, Colona itself isn't even a serif, but a fantasy font. [chroniclemaster1, 2009/09/09]
  • Copperplate Gothic Light -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Copperplate Gothic Light is monumental (small caps replace lowercase) and it emphasizes lines over curves. Small but distinct vertical or horizontal serifs distinguish this font and give it its characteristic look. Fairly even medium strokes modified with thinner serifs. Very slightly smaller leading with wider glyphs.
  • Elephant -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Elephant is a heavy geometric font that breaks up at small font sizes but looks fine when sized larger. Strokes are mostly very thick with very fine connectors. Normal leading with wider glyphs.
  • Engravers MT -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Engravers MT is an all capital font, very wide with huge triangular serifs. Short ultrafine connectors connect the massive strokes. Normal leading with very wide glyphs.
  • Garamond -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Nice clean letters at small size with relatively curvy serifs. Medium stroke width including one or two bolded strokes and fine serifs. Normal leading, but smaller glyphs.
  • Georgia -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    Standard font: ships with both PCs and Macs. Georgia looks nice and clean, and if not for the serifs, looks strikingly like Arial. Even, thin stroke widths with small, clean serifs. Slightly smaller leading and glyphs.
  • "Palatino Linotype" -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Standard font: ships with PCs. A beautifully clean serif font at all font sizes; an imitation of Renaissance Italian letterforms of the 16th century. Surprising variation between thick and thin stroke widths that scale down to clean single pixel strokes at small sizes. Normal leading and glyphs.
  • Palatino -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Standard font: ships with Macs. An earlier version of Palatino Linotype that lacks some of the glyphs of the newer version.
  • Sylfaen -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    Clean readable font with serifs so subtle it almost looks like a sans serif at small font sizes. Large stroke width with some variation especially the small serifs. Smaller leading and glyphs.
  • "Times New Roman" -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    Standard font: ships with PCs. Typically the ultimate default font of serif family. Wide variation in stroke widths that scale down to clean single pixel strokes at small font sizes, like Arial. Distincitive serifs, but unlike virtually all other fonts they scale down very nicely. Normal leading, but smaller glyphs. Includes a respectable set Unicode glyphs, and the only attractive set of Cyrillic, Hebrew, and Arabic alphabets among fonts not specifically tailored for those Unicode ranges.
  • Times -
    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
    the quick brown fox jumps over the lazy dog. ,/?!;':"-+=@#$%^&*()1234567890
    А а Б б В в Г г Д д Е е Ё ё Ж ж Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ъ ъ Ы ы Ю ю Я я
    א ב ג ד ה ו ז ח ט י כ ך ל מ ם נ ן ס ע פ ף צ ץ ק ר ש ת
    ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي ١٢٣٤٥٦٧٨٩٠
    Standard font: ships with Macs. A version of Times New Roman.
Skip to Main Points

Initial Conclusions

I love reading and research, it has the habit of turning up critical advice exactly when you need it. In reading The Zen of CSS Design I ran across Douglas Bowman's design "Golden Mean", where he used contrasting type faces to create visual tension. This will be critical when trying to mesh forward looking with old-fashioned fonts. Using one set of fonts is too homogenous. Hopefully it will be well chosen, but it's too much of a good thing. The use of forward and backward looking fonts is important for the design to create typographical texture.

Which brings up our big failure. Times New Roman and Arial are the universal fonts. The standard fonts includes a few more, however, even if you open up to include this entire list of widely to somewhat available fonts, there is nothing that could be considered truly forward looking. I'm now under the sad impression that a nice, clean, modern sans serif font is about as close as I'm going to get. This is going to push the need for green, forward looking imagery back to the forefront of the final phase of development. So the imagery I'd hoped had been pretty well settled, is once again an open issue.

My drop cap is an important touch that I worked out for this page. I'll need to play around with that, but the results are coming out pretty well at this point using a standards based approach. I don't believe the extra attractiveness I'd get out of an image would make it worthwhile to meddle with the overhead of added markup and accessibility problems.

The backup fonts I've also pretty well settled on. I'm looking to create some really nice touches by choosing more detailed fonts, but the internet standards are what they are. For serif fonts I'm going to use Palatino Linotype as my first fallback (with the Mac font, Palatino), and back that up with Times New Roman (with the Mac font, Times); if even those fail I'll use a generic serif value. For sans serif fonts I'm still wishy washy at the moment. I'm looking at Lucida Sans Unicode as a nice balance between Arial's slightly condensed look and Verdana's expanded letterforms. With the Mac font Lucida Grande, that may be my first fallback. However, Arial strikes such a beautiful balance between efficient use of space and nice big letters that dropping Lucida is an option I'm still mulling over. At the very least Arial (followed by Arial Unicode MS) will back up the Lucida fonts; if all those fail, I'll use a generic sans-serif value.

For all other font families, there are no reliable backups. The range of options among cursive and fantasy fonts is too wide to use the generic values cursive and fantasy. My plan is to break those instances down into backward and forward looking styles. For backward looking, Medieval styles, I'll use the fancier serif font backups (e.g. Palatino, Times) to convey the more decorative forms. For forward looking styles, I'll want to use the more modern sans serif backups. (e.g. Lucida, Arial) Now I just need to make some decisions about preferred fonts.

Skip to Main Points