Slashdot Mirror
What Makes a Good Web Font
SitePoint writes "We've published an article on the way in which fonts are used on the Web. We found that a large "x-height" (the height of a lowercase 'x' in relation to the total height of the font) makes fonts more readable on a computer screen, as does a wide "punch width" (the width of the hole inside letters such as 'o' and 'b'). Helvetica is a good font to use online. The designer's choice of fonts is usually limited by the user's OS, but techniques such as SIFr (example) are allowing Web designers to provide their own fonts."
Surely the choice of font ought to be something individuals can set up in their web browser. A website doesn't really have much business selecting particular named fonts, content versus presentation and all that. If you use CSS then you can quite reasonably limit yourself to normal, sans-serif and monospaced - and trust that any sane web browser will choose something readable on the user's screen.
-- Ed Avis ed@membled.com
The user has selected the font most comfortable for them. Other than for headings and special effects, why not leave it the heck alone? (Especially font size. "Designers" who want to shrink body text from the size I've chosen need to be horsewhipped.)
Tom Swiss | the infamous tms | my blog
You cannot wash away blood with blood
Well, at least the folks that run slashdot seem to think large italicized blocks of text are readable. I beg to differ.
Q: What makes a bad font?
A: One that requires XHTML + CSS + Javascript + Flash to display.
Is there some font fetish that I just don't get? Unless I am printing a nifty banner for a 6-year old's birthday, or a logo which should be an image anyway, then it just doesn't matter. As far as I care, there are three fonts: Serif, and Sans-Serif, and Fixed width.
Technically, this is an interesting hack, but please don't try to it on my computer. I have Flash block in place because Flash is constantly abused like this. Please don't make it worse. If people really really really cared that much about their fonts then we would have a standard mechanism for download fonts, and better font renderers. But frankly, for 99% of the population, the fonts are just fine.
Web designers should design their pages to accomodate whatever font the user requires. I often use Firefox's Increase and Decrease Font Size features to make text more readable for me, especially if it's latw at night and I'm looking at a web page filled with financial data, etc. Well-designed sites seem to work well with the feature; others that use boundaries, tables, etc. to "force" text into certain areas of the page don't scale well at all. Also, the user should be able to switch between sans serif and serif fonts depending on whether they're scanning for data (sans-serif) or doing long-term reading (serif.)
Someone should tell the design community that every user can't read every point size or font face well on their computer. This becomes increasingly important now that LCDs have such tiny native resolutions. Large ones can came native at 1400x1050 now, making default font sizes incredibly small for those of us not blessed with perfect vision. For those who don't need magnifying software on their computer but also don't want to run a high-end LCD at a lousy resolution, this is the best idea.
I found that while long ascenders and descenders (the tails on 'f's and 'g's, and the strokes on 'h's and 'p's) were fun to write and looked stylish, they actually added very little to the legibility, while taking up a lot of space. I also found that making the centre parts of letters bigger did help a lot -- even if it meant leaving smaller gaps between letters (to the point of collision in some cases).
One other discovery was that printing (writing each letter separately) was practically as fast as writing joined-up, and again, much more readable, especially at speed. (I really don't understand why joined-up writing is seen as more desirable or mature -- it's even a requirement for some school exams -- when it seems to have no practical benefit...)
Ever since then, my writing has been like that: printed, with large rounded centres to the letters and very minimal ascenders and descenders. I find it's just as fast as before, vastly more readable, and degrades much better when I'm in a hurry. And I still get compliments on my clear and distinctive writing.
Ceterum censeo subscriptionem esse delendam.
While I like the idea of a user being able to override a web designer's selection, I don't understand the "all fonts are evil!" attitude. Color selection and choice of graphics both can ruin a page, but they also can contribute substantially to the aesthetic and help communicate the mood of the page. Fonts are the same. Even if you think the aesthetic argument is bunk, and that things on the Internet shouldn't be visually appealing, the visual quality of a website does communicate a lot about the effort and seriousness of the designer. Would you buy investment services from a site that used green courier text on a black background and had no graphics? And certainly mood or tone is significant, and carries actually information, difficult to verbalize though it may be.
Though I'm not a fan of flash and javascript hacks, I do think there need to be better and more widely-implemented methods for font embedding than exist today. I'm glad I can choose better fonts when I find poorly designed sites, but I'll not deny a communicator his or her tools without reason, and see font selection as one of those tools.
Kerning, that is aligning of individual pairs of letters, is one of the basic concepts in typography. Still, a typical KDE/GNOME/whatever editor/browser is pretty likely to have no kerning at all. It can have translucent background and jumping rubbery icons, and no kerning. This gives that chaotic, uneven look to typical computer typography, and can make the text harder to read.
Kerning is SO simple to implement in software, and SO effective in improving the text readability, and it is still barely used on computer displays as of now.
I disagree with the Arial/Helvetica crowd: Serifs make large quantities of text more readable. Sans-serifs such as Arial are readable at a distance, and good for grabbing the eye.
Still, Times/Times New Roman sucks wet farts out of dead pigeons. It was designed to cram maximal text into a newspaper column, which does not resemble today's web pages, books, etc.
Fonts such as Bookman, Palatino, Bodoni -- anything with "book" in the title -- are so much more readable as to be stupid not to use. The same benefits of Helvetica are present: large x-height, big holes. You get less text across a single column, but that's a good thing.
This is probably a job for the W3 folks: select a set of mandatory fonts that every browser must support. There are open-source fonts available that can, like the old Mac fonts and Arial, clone up the classics. We just have to all agree on them to make them compatible.
Design for Use, not Construction!
So... I'd like to click on that link up at the top of his example page. Where does it go? How do I know it won't generate popups
If I can't tell within 2 seconds where the link goes, I'm not going to click on it. I also tend to forward URLs of interest to people, and use this right-click --> Copy link location... to do it. Why won't Flash let me do that? I know I can go to the page and up to the address bar, but that's not the point.
Considering they're at version 8.0 right now of their player, I can't imagine how hard it would be to interface with a browser's status window and at least tell me something.
-Rob
Biblical fiscal responsibility
I can't highlight any of those headlines that used the flash text. If doesn't matter if there's text under them, I can't highlight something I can't see.
I've had enough abrasive sigs. Kittens are cute and fuzzy.
It's not great, it makes your page invalid IIRC and it doesn't scale well.
Plus you can't highlight text and then carry on selecting text futher down the page, also right click custom menus don't appear (I have a search and open in new window etc... in my right click menu)
"In a time of universal deceit - telling the truth is a revolutionary act." - George Orwell
IMO, this is indeed a Good Thing (TM).
Except for those of us using the FlashBlock Firefox Extension: http://flashblock.mozdev.org/
I'd guess that 90% of Flash is used for advertising. Block Flash and you block mostly advertising. And typically very annoying advertising at that. (Whatever happened to the good old animated GIF?) Then you add exceptions for certain sites like, oh, Slashdot, Homestar Runner, JibJab, etc.
No, this is not a good thing. The fonts should be fixed thru a W3C standard. Not some proprietary hack to load on top of something else. (Not that anybody ever listens to the W3C, but I digress...)
Some of those titles are unreadably small, but increasing browser zoom does not update the flash until you reload the page. For text that doesn't look any better than my carefully configured fonts anyway, this is pure loss in functionality.
So I scanned TFA in hope of some new research on web typography re: readability. And found nothing but opinion, not even references to research done elsewhere.
Sure, the author seems to know his typography 101, but how is he backing up his various claims? All I see is "established and time-tested principles of typography" and similar hand-waving.
This-or-that font is more legible than some other font, because ... "I fall firmly in to the camp that believes that sans-serif faces are a more suitable [readable] option." In the article he even states "It is [low screen resolution], more than any other [factor], that defines the recommendations and principles behind good Web typography."
So without research/testing (or references to research/testing), how the hell does the author know which font is more readable than the next?
I'm not saying he's wrong (or that good guesses are worse than no guesses), but he's pointing to various best practices without any research/testing to back up a lot of these claims.
A quick search produced some promising-looking results. Perhaps too much work for a busy web usability professional.
Second link from the search results: Usability News performed user tests on readability in 2001 (A Comparison of Popular Online Fonts: Which is Best and When? by Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer).
Their conclusions supports some of his claims, but why should I as a reader have to do his job.. Lazy.668.5
Text selection does not obey any of the standard text selection behaviours for my platform:
Options in the contextual menu are the ones that the page author has chosen to put there, which are quite unrelated to the ones that appear normally in my browser.
The fundamental problem here is that the technology's author has decided that replacing real text is acceptable as long as he manually recreates all the features he expects real text to have. This is, I'm afraid, painfully naive; there's no way for him to know and account for all the ways in which standard text behaves on my platform, and it's unacceptable for him to decide that his content alone gets to behave inconsistently with everything else in my environment.
It's also a lot of wasted work. If you want services like flexible selection, good antialiasing, relevant contextual menus, and inline spellchecking, just provide plain, standard text. My OS will do the rest from there or it won't, and it's none of your concern. These services are not the responsibility of content providers.