COIN 65 - Homework 4

Font and Text Options: Font Properties

Tested with:

"I often say that fonts are to type what voice is to speech. Typeface, font weight, italic, and other typographic effects not only help designers to guide a visitor's eye around the page, but they also add a layer of meaning."
Jason Cranford Teague in CSS3: Visual QuickStart Guide, Fifth Edition

The baseline example is set in a <p> tag with no style.
The quick brown fox jumps over the lazy dog.

Generic

serif: The quick brown fox jumps over the lazy dog.

sans-serif: The quick brown fox jumps over the lazy dog.

monospace: The quick brown fox jumps over the lazy dog.

fantasy: The quick brown fox jumps over the lazy dog.

cursive: The quick brown fox jumps over the lazy dog.

• It looks like all browsers apart from IE defaulted to 'Times New Roman' for Serif. I can't work out what IE is using (possibly MS Mincho).
• All browsers used 'Arial' for Sans-serif.
• There's a big difference across the browsers WRT Fantasy. IE is the only one remotely suggestive of "fantasy" (defaulting to 'Blackadder ITC'). Chrome uses 'Impact'. Firefox, Safari and Opera are using 'Arial' (really!!!).
• Opera used 'Consolas' for Monospace, the others used some form of 'Courier'.
• IE used some version of 'Lucida' (maybe Sans or Sans Unicode) for Cursive. All others defaulted to Comic Sans MS (which is a really horrible font IMHO). Either way, they're all pretty far off what I think of as a "cursive" font.

Common Fonts

georgia: The quick brown fox jumps over the lazy dog.

Arial Black The quick brown fox jumps over the lazy dog.

garamond: The quick brown fox jumps over the lazy dog.

verdana: The quick brown fox jumps over the lazy dog.

Trebuchet MS: The quick brown fox jumps over the lazy dog.

Non-existent font: The quick brown fox jumps over the lazy dog.

• I can't see any difference in the rendering of common fonts between the browsers, all look identical.
• Verdana and Tresbuchet MS are remarkably similar; the only difference I can see between them is g and l.
• When a non-existent font is specified, the browsers default to 'Times New Roman' - the navy blazer of fonts (a bit boring, but always presentable).

Keyword Sizing

xx-small: The quick brown fox jumps over the lazy dog.

x-small: The quick brown fox jumps over the lazy dog.

small: The quick brown fox jumps over the lazy dog.

medium: The quick brown fox jumps over the lazy dog.

large: The quick brown fox jumps over the lazy dog.

x-large: The quick brown fox jumps over the lazy dog.

xx-large: The quick brown fox jumps over the lazy dog.

• Computed values font size for Chrome, Firefox and Opera - xx-small:9px; x-small:10px, small:13px, medium:16px, large:18px, x-large:24px, xx-large:32px

Absolute Sizing

12 pixels: The quick brown fox jumps over the lazy dog.

12 points: The quick brown fox jumps over the lazy dog.

2 picas: The quick brown fox jumps over the lazy dog.

12 mms: The quick brown fox jumps over the lazy dog.

2 cms: The quick brown fox jumps over the lazy dog.

• No visible difference between browsers

Half-inch Eye

Logical Half-Inch versus Actual-Half Inch (...there's a dirty joke there somewhere)

I approached this excercise a little backwards. Not having read all the instructions (as usual) and also having just downloaded my screen ruler, I started by experimenting with what setting for pixel size would give an actual half-inch size eye, and then continued to use the ruler to calculate the picas, points etc. When I finally put in the CSS value font-size = .5in, that character was much smaller than all the others - which was a surprise to me. That started me down a road in an effort to understand what was going on and I learned more than I want to know about WXGA aspect ratio, dpi, monitors and a host of other stuff I've already forgotten. Richard Mason's article The CSS Inch finally cleared it up for me. So here are my results....

Actual Half-Inch

I I I I I

• Actual 0.5 inches = 1.55 cms = 15.5 mms = 44 pt = 58 px = 3.6picas

Logical Half-Inch

I I I I I I

• Logical 0.5 inches on my monitor= 1.27 cms = 12.7 mms = 36 pt = 48 px = 3 picas

Styles and Variants

• CSS font-style: italic = em HTML tag
• CSS font-weight: bold = strong HTML tag