Help on Information page typography

I am currently working on a web application that handles a lot of blocks of information that need to be displayed to users, ranging from an instruction manual to a cooking recipe.

A few years ago I would have been happy to build a basic liquid layout and ramp-up the size on a typical readable font like Trebuchet MS or Arial, but with web fonts becoming increasingly popular with web users I am considering implementing a new font for users on a clean background. I’ve had a quick look at the Google Font Directory and have found some great fonts that could look nice.

As this web application will be displaying very large chunks of information I want to make reading this information as easy as possible, with the potential to revert back for users that are using dated browsers. The content itself will be practically the only thing on the page, much like when reading a MS Word document.

Has anyone implemented web fonts? Do you prefer the larger selection of fonts or prefer old-school Arial/Trebuchet/Verdana? Out of the available fonts on the Internet that can be implemented using CSS what would look best on a solely text-heavy web page?

Is it important to have a different font? Having the user download a font to view your page might not be a problem for broadband users, but for users with slow connections, it can significantly slow down the page.

Arial, Trebuchet MS and Verdana are all excellent fonts in my oppinion, though beware that Linux users might not have them installed.

Not necessarily, but with the abundance of royalty-free fonts available for use on the web there may be a better solution out there. If the fonts are available it’d be nice to experiment a bit to get the best looking typeface for an information-heavy page.

Also, would it really take that long for a font to be downloaded on a slower connection? Surely you would have a fallback like Arial either way?

Isn’t this one of the advantages for using web fonts?

Linux users I think usually have the Arial similar FreeSans and the Verdana similar Sans on their system (for the latter only capital “I” and “J” “j” differ iirc).

Best looking, or most readable?

Also, would it really take that long for a font to be downloaded on a slower connection? Surely you would have a fallback like Arial either way?

A 250 Kb font on a 56 K connection will slow down the page with 35 seconds, under optimum conditions (so probably something like 45-60 seconds in real life, considering lag and overhead). The fallback font wouldn’t help with the connection speed,

Isn’t this one of the advantages for using web fonts?

True. But I don’t think web fonts are available for Internet Explorer 6 users, which is still a larger minority than Linux users.

This is the issue I have with many pages on the Internet today that work with lots of information. As my page is really nothing more than a pure chunk of content with headings I want it to be laid out almost like a PDF document, with a large, clear font that people could read with ease when sat backwards in their chair.

At the moment I’m toying with Georgia for the headings with the main content being Helvetica at around 18px. However, it’d be nice to know if anyone had used web fonts to bring a better experience with some newer fonts, something that improves readability and looks original.

It worries me that broadband isn’t the norm nowadays. To be honest I think we’ll probably just give users the choice of high-res and low-res as the application itself will be AJAX-heavy by nature.

IE6 users will probably get the low-res view. This is a rather niche web application and based on the sector it’ll be used in it can be safely said that we’ll have far fewer IE6 users than Linux users.

In short, we can get away with a lot more than if we were dealing with the general public, hence the thread asking about the best typography experience.

Verdana and Georgia are both specifically designed to be easily read on a monitor. I’m less sure about the other fonts.

There are certain considerations you have to make, if you’re developing two versions of a website, though it’s obviously a better alternative to making the site inaccessible :slight_smile:

When dealing with large blocks of text line-height and paragraph width is very important. There is some really good articles on http://www.alistapart.com/ regarding the topic.

Hmmm, here’s my take on Linux fonts (sorry for the horn-blowing):

About 70% of Linux users have Arial on their computers, and the rest of the “usual” fonts drop off sharply after that. If you’re appealing to Linux users, you pretty much have to include “their” fonts in your stacks. You might start with Nimbus Sans L, though I prefer Liberation Sans.

Most Windows users don’t have Helvetica, make sure you give them Arial as a fallback.

Actually you can use any kind of font in your website with the new trend in web design. Maybe you already heard about Cufon, which is really nice solution to use any kind of fonts in the site, only with CSS and Javascript.
So just try it and make your site to blow up the minds of the users.

Cufon and other font replacement techniques are okay for headers and small text snippets, but not so much for text; as you note, it’s also JS-based, which has its own problems. As much as we want to use “other” fonts besides the relatively small amount widely available, we’re still fairly constrained in what fonts we should use to adequately serve our user base. Still waiting for browsers (and users) to catch up to CSS3 and @font-face.

That’s all true, but it’s down to context. There are certain niches where you’ll be more likely to see Linux users and/or users of unsupported browsers. For example, if I were running a Windows XP tutorial website I could safely say that the vast majority of my users would be running Windows XP. You can assume that if you’re running a tech website your users are more likely to use an up-to-date browser.

I probably should have asked this in the Graphics forum rather than have had it moved to this forum, because outside of the standard fonts I’ve yet to have a suggestion of any web fonts that could be used on a heavy-information page/

I’m fully aware of the typical font stacks used on the Internet. This thread talks about the use of web fonts and how they could be used on a web page today to improve typography. If you’re still confused read this article.

Dude, I wrote the article I cited. I’m very aware of Hakon Lie’s ALA article. You wrote:

The question isn’t just what fonts can or can’t be used on a “heavy-information page,” it should be about what font-replacement techniques can be used. The answers are pretty straightforward. Cufon and sIFR are not suited for large amounts of text. @font-face and other CSS3 techniques are not accepted by all browsers, and if you’re designing for a general audience, they aren’t suitable, either.

If you’re designing for a niche audience who completely support CSS3 elements, then you’re choosing suitable fonts from Google Fonts, TypeKit, FontSquirrel or wherever you’re finding them. That’s your choice as a designer, based on your experience, knowledge of the specific font(s), and design instincts. The chunky slab-serif that works in one design won’t work in the next, which might prefer an anorexic sans-serif or a cool Bauhaus-inspired font instead.

Any font has to be readable in large sections of text to be suitable for heavy content, which drastically reduces the number of fonts available to you. Basically, you’ve asked: “There are a blue million fonts out there free to use via font-replacement techniques. Which of those blue million fonts might look good in an unidentified, unexplained design that relies strongly on text presentation?” Hard to answer that question. But to give you one answer out of a million, I like the Oregon LDO family of fonts.

Heh, I didn’t mean it to sound as rude as it did; I just wanted to make sure that this thread could form a discussion on what life is like for fonts after CSS2.

I stated in an above post that I was not designing for the general public, but for a small subset of known users that I can almost guarantee would not be using dated browsers.

But surely with CSS3 being accepted into the bleeding-edge crowd of designers there has been some sort of consensus on what fonts they can now safely use on web pages? I remember when sIFR started picking up steam and designers were clamoring to use every abstract and strange font within their headers to make their sites readable. Hell, to my knowledge even a couple of large websites like The Sun (UK newspaper) still use sIFR to make their headings match those in the newspaper.

Obviously, using siFR to handle content is a big no-no, but I’m surprised that designers haven’t experimented a bit more with what the future holds for text on web pages. I’ve known a few pages use strange fonts like Handwriting and [url=http://www.fontspace.com/kimberly-geswein/airplanes-in-the-night-sky]Airplanes in the Night Sky on blogs and portfolio pages, but nothing really concrete on usable fonts for content.

I do quite like the Oregon LDO font, and I’m liking Optima quite a lot at the moment too. Both look like they could work well on a web page.

No problem, Ultimate. I like the two fonts you posted, but as you say, they aren’t suitable for most uses. Optima’s a classic.

I think we’ll probably just give users the choice of high-res and low-res as the application itself will be AJAX-heavy by nature.,to be honest!!!

Myriad pro would be nice, but the tracking between the letters can seem a little close.
Lucidua Unicode sans is something most machines have and looks nice.
Then I would reccomend Neue Helvetica or some other helvetica.

You could also try Droid sans.

My last suggestion would be to go with arial— its professional, available, minimalist, and nice-looking.

Hope my suggestions helped

Typedia has tested the rendering of a few webfonts. I think those articles display quite a few good alternatives for body text:

Sans-serif alternatives: http://typedia.com/blog/post/cure-for-the-common-webfont-part-1-alternatives-to-arial-and-helvetica/

Serif alternatives: http://typedia.com/blog/post/cure-for-the-common-webfont-part-2-alternatives-to-georgia/