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

[mwenz]

Well, quite literally it is "writing on the surface" and so typography fits with display as well as print.

Frances, here's a link you may enjoy:
http://designmodo.com/typography-web-design/

Typography on the web still has many challenges that time will likely overcome. One day, gone will be headings in images only. I'm not too keen on using @fontface yet, though I have played around. I would like to see speed issues more equalized for people's connections, etc.

Take care, Mike

[angelize]

Gary: I agree readability is a top concern, because if your visitors find your site hard to read they aren't going to stick around.
Steve: I think Typography is becoming more prominent on the web, when you design a site how do the text and headings work to give the site a certain feel?
Mike: that link was very interesting, and the examples of sites that make good use of typography were inspiring. Thanks

[steve.ledger]

Steve: I think Typography is becoming more prominent on the web, when you design a site how do the text and headings work to give the site a certain feel?

I actually don't. In fact more than ever less is more and when you look at professionally designed sites you'll note that they do not have umpteen different fonts faces on every page. As Gary pointed out, "most visitors don't expect a typographic tour de force.", and this is spot on advice.
Of course, if your website is actually about fonts, then this is a different kettle of fish. But using other fonts for the body text, navbars and so on just because you can may not be a wise choice. But I do agree that we can (and do) choose a nice typeface relevant to the site for logos and banners.

[angelize]

I agree with what you are saying, too many fonts on one page is not in my opinion good typography. Good typography should be more about how you use fonts not about how many you use. By mixing say 2 or 3 fonts on a page if they are chosen well can make a good composition. Say you are doing a site for a restaurant and you have a nice script for the headings and then contrast that with a clean sans serif font for the body text and navbars you could still get creative with different weights, and sizes. Choosing fonts that play nice together is important too, contrast is good but not when they clash with each other.

[Gare]

The use of embedded fonts on a website is no more a tour de force for a visitor than an embedded Flash file. Think of where cutting edge sites were 3 years ago, and then project where they will be in another 3 years.

Color, plug-ins, choice of fonts, wrap-around text, all this stuff is window dressing—it can coax a visitor towards "the thing", but it's not "the thing", as Shakespeare wrote, "The play's the thing." If an effect is used well, appropriately, not gratuitously of for wont of a solid concept, then it can be like seasoning to a meal that's already good—and effect can enhance it.

If fancy fonts or pootsy Flash animations are the heart and soul of a website, they're the star and there is no real content to point to, then it's what we used to call in advertising "dancing baloney (bologna)".

All sizzle and no steak.

—Gary

[Gare]

Steve—

The fact that large corporate sites are telling their hired designers to go with a "Spartan Look", can be viewed as a copycat copying a copycat, Adobe started doing Minimalist and then someone else though it was trendy and followed their lead.

"Clean" is a "look"; professional...erm, well, yes as of 11am today, but aesthetics tend to follow a trend, unless one is a truly original power-broker in the field of web graphics. If you subscribe to the graphics newsletter LinkedIn offers members, they have a very good round-up of what's happening in all countries around the world with trendy design.

But when all's told, websites aren't all that different than other parcels for the dissemination of content, at least where design is concerned. We'd all be reading html if Marc Andreessen hadn't introduced the image tag in NetScape Navigator. Clearly we're not, and clearly we can deduce that people who surf like graphics and they're comfortable with website paradigms that imitate deliver forms they're familiar with, such as magazines and newspapers.

Bear with me here: the use of more than 2 or three fonts, fonts that have family members, is usually just bad design, whether it's online or on the printed page. So I'd like to discourage creative people from using every font on their system in a design as a general rule, not exclusively to using fontface. And as a general rule, a truly experienced design could indeed use, say 13 different fonts in a design and it could look swell. Rules are meant to be broken, but only those who have a profound understanding of rules can break them with beauty and coherence.

The thing I appreciate about fontface is that let's be real—everyone and their sister has used a bitmap of a font not supported in navigators to get it there for whatever reason. And this blows accessibility, Google won't search the page for that word, and fontface is a really good and friendly alternative if you have to use a font outside of the given 13 or so all browser support.

My Best,

Gary

[Gare]

I'm not too keen on using @fontface yet, though I have played around. I would like to see speed issues more equalized for people's connections, etc.

Take care, Mike

I can't offer any empirical numbers on a website that uses embedded fonts versus the same website that doesn't use fontface, but realistically, a site that's "clean" of plug-ins and preloads has to load and run faster than an "encumbered" website, right?

So it begs that a site that does use fontface, does so wisely and with meaning.

The USA is behind just about all the European countries with bandwidth, but the trend is definitely toward speed, which somewhat alleviates preload stuff, and consider this: Google is perhaps the largest company that stands the most to lose when a web page doesn't load quickly. You can't search what you can't load, right? And yet the largest proponent of fontface is...Google.

-g-

[mwenz]

I would argue that to Google, that within reason it is indiscriminate about the speed of page loads. Page loads do matter to ranking somewhat, but readable content will always trump page load speed. That is not to say pages that load slow due to construction techniques are not penalized, they are. But within G's speed consideration metrics, a page isn't unduly penalized because a site with generally similar content loads faster.

I suspect that Google doesn't penalize sites using font-face. Simply because as you say, they are encouraging its use, so I doubt the overhead matters to Google. (Again, within reason.)

@font-face is a good technology. If for no other reason that once it becomes more wide-spread all those sites out there are ripe for make-overs. Which is good for those who do such work. And from my perspective, using font-face does enhance a site. Like with print, I have seen some people go wild because they can. Which is no different than early DTP.

Take care, Mike

[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.