3 - 3. Painting with Typography

Main Points

• Public Domain Fonts! A measure of vindication
• Main Body Content and Drop Cap Setting the stage for everything else.
• Headings and Footer Choosing fonts for the rest of the page.

Check out our Drop Cap! It only affects the first list or paragraph on the page.

OK, now it's time to get down to picking and using our font options. I was surprised, just how much of this was simply implementation. There really wasn't a whole lot of decision making, there really wasn't a whole lot of artistic effort. The necessities of choosing fonts that forwarded the vision of the website combined with good usability design, usually led to the font or two that needed to be selected. Then finding fallback fonts was a matter of matching those requirements and limiting the options further to fonts with a similar ex height to the first choice.

We've also found an Amazing resource, but I'm getting ahead of myself. Take a look! Take a look!

Public Domain Fonts!

OK, they're problematic so don't get too excited, but I have run across a small selection of public domain fonts! I couldn't find anything looking specifically for public domain fonts, free fonts, or anything you would expect. However, looking for Unicode fonts that will support the extended character encodings for rare languages, I located George Douros's website which carries several font packs that have characters (glyphs) not only for early pre-alphabetic Greek scripts, Egyptian hieroglyphs, and Akkadian cunieform, but also standard Latin alphabets. Further, they're public domain. So for images, Flash, and other items that I present on my website, I now have the ability to use these fonts freely. Yea!

Now without anti-aliasing they all break up on screen which means it would be difficult to use them professionally in a stylesheet. Add to this, the fact that probably only one web visitor in a million would have these fonts installed. However, when I'm creating images or applying sIFR, I now have seven available fonts. While some share similarities, there are three fonts (two sans serif and a cursive) that might make good heading style text and two (a cursive and a serif) that would look OK for body copy. Not that I'd use images or sIFR for body copy, but I can replicate that more informal look.

I'm going to take this back. Now that I've had a chance to sit down there are a couple places where I've worked in the public domain fonts. George Douros has a fantastic resource that I recommend to everyone, so I'm going to put my money where my mouth is and set a couple of his fonts in my stylesheets. Download the font files (.otf) and check it out! .otf files are open type fonts, one of the major font standards. (You can also download the .pdf files for fun, to see a catalog of the glyphs and their Unicode encodings, but only the .otf files are required to install the fonts). If you've never installed new fonts before, it's easy.

1. Download the new fonts to your desktop (or some other location that's easy to find).
2. Open your fonts folder. (For Windows XP (& 2000) users, I know this is Start > Control Panel > Fonts)
3. Then install the font (File > Install new font, then use the explorer that appears to locate where you saved the new fonts. Make sure the checkbox "Copy fonts to Fonts folder" is checked. Click "Select All" and "OK".)

Once the fonts are installed, you can delete the downloaded files from your Desktop. You may need to restart your computer, but the fonts should automatically be used by your browser. That's all there is to it.

[chroniclemaster1, 2009/09/09]

• Aegean (sans-serif) - Aegean looks like a monument inscription, as it substitutes small caps for the lowercase letters. Even, thin stroke widths. Normal leading, but smaller glyphs. Includes thousands of glyphs from scripts of the greater Aegean area.
• Aegyptus (cursive) - Aegyptus is a beautiful font, but it breaks down in a web browser - very blocky. Latin alphabet glyphs have subtle serifs, and varying stroke widths that create a calligraphic handwritten style. Normal leading, but slightly smaller glyphs. Includes 7000 glyphs for Egyptian hieroglyphics.
• Akkadian (sans-serif) - Akkadian is monumental (small caps replace lowercase), but the strokes are thin enough that they break up in a web browser. Huge leading, and small glyphs. Includes glyphs for Sumerian / Akkadian cuneiform and cuneiform numbers.
• Alexander (cursive) - Alexander is a variation on Aegyptus, though it doesn't break down as badly in a web browser. Latin alphabet glyphs have subtle serifs, and subtle variations in stroke widths that look like an italic handwritten style. Normal leading and glyphs.
• Analecta (cursive) - Analecta is monumental (small caps replace lowercase), but it's very readable, as body copy it reads similar to a sans serif though the classic sans serif fonts are easier. It has a distinctively Medieval era hand written feel. Stroke widths are thick with little variation. Normal leading, but short and wide glyphs.
• Musical Symbols (cursive) - Musical Symbols is a variation on Aegyptus. Latin alphabet glyphs have subtle serifs, and subtle variations in stroke widths that look like an italic handwritten style. Small leading and even smaller glyphs render this all but unreadable at normal size and if increased it breaks up like Aegyptus.
• Unicode Symbols (serif) - Unicode Symbols is a variation on modern computer style serifs which have finer details that break in a web browser. Latin alphabet glyphs have subtle serifs, and subtle variations in stroke widths that look like an italic handwritten style. Normal leading but slightly smaller glyphs.

Main Body Content and Drop Cap

If typography were oil painting, setting the body copy is like underpainting; it's where you start by creating a very basic sense of shape and form. Everything else will be the overpainting that adds in the typographical detail and spice. The body copy was very difficult to pick out because I chose early to go with a serif font and I had a lot of them to go through. To challenge my assumptions, I tried some sans serif fonts, and Arial was definitely readable, but it gave the page too modern a look. I want to inject a forward looking concept but with the old-fashioned imagery, using sans serif for body copy against the scroll was like putting complimentary colors next to one another. Georgia fell out for the same reason, because it's such a simple, modern looking font. Palatino Linotype had some of my favorite letter forms, but was too small for the body copy; the fallback fonts will necessarily include Times New Roman and their ex heights are too different. (I may play with font-size-adjust, but that will be for another day. Cross-browser support is questionable so that's not going to be a small project; it'll require extensive testing). Baskerville Old Face suffered the same problem. I still go back and forth on this; it doesn't pixelate (at least not badly) and some of the characters have a really beautiful look to them, but the ex height was just too far off.

So I'm using the declaration, font-family: "Calisto MT", "Times New Roman", Times, serif; to specify my general fonts for the page and using a font-size of 1.05em to increase the size on the body copy to a more readable Arialish size. For some variation, I tried Douglas Bowman's technique of using the same typeface but shifting the font style to italic for the boxout text. It provides a little visual differentiation to emphasize the logical difference between content and navigation, just like his design, "Golden Mean", in The Zen of CSS Design. I tried a lot other variations: resetting a whole new font, using font-variant or font-weight, playing with the font size. Each alternative was too extreme; they failed to create a unified design, drew focus away from the content, or challenged readability. I kept reacting to each alternative, "No, I need to achieve an effect closer to 'Golden Mean'" until I'd ruled out everything except italic, just like "Golden Mean". Bowman used the Medieval looking font, Morpheus, for his design and it gives his work a similarly old fashioned quality that my scroll imagery achieves. Body content requires normal type (no italic, no bold, no nothing) for maximum readability, and within the context of an old-fashioned design the suggestion of handwriting provided by the italic font-style was the only way to simultaneously look organic in the design, keep focus on the content, and distinguish the inpage navigation from the body copy. Doing serious typography for the first time, this was just one of many times I was surprised about how really little choice there was, but frequently it felt like "finding" the correct font rather than "choosing" a good font.

Drop Cap

My fanciest piece of body content, the drop cap has also come out nicely and is scaling beautifully. I'd originally wanted to follow the manuscripts in creating a fancy drop cap with gold leaf, etc. I looked at creating images for each letter, however, a CSS based solution is more standards friendly and is producing results that are nearly as good. Given the insoluble accessibility issues with replacing text with images (FIR, Leahy / Langridge, et. al.), there are too many drawbacks to doing so when the CSS is turning out this great. So I chose a series of fonts, ordered them from most to least fancy, and cranked up the font size. Then used a border and applied a gold leaf background image. The gold is a background instead of the letter itself like I preferred, this was the primary concession I made using CSS instead of an image. But this background still really sets the drop cap off, and the technical downsides of the alternatives make this the best solution. Since the gold leaf is a nice light color like the paper, I'm not even applying a backup color; I'd rather have the paper shine through if the gold leaf image fails.

I also added padding so the border isn't too cozy with the drop cap. There's an extra vertical padding I can't get rid of in Opera, but it doesn't look bad, so I'm gonna let it ride. In a surprise, it turns out Firefox 2.0 is the oddball here. IE7 mimics this bug (IE6 doesn't even support our drop cap, and I'm not losing any sleep over it). However, Opera, FF3, and IE8 all agree that there is about 1em of padding that's automatically applied above and below the drop cap. Therefore, I've changed the declaration to padding: 2px 0.15em; The top-bottom padding (2px) now provides a small space between the letter and the border in FF2 and IE7, while modern browsers are affected as little as possible. The left-right padding (0.15em) creates an square border in modern browsers, and creates a rectangular effect for FF2 & IE7 – the rectangle is not ideal but is the best fallback option available in these non-compliant browsers. [chroniclemaster1, 2009/08/23]

The selectors I'd adjusted on the previous page, by adding a div with id="intro". I'd hoped to just apply the :first-letter pseudo element to it, but that produced no results. But it worked fine once I got more specific. :first-child identifies only the first paragraph or list in the div (otherwise all paragraphs in the intro wind up with one) while first-letter targets the inital letter in the element. So as long as there is a paragraph or a list in the front of the introduction, this will works perfectly, and that should cover 99% of cases. I've explored some of the alternatives like initial innerHTML of the #intro itself, and the results look OK so I'm going to go with this. And since everything is defined in em, it scales up and down beautifully.

The links were easier at this point. Being interactive digital ink on the old-fashioned page, it makes sense that here I'd use something more modern. Lacking good forward looking alternatives, I started with Arial and tried to see if I could get anything better. I applied Lucida Sans Unicode which by default is being rendered as "Arial with one stroke in bold" that gives it a little more weight and style. So, font-family: "Lucida Sans Unicode", Arial, "Arial Unicode MS", sans-serif; is the declaration I'm using. On the one hand, this looks nice and big around the page, but in the body copy specifically it stands out a bit too much, so on the mainBody div I applied a 0.9em font-size to give the body copy better unity. The italics in the main points box have no container elements, so the links became italic at the same time. However, by specifying the links in the mainBody div with the selector, #mainBody a, I could add a font-style: normal; declaration to remove the italics for the main points links.

Keeping the look of the links consistent is a crucial visability cue for the site's usability. That's why I removed the italics from the links in main points. It's also why I'm using the same sans serif fonts for the navigation; they're all links. I'm not resetting the font-size so that navigation stands out just a little bit extra. The forward and back links have the same look, of course, because the workingLinks and holdingLinks already take unusual colors. The accompanying text is also important, and yet that stands in the normal serif font since "jump back to" isn't clickable. If it were, the links wouldn't alphabetize by topic in accessible devices; links need to start with their topic (or at least the first letter of their topic). The menus are all links and therefore take the same fonts, so do the recommended links and the accessible page links. The clock is digital ink so it seems most appropriate to use the same fonts. However, it's not navigation so I've turned the font-size down to 0.9em so that it doesn't stand out as much; it's a nice touch to the design but it's decorative and shouldn't pull focus from the content. Ironically, it became hard to read so after experimenting, I found that the effect was best achieved by keeping the lower font size and making the text bold.

Headings and Footer

The headings needed to stand out. Here was finally a chance to really get a little creative. Everything I've done so far, except the drop cap, has pretty much been dictated by user interface (UI) design practices. The h1 heading is the page title and needs to stand out. I chose to do it in a script font and settled on one of the public domain options that looks really good on the web, Analecta, which is based on Medieval ecclesiastical fonts. If available, and I recommend that you download the public domain Unicode fonts this gives an h1 heading that looks authentically written by a Medieval monk. In the likely case, that it's unavailable, I chose a couple of more available but less authentic script fonts, Lucida Calligraphy (based on Renaissance italics) and Script MT Bold (a nice readable flowing script). The fact that these are not as readable than standard fonts is less important for a heading which people will spend more time with. The extra tenth of a second to facilitate comprehension isn't worth the loss to the attractiveness or differentiation in a heading; whereas that tenth of a second lost on every phrase of body copy would be intolerable. However, if none of these script fonts are available, the stylesheet falls back to the fanciest available standard fonts, Times New Roman, Times, and the generic family, serif. To keep the headings in the body copy clear and identifiable, I'm using the same font declaration to set the font family for all h1-h6 tags for content. h2 headings are decreased from the 2.5em size of the h1, to 2em and every heading except the h1 has a margin-bottom: -0.5em; declaration to clearly identify that it's attached to the block of text beneath it.

Reading the h1 leads the eye across the page so I wanted a nice bold font for the Main Points h2 so that people's natural eye motion across the page will carry them directly to it. Main Points is my intrapage navigation and mini page summary. That way people can easily decide if there's someplace they're specifically going on the page, and leading people directly to Main Points facilitates that. If not, their eye will be caught by the drop cap when their scanning returns to the left, this helps identify the beginning of the content like all drop caps. For "Main Points", I chose two very distinctive old-fashioned printing style fonts, Old English Text MT and Castellar. Rather than the scripting which characterizes the h1 tags, these fonts look like something out of an old-fashioned printing press. While unified thematically with the design, the difference provides additional texture and helps individualize the sections. In contrast to the serif fonts backing up the content headings, I chose sans serif fonts to backup the main points h2: Lucida Unicode MS, Arial, and the generic family, sans-serif.

This is a level three heading

I'm retaining a technique I've used previously. It's difficult to distinguish headings from one another if they're not in view together. Therefore, while I'm adjusting the font size, I want it to be completely clear what level heading you're looking at and it's relevant importance even if no other heading is visible. So my odd headings (h1, h3, h5) are centered and my even headings are left aligned, except for h6 which is centered because it's so close to regular text that it could be confused with a short paragraph in bold. The h1 heading is a nice fat 2.5em size and the h2 is left aligned and 2em. Level three is where it starts to get tricky, so it's not only centered but still a tall 1.8em font size.

This is a level four heading

Level four headings aren't something I'm worried about getting confused with h2s even though they're both left aligned. h4s are 1.5em tall and look smaller, but I need to make it seem visually superior to h5s without being so big that it looks competing with h3s. In most of the fonts I use for h4s, it's pretty clear visually, and where it's not it's the h5s that could be construed as superior, so I included underline and overline to create the look of script between bars which one sometimes finds in ancient writing. It's a very interesting look that I like a lot; I was so pleased with it that I haven't changed the h4 for the subjects section or the form. They're physically separated from the body copy, so differentiation is not a serious issue and it looks good.

This is a level five heading

The h5s are in good shape. With the bars around the h4s, these can be nice and bold headings to give some wiggle room still for the h6s. Plus I rarely get down to h5 and h6 anyway so they're relatively rare on the website. h5 is cranked down to 1.2em; only barely larger than body copy, but I've used text transform in the CSS to render h5s all in caps; it's also centered.

This is a level six heading

The h6s are centered to avoid confusion with body copy, and they're in the same font as all other main content headings. I tried turning down the font size, but it was not workable, especially if the headings are rendered in fallback font way down the list like Times New Roman which the body copy may also be in. This was a key reason I put the h5s all in caps, I was able to leave the font size for the h6s at 1.2em and yet the distinction between h5s and h6s are clear.

The Footer

For the page info section, I wanted to clearly delineate the titles from the people doing them. At the same time I wanted to distinguish that section from the subjects which are almost merged with them. The names were easy since I wanted them to look signed, so I used my set of script fonts (Analecta, etc.) The h4 heading on subjects looked nice so I left it in script as well. The subjects heading is followed by links (to search by subject) and the links are in my sans serif set (Lucida Sans Unicode, etc.) Therefore, I didn't want to use a sans serif for the page info titles. So I can't use sans serif, I can't use script, so I have to use serif, except the script set with the names of the people doing the titles may default back to serif. *sigh* With the fonts being so close, I didn't play around; I upped the font size to 1.1em and made them bold. Even if they're rendered in the same font, that should clearly distinguish them.

I also kept the h4 styling for the form, so I wanted to differentiate the h2 of the form a little. I went with the same set of old-fashioned printing characters used for "Main Points", so ideally people will see Old English Text MT or Castellar. The labels for the form should be the most plain so I simply bolded them. The legend and the .NET controlled span, I set in the script fonts, upped the font size to 1.2em, and added some padding to give them a little separation and emphasize them.

Subjects:

• Core,
• Core