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
I am a huge fan of Calibri. It's a new font that's pretty standard in Office 12. It's similar to trebuchet, but very easy on the eyes. You'll understand once you use it for a little. Only problem is if you're going to use it as text on the web, people need to have it installed, first.
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.
It sucks having to disable or override fonts globally to keep pages from doing nutty and unreadable things. It breaks the rare case where a specific font was required to make a page work, not simply preferred by the webmaster of the moment.
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.
Personally, I like to change my default font to Verdana. I do this on my website, and in my browser. I simply hate Times New Roman, and am not overly fond of Helvetica either. Personally, I see why in logos and things users may want to use other fonts, but since these are typically images, the problem of users not having a font is a moot point. For the rest of websites, though, typically, most decent websites use a standard font such as arial, verdana, helvetica, or Times New Roman.
While this is extremely close-minded and un-artistic, this is honestly the way I prefer it. I hate it when my browser is taken over by someone else's fonts, cursors, or popups. To me, they're all the same intrusive, annoying thing, and are all on the same level of annoyance.
And for a very good reason. Flash contents are not indexed by Google. Not even when it's text only.
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.
And yes...
It's also searchable AND displayable without FLASH.
This technique just puts a FLASH "movie" over the original text. If you don't have FLASH, you will just see the original text without the "FLASH fonts"... no big deal.
If you search, the browser will find the text BEHIND the FLASH movie. Everything is fine man.
IMO, this is indeed a Good Thing (TM).
If I clone myself, can I call it a thread?
If a girl winks to us, can I call it a race condition?
I do a lot of surfing using a text based browser (Links) on an 80x33 screen, and my guess is that most web site designers never anticipated that type of display. It's nice, however, to be able to read everything using the super-readable screen font generated by my video card, and for the most part it seems to work rather well.
Even with GUI browsers, I tend to override web site fonts with things such as Arial which I know work well on my machine, and which are relatively easy on the eyes.
If a site author really wants to use their own fancy fonts, I think they should create graphics.
Mainframe/UNIX Bit Twiddler and long time Windows/Linux Hobbyist.
The Theorem Theorem: If If, Then Then.
Well first of all, most browsers do have an option to set fonts and override other page's fonts if that's really what you want to do.
In IE, it's under Tools / Internet Options / Fonts. To make your chosen fonts override fonts set by Web pages, look under Tools / Internet Options / Accessibility, and there's an option labeled, "Ignore font styles specified on Web pages."
In Firefox, it's under Tools / Options / General / Fonts and Colors. The option to force Firefox to override fonts set by the Web is at the bottom, labeled, "Always use my: Fonts"
In Opera, well, you're on your own, because I haven't played with it enough to know. I suspect that it's extremely similar, though.
What you're complaining about seems to be that the Web is increasingly becoming not just about content, but about presentation as well. I know, I know, that's not what it was originally set up for, but it's changed an awful lot over the years. Some sites just don't work right without the ability to say not only what is on a page, but how it's on the page. I'm not talking about not working from a design or coding point of view, I mean from a structural and stylistic point of view.
As for me, I don't mind. I say, let the site designers present the information to me the way they want to. Yes, sometimes it comes out hideous. Personally, I think whoever picked Bitstream Vera Sans for the ImageMagick home page should be shot. (In the leg; I'm not a capital punishment kind of guy...) If a site looks bad enough, I might avoid it site altogether.
But most of the time, when site designers dink around with the formatting and style, it doesn't degrade from the look and usability. Sometimes, it turns out really spiffy.
So unless a site proves that it's not worth looking at, I think giving them the benefit of a doubt and letting them selecting particular named font is perfectly okay.
Besides, who wants a world in which every frickin' web page looks exactly the same? I kind of like that there are so many different styles of presentation out there in addition to the virtually infinite content!
The user often doesn't know that they can change fonts. My wife occasionally does web design for her clients. It isn't her main line of work but sometimes a client wants that as part of the package. Invariably they want pretty fonts. Usually "pretty" is defined as what they personally like. It takes a fair bit of education to convince the client that they should not be specifying fonts, that the viewer should do that. And then it takes a bit of education to show the client how to set the font preference on their browser.
http://www.iliveonyourvisits.com/helvetica/
Arial was a Helvetica clone developed by Monospace way back when font cloning was the cool thing to do. Ideally, it sports the same spacing and metrics of Helvetica, making it a literally perfect substitute for Helvetica. Thus, they're both nearly equally readable on the web and in print, and anyone who tells you otherwise is being a prick.
17 n33d$ 70 b3 |337-4b|3 0r 17 \/\/1|| m1$$ 7h3 12-18 d3m09r4ph1c.
*NOTE: I had to use a Leet Speak generator to write that, I know what it says and I still can't read it.
... my site wouldn't get indexed properly by my favorite search engine, and NOBODY would read it anymore. So much for the need of readability. The homepage of mr. Knuth, who cares deeply about fonts, isn't flash-enabled either, as you may have noticed. It simply uses a large font size for readability. Seems a lot more effective to me than using flash.
Visit http://ringbreak.dnd.utwente.nl/~mrjb/growingbettersoftware to download your free copy of the book
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.
I'd also like to add to the list the following traits for font readabilty: line width. Similar to the issue of font size. Other factors being equal, a font with more to see is easier to read then a font with less to read. Font complexity. simple shapes are more readily identified then more complex ones. And column width. Take a notebook. Write a sentence in the margin, and again in the main section. The margin will be harder to read. But websites have picked up the bad habit of newspapers of putting 1" collumns of text around large images. Even TFA does this.
The author's talk about additive vs subtractive colors on readability is interesting, but I've found that white text on black screen is harder to read at length. My theory on this is because that when the text is emmiting the light, it tends to "glow" and flow over its boundaries. Or it could just be that we have been looking at black text on a light background since the invention of paper, and the alternate system goes against all of our experience. But over all, contrast is one of the biggest killers of readability.
Another pet peave of most websites is scalability. By that I mean the ability of the website to have the same usability if you change the font size with Ctrl++ like I do with many websites due to my poor vision. But all the time, increasing the font size just once, causes web elements to run over each other. I was on one site a few days ago, I actually had to DECREASE the font size on each page to read the beginning and end of each paragraph, because the default size caused the text blocks to OVERLAP.
Free MacMini
http://bancomicsans.com/home.html
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.
the anti-aliasing make the overall impression of the font too blurry
e r/Step1.aspx
Try this; it worked well -- much better than I'd hoped -- for me:
http://www.microsoft.com/typography/cleartype/tun
From reading a lot of comments it seems like a lot of people are afraid of really horrible amateurish looking sites will arrive if people had access to more fonts. Why? Sure, some people will do this. And if you don't like it, don't go to their site. Having access to more fonts is only a good thing. It can allow sites to look unique (note, I'm not saying unreadable. There are a ton of fonts out there that are unique and readable). Magazines have unique looks and use a ton of fonts. Why can't the web support such features?
Sure there are some possible negatives, but they don't outweigh the positives.
Comic Sans, when I design web pages using Comic Sans Bold, I can often visualise expressions of satisfaction and almost.. ecstacy, on the faces of the people browsing my humble pages.
I don't often get repeat work, but I feel I've done my bit for society.
For further reading into the web designer community, poke around sites like the following:
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!
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.
The real issue is the same old fears that we have with music and movies. "Real Designers" with a love of typography and an understanding of users needs for control will attempt to design a readable, accessible page that is "wicked cool and easy to understand / read". The good ones won't care if you want to override those things out of your own preferences (comic sans freaks anyone?) or need (White on Black please! I'm unfortanteley blind as a mole). Go check out the pricing on some fonts from Adobe, Linotype, et al. and you will find the real issue. Of course they have to pay bills, so no one wants to risk their font library just so "Real Designers" can do a better job. Trust me for those who really understand this could do some awesome things.... the Bitstream thing was cool, but a stupid proprietary plugin sucks. Of course these days it doesn't matter anyway. You are a Designer if you can open (insert graphic program here), and "Real Design" is just about as dead as can be. And even the real designers don't get good Web education... If the writer of this article is any example. px is bad. IAAGD and sometimes it sucks.
(putting on my overalls, lighting pipe, sitting in rocking chair in preparation to tell an "old-timers story".)
Heh! You think that's bad! I remember way back in... must've been '97 or so, there was this company, thought they had a killer solution for fixing incompatibilities in the way browsers rendered sites. They looked at how some things didn't render right in Netscape, and others were cock-eyed in IE, and some things didn't render right in either one, and they had this "brilliant" idea...
"Screw HTML," they said. "Make your whole site into one big Java app!"
And that's what they sold to their clients, too: a program that did nothing but generate user interfaces into which you could plug your text and pictures, then stick it on the web. 'Cause after all, everyone had Java, right? So every site should look the same! And if the applet rendered your whole site invisible to search engines, and took ten minutes to load in a client's browser, well, that was a small price to pay to make sure you could get pixel-perfect alignment, wasn't it?
(I really wish I were joking about this. There really was a product that promised to do exactly what I'm describing here, although I can't remember the name.)
One thing that Microsoft -- or the people they hired -- got right.
Microsoft used to have some web pages for 'Internet/Web fonts'. These included both a collection of TrueType fonts (including Verdana) and some history and other stuff (e.g. a history of Verdana). The pages were up until a year or two ago.
Then, shortly after I commented to a business analyst (read: specifications author) on the suitability of Verdana, including both the high appeal of the font but also the potential risk of using MS intellectual property and the potential for sharing to cease, I found those MS web pages had been removed. I don't know whether they've since been restored or placed elsewhere.
Regarding the history and intent, translating into suitability, of Verdana, a quick google turns up:
http://www.fonts.com/AboutFonts/Verdana.htm
Well, let's consider the most common color combination for text and its background: black on white. In a subtractive color system (i.e. print), this is a perfectly suitable practice. The contrast of black on white is as stark and clear as possible, making for good legibility and comfortable reading. However, with an additive color system (i.e. on screen), the color white is produced by mixing red, green, and blue at full intensity. This is why the black on white combination can be overly luminous and too harsh on the eyes to allow extended reading on screen. There is never more light radiating from a screen than when it displays pure white, and this intensity can affect the clarity of fine detail in typefaces and other intricate patterns.
Pardon me for thinking here. A screen actively generates white at full power and black at 0. Paper reflects white at full power and black at 0. Wtf is the difference? Is this guy full of shit or am I missing something?
Please don't tell me paper white is not 100% reflection. It doesn't change the basic fact that white is the most reflective and black is the lest reflective just as white is full light and black is 0. Additive, subtractive (I keep wanting to say subtractitive), it makes no difference, white is maximum, black is minimum.
Infuriate left and right
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
Hmmm what does Mike Davidson think?
/ sifr.js
He makes it LGPL but obfuscates it to obviously stop reusage?
http://www.mikeindustries.com/blog/files/sifr/2.0
(Should i submit it on the[ ]daily)WTF(.com)?
By the way. Am i the only one who thinks that this JS+Flash combination - for a thing that is clearly a CSS's job - is nearly perverse?
Any sufficiently advanced intelligence is indistinguishable from stupidity.
12 to 18! I'm 27 and I understood that just fine.
Now, if you'll excuse me, I have to go cry myself to sleep.
MoM++ - A Classic Expanded - [Master of Magic 1.5]
http://mompp.sourceforge.net/
...if only there was a "Didn't Bother To RTFA" mod.
Unhighlightable: In addition to the obvious accessibility features, sIFR text can also be selected, copied, and pasted by users. It also zooms with the user's text-zoom settings, although this only occurs on page load and not on-the-fly. And finally, of course sIFR works with linked text (anchors).
Unsearchable, undisplayable without Flash: If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
And just for an added bonus, before someone complains about accessibility:
sIFR is fully accessible to screenreaders and other assistive technology. Don't take our word for it. Ask Matt May of the W3C who endorses it as an accessible method to create rich typography on the web. Or ask Joe Clark, one of the world's leading accessibility experts, whose interest in typography is only trumped by his interest in accessibility.
The knee-jerk reaction of some people whenever they see Flash is that it must be inaccessible because it's Flash. What we've done with sIFR, however, is turn that model completely on its head. Your (X)HTML document is still the exact same document it was before sIFR kicked in. Your code is untouched and sIFR is completely abstracted to the javascript layer; therefore, your accessibility, your search engine friendliness, and your semantics are the same as they were before the day you decided you like nice fonts.
They use studies and examples to show that not only is x-height important to legibility, but ascenders and descenders are also vital. Compromising the ascenders of a font with increased x-height (such as in University Roman) can decrease the legibility. What's most important is a balance between x-height, and ascender/descender size.
The ascender/descender relationship to legibility/readability is also WHY IT IS MORE DIFFICULT TO READ TEXT IN ALL-CAPS, EVEN THOUGH IT HAS THE LARGEST X-HEIGHT OF ALL.
Overall, they found that sans and serif fonts are roughly equal in readability, with serifs having a slight advantage depending on the size of the font.
Though the article is written more towards print typography, the summary advice applies to web as well.
As a republican I feel it my responsibity to manufacture criminals. People need punished!
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.
If there's one complaint I have about web sites is the way so many of them change typefaces and override my browser settings. It's infuriating the way they play around with this like a bunch of tots with a new toy. I wish they'd quit doing this and design their web sites so it doesn't matter which font is being used by the browser. They don't seem to realize that I have carefully selected a font I like, only to have the web site shove their own fonts down my throat. Will the person who added the face attribute to the font tag please go out and die already?