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

[angelize]

More and more with @font face and Google fonts typography is becoming an important part of website designs. What makes for good typography in a webpage? What doesn't? What are your thoughts?

[gwpriester]

Type that is designed to be read.

I am not as concerned about using Garamond Pro Light Italic as I am making sure that visitors can read the text. And I am not all that sure that most visitors expect a typographic tour de force.

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.

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.

[steve.ledger]

More and more with @font face and Google fonts typography is becoming an important part of website designs.

I've always understood that Typography is a term for print rather than web site viewing.

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

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.