Typography on the web, what's good what's not?

[Barbara B]

Hi GaryP,

Type that is as long as the width of this text box but the same size is harder to read at this wide a measure as this text is at this size.

I'm not getting what you are talking about here. Text boxes on TG are not a set size, they are fluid and are about 85% of the width of your browser window.

Are you talking about the typographic principles and rules of thumb that related to font size and line length?

The default body text size (the size a browser will use for paragraph text unless told otherwise) for browsers is 16px. The recommended line length for optimal readability is usually given as being somewhere between 45 and 72 characters, with font size, font choice, contrast between the type and the background and the line spacing or leading being major factors that affect readability.

"With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line. Thus when the text size is changed, so the measure changes. Source: The Elements of Typographic Style Applied to the Web"

However recent studies of reading speed and comprehension when reading online news articles recommend 95 characters per line.

So I think that it basically comes back to the designer to specify fonts, line spacing and line lengths that best suit the content, the audience and the overall look or color of the online page, just as it does for print.

Personally, for large block of single column of body text on a page , I prefer higher contrast text (don't like type set at #444 or lighter as is trendy now) at 14 to 16px and leading or line spacing set to around 1.3 to 1.5em and line lengths of between 75 and 90. It is easier on my bi-focalish eyes and as the population as a whole ages large sized, high contrast body copy becomes more and more appreciated.

[Barbara B]

As far as using @fontface to load fonts for a web page, I believe it is a very useful tool in a designers toolbox. And as with all tools, it can be used with skill and precision, or ham-handedly to poor and amateurish effect.

Literally millions of sites small (The Xara Xone which serves them locally) and large (The Boston Globe which is served by a CDN) use fontface for headlines and other special text without any performance problems.

These stunning and often award-winning sites wield the fontface tool creatively and effectively. And clean, award winning sites like MENDO or Boozy Cake Company even use fontface for body copy without ill effect.

If a concern about font face performance issues are holding you back, it's really no more of a concern today than loading large graphics, video, Flash, widgets or iframes (Facebook-like buttons, analytics, or adservers for example, can be horrible drags on page loads) page load is affected—and we all use them from time to time.