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 answer to delivering fonts to the end user is flash?
I'll take New York or Courier, thanks.
Mod me down with all of your hatred and your journey towards the dark side will be complete!
What makes a good web font? Well anything combined with BLINK and to a lesser extent, underlines of course!
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.
If it is information that every should have (i.e. warnings and such) then the presentation style should be simple and easily rendered. Otherwise, the sky is the limit on creativity. If you don't like the results don't view the page.
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.
http://www.google.com/search?hl=en&q=%22dadh+ath%2 2
Long live the Empire!
Well, the article is obviously slashdotted, but I don't need to read it to know of a good solution. Browsers come equipped with programming capability (JavaScript) and rendering engines, why not core browser fonts? Come up with a standard set of fonts based on scalability and readability with a range of styles and embed them in the browser to make them OS independent. Keep the number low (say 10) and make sure that additional fonts aren't added to the core set unless absolutely necessary (to avoid the speed penalties). Then in CSS, you can designate the browser internal fonts and fall back on fonts supplied by the user's OS.
As to sIFR, nice idea but if you're like me and wary of too much Flash, I think in the long run it's not the optimal solution. I really don't like the idea of standardizing Flash.
GetOuttaMySpace - The Anti-Social Network
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.
So, Mike, who went to all the trouble to create some crazy Flash-based font downloader, didn't realise that @font-family{src:} has been part of CSS2 (which was made a recommendation 7 years ago) all along?!
Still, this whole SIFr thing screams of "HACK!" and a quick browse through the comments indicates it's not without flaws. Perhaps web designers should just stop trying to dictate what font you use to view their "works of art" and leave the user in control.
Anyone else find that a little odd given the style used in the page?
The whole point of choosing a font (or set of fonts) is so that you can make sure a first-time visitor to your site has a good chance of seeing it as you intended. Big fonts or so small that they're almost illegible (my pet peeve of Web design). Legible or grunge. Whatever. Your choices here say as much about you and your site as the graphics and written content.
Not making wise choices here tells your visitors that you don't care.
The answer is that the web is a medium where you should focus on content and let me and my browser decide how to display it.
Secession is the right of all sentient beings.
Comic Sans
Giving them choices of more fonts will lead to more web surfing sickness and websites that look like ransom notes.
It's like a video editing app with hundreds of cheezy transitions.. all they do is make the video look horribly amateurish.
giving them more fonts and the ability to specifiy and download the font will lead to horrible horrible things.
Yes some will use it correctly, but others will simply force some wierd fonts upon people that are not very different from a standard font and simply choke up bandwidth for no good reason.
Just because you have a T3 going to your webserver does not mean you have to use it all.
Do not look at laser with remaining good eye.
What about places where Flash is blocked ?
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.
From The article: "Modern operating systems such as Windows XP and Mac OS 10 give users the option to display anti-aliased text as standard. This is a good thing, and it makes reading and working on your machine much more comfortable and pleasing to the eye."
I personally don't like anti-aliasing on "text fonts" for my monitors and I remove the anti-aliasing. This goes for a 19" 1280x1024 CRT-screen and my laptops 15,4" 1920x1200. If the font is less than 20 pixel wide the anti-aliasing make the overall impression of the font too blurry (the ration between clean pixels and anti-aliasing blur is to low). For larger fonts (for e.g. headlines) I like the anti-aliasing.
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.
<font face="wingdings">I personally prefer this font myself</font>
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.
- Look mommy, another nifty flash movie!
- How does it look like honey?
- Ah nevermind, it's just text. It says SLASHDO-
- OH... WHERE HAVE I FAILED?
If I clone myself, can I call it a thread?
If a girl winks to us, can I call it a race condition?
Overall, there was some good information there, but there also were some opinions presented as facts that I really disagreed with. For example, "you want a giant-x-height sans serif font." I know this is trendy, and understand the reasoning behind it, and I still think it's ugly as sin. Paper is free on the web; a font with serifs and decent ascenders and descenders in a large size with lots of leading should be just fine.
Probably the silliest thing, though, was going on and on about which font to choose, when you know darn well that there's only about 8 choices almost anyone has, and only about 2 that everyone has. I just can't understand why uploadable TrueType fonts aren't supported by all browsers, and the norm for webpages in 2005.
Maybe that's what the sIFR link is about. I don't know. That page crashed my browser (Firefox 1.0.7).
... 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 am fond of the MySpace.com default font...
From what I can tell, it is something like dark blue on black.
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.
article covers all good points.
Except it gave sIFR a real break. In my opinion, sIFR is more dangerous than good. I have flash installed so I can watch flash movies, use interactive graphs, and a few very well-designed user interfaces. I don't need go cross-eyed from deciphering long paragraphs in Led Zeppelin "Houses of the Holy" font.
I love execs who want to blow the user out of the water by bombarding them with flashing colors, words flying around the screen, impossibly tricky navigations, etc.
Small business owners are embarassingly worse. These morons will never understand that fresh, updated, relevant content combined with inuitive UI is infinitely more important than flashy colors and effects [slashdot, craigslist]
sIFR is a barrell of kerosene being thrown on that fire, once the PHB's hear that buzzword flying around.
My my my. So angry over a little font mishap.
So long as the text doesn't underline itself when you mouse over it I'm good.
Agreed. And I thank /. for letting my browser use the font I selected, as Times in italics simply isn't readable.
All my code editors are set to black text on gray background. A beatiful 192 gray is just perfect.
:)
White text on black background? Still too big a contrast for me. I also have a huge flashback to DOS days
"If you could only see what I've seen with your eyes..." - Roy Batty
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
I was not very impressed with the article. While the author was quick to point out bad examples on page two if the article, the author did not cite what constitutes a 'poor' font in the first page. The author simply pointed out what makes a 'good' font: low contrast, generous x-height, generous width, while failing to quantify any of these. The author did not even define x-height and thus viewing the page without images, one would likely never figure it out.
"my x-height is bigger than your x-height!"
I'd love to look at the example, but Firefox crashes when I click on the link... :-(
If you disagree with me on social issues, then it's pretty clear that you are a narrow-minded bigot.
I have a question that seems perfect for the slashdot community. Sometimes, I work with openoffice.org in windows at work and then take it home to work on it in my linux box. I've notice that when I create a document with openoffice in windows and then take it home with me to work on my linux box, the spacings and indentations get screwed up. I know the problem has something to do with the fonts. So my question is what fonts do slashdotters use when preparing documents in windows and linux systems?
Really? Did you compare fonts with same size but different x-height? No, surprise, because this basically just compares small caps of different size and larger fonts are always easier to read. What you really should compare are fonts with same x-height but different font size. You will probably find the opposite result.
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.
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:
First off, you need to distinguish between body and display fonts. Display fonts are the big, complicated, fancy ones, usually for headlines, logos, and very short snatches of text. Text set in display fonts is almost more like a graphic than a piece of text, and they're often rendered precisely that way to give control. In the display text, the font choice has a lot to say about the feel of the site: elegant, chunky, exciting, old-fashioned, etc. They're usually set big enough that additional scaling isn't necessary to readability, though it would be nice to be able to scale it to maintain page layout, to make it selectable and searchable, etc.
Your complaint is more valid registered against the use of interesting fonts for body fonts, which is the main text of the page. That really does have to be a negotiation between the page desginer and the browser. Like display fonts, the feel of the font can really affect the feel of the page, to the same degree but in a less glaring way. Consider the way you can tell if a page has been typeset on a Mac or a Windows box just by the fonts that have been chosen.
An extreme case would be a very old-fashioned font with lots of medial S (the ones that look like f), but even then there's good reason for the user to want to say, "Thanks for the pretty page, may I now please have it in something readable?"
Even without going to that extreme, there's good reason for a designer to feel that the standard fonts don't give the feel he's after. So the compromises are somewhat uneasy. A good standard that allowed designers to send fonts over, at least as a suggestion, and then allow users to swap them out (in a cascading fashion with a user-supplied style sheet) would be nifty.
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!
And it's name is COURIER. Nothing else works in Lunix, anyway.
Luckily, Linux isn't even on many web designers' radar. I know that my sites certainly don't get tested on any kind of Linux box.
I don't respond to AC's.
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.
Yep, it's highlightable, but I tried the demo, highlighted some actual text, then highlighted some of the Flash text, and the higlighting never disappeared on the actual text... score one for predictability! And what the hell is up with some of those headlines rendering outside of their boxes? I highlighted some of those other headlines and they scrolled.
Really, the whole thing -- gross hack, and it shows. No matter how much it gets polished, it's still going to suck. Let the browser lay the damn thing out like it's designed to.
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
i have firefox 1.5 with macromedia flash && mozdev flashblock. some pages just need flash for you to pass through some pages, so you really can't live without it.
:) and i see regular fonted text which i can select.
the flash stuff wont start, thank god
ps. this it the most terrible idea i have ever heard how to display non standard fonts.
I'd tell you the chances of this story being a dupe, but you wouldn't like it.
That's a great idea, but most users don't know that they could change the fonts in the first place, and you'll have a heck of a time convincing somebody to go through and set the fonts that they would want.
If you're advanced enough to set your own fonts, you're advanced enough to always override page styles with your own styles. There has to be some sort of default for users that don't know or don't care enough to set their own fonts.
Something that I've found nice about Opera and Firefox is that they let you increase or decrease the size of the text, regardless of whether the designer specified a pixel font (as opposed to a percentage font). IE doesn't let you increase or decrease font size if it's a pixel font.
Whine and complain all you want, I'm not going to create a website that has to "look good" in Times New Roman just because that's the default font that a user has selected. You'd better believe I'm going to specify a sans-serif font, something that's actually readable on a monitor.
Grammar Lesson: you're is a contraction of "you are"; your means you possess something; yore means days gone by.
The user is the one who decides which fonts are used. The web designer should only choose which words are larger or smaller relative to the other words on the page.
And of course, a web designer who chooses fixed width tables / columns instead of using a percentage of the window size should be used to practice new interrogation techniques at Gitmo.
I (Uppercased I) and l (lowercase L) look the same. :( I prefer not to use that font.
Ant(Dude) @ Quality Foraged Links (AQFL.net) & The Ant Farm (antfarm.ma.cx / antfarm.home.dhs.org).
I don't understand why you suddenly got the urge to lie. Or are you honestly that misinformed?
Pssst, I think he's trolling...
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
What's with these ajax-css-html gurus putting their names into mundane techniques as if they're godsend? They didn't name it the Watson-Crick Double Helix(tm).
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.
The sifr link in the article is stupid. This is better
Looks nice, though I'd also like the rest of the article text to look the same. Actually in Firefox adblock tabs show up on each headline which is a problem. Why not just make a gif and show that?
Anyway I was thinking that google probably doesn't parse these headlines (yet, anyway). Htdig and probably google and other search engines use reverse linking but also other metrics and one important one is text in headlines like the H1 and H2 that are being replaced. Though it says "replaced with flash immediately after page load" and mentions javascript so maybe it treats google's agent as a non-flash equipped browser and hands it the parsable text version of the headlines?
I'm a graphic designer and in their example the replaced a sans-serf font (calling it garbage) for a serifed, all caps font for a sub heading. No, no, no. They turned it *into* garbage. For headings and subheadings as a general rule of publishing thumb, you should use san serifed fonts because they make them easier to read. *In my opinion* that alone discredited their publishing credibility, aside from the fact that I personally think they have a rediculous idea.
From a web design perspective, you should get away from Flash as much as possible. This is because of varying versions of the plugin across the web, some people don't even have it, and if you're in the slashdot type of crowd you have plugins that selectively block it.
Move along, nothing to see here.
We're all hypocrites. We all have hidden parts, it's the contrast between them that make us more a hypocrite than others
Thanks for answering my question. I hope they mod you up.
The question of, "what looks best on the web," surely should be rephrased as, "what looks good at intermediate display resolution," with the clear caveat that as technology progresses, this will become less of an issue as our screen resolutions increase. The common 12 inch laptop screen with 1024x768 pixels has about 100 dpi; if that were to increase to 300 dpi we wouldn't care nearly as much; at 600 dpi, this would be a vastly different discussion.
The deeper question becomes, then, what can font designers do to ensure that their fonts are properly optimized for a range of display resolutions, not just size? The interactions between font size (measured in points) and readability have been well studied in the print world (eg, for the same family, a 6 pt face will be squatter and have relatively looser kerning than the 12 pt face), but as far as I know, less work has been put into resolution. Resolution and size, while often related, are fundamentally orthogonal.
Put my fist through my alarm clock with its ding-dong death inside my ear. - The Blackjacks.
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/
Arial's ubiquity is not due to its beauty. It's actually rather homely. Not that homeliness is necessarily a bad thing for a typeface. With typefaces, character and history are just as important. Arial, however, has a rather dubious history and not much character. In fact, Arial is little more than a shameless impostor.
Personally, if I can read the damned text, I dont give a flying monkey butt what the "history" or "character" of a font is (who in God's name WOULD????)
Let me pick my own fonts thank you very much. I am subjected to enough Flash in my daily life to not have to go through this nonsense just because some "gods-gift-to-web-design" flunkie wants to shove his view of the world down my throat.
I guess I don't fully understand your point.
Q: "What Makes a Good Web Font"
A: A Sans serif font (A typeface without strokes at the tops and bottoms of letters (eg Arial and Helvetica)
"The text on web pages offers an exception: it appears mostly in sans-serif font because serifs make small letters less readable on a computer monitor." (Wikipedia)
You should be more careful about taking your pills.
ZEN is a prime number in base-36
According to most of the leet sites it is evidently black or blue on a purple background.
Diplomacy is the art of saying "Nice doggie" until you can find a rock. Will Rogers
What a ridiculous claim! They show an example of a font with a "generous" x-height, but not one with a skimpy x-height for comparison. They also don't not show what happens when the x-height is too large (hint: the font becomes less legible). This is all Typography 101 stuff, people.
-- Boycott Shell
The font in which a web page is displayed is dependent upon the client software, something the publisher does not control. Just because you designed a whole page in Comic Sans MS, does not necessarily mean that it will render in Comic Sans MS. The Web is WYSINNWEEG: What You See Is Not Necessarily What Everyone Else Gets. What if the user's machine does not have this font installed? What if the user has specified font substitution, in one of several ways? What if the user is using a text-mode browser such as Links?
I would tend to think that if a particular rendering absolutely required something to be displayed in a particular font, it should be done as a graphical image rather than as a piece of text.
My personal preference {which, BTW, generally overrides whatever the web designer chose} is Bitstream Vera Sans. Though I don't mind the Serif equivalent, especially if I'm going to be printing it out -- I find serif text is just a bit easier on the eye in print.
Je fume. Tu fumes. Nous fûmes!
Regardless of monitor real-estate I run browsers at approximately 800x600. On a good montitor that means I can get two browsers side by side. (On my laptop here at ApacheCon it takes 2/3's of my screen. I take notes in the other 1/3!)
Think Deeply.
that ensures a person is not confused between 0 (zero) and O (letter "o"). Even the one here on /. is not that great because it is a very subtle change. It would be nicer if the zero had a slash or dot in the middle (no pun intended). Some fonts are absolutely atrocious, and the zero and letter "o" are completely indistinguishable.
I mod down so you can mod up. Your welcome.
Analogies don't equal equalities, they are merely somewhat analogous.
We finally get an addition to the Developers section, and it's about Web Fonts?
What's next:
"Developers: MS Paint 11 Released"
Garlic? Bread?
(apologies to non-UK readers who may not get the joke)
Background: white
Variable Font: 10pt Times New Roman
Fixed Font: 10pt Courier New
Font Color: Black
Web designers: Bugger off!!! We don't give a damn what the site looks like, it's the content that's important. Font's and Flash and Javascript all distract from what is truly important about the web: content
Even if you disagree with the reasons for the research, the actual research is worthwhile.
Free MacMini
It's entirely the reader's job to decide how the web page gets rendered - HTML is designed to tag content, and the reader's system, which knows what screen capabilities are available and what preferences the reader has, is responsible for rendering. The web page author can use tools like CSS to give hints, but doesn't know how much screen real estate is available to the browser (and I continue to see real ly ugly screens when I'm using smaller or larger windows than the designers expected), and the web page author doesn't know if the reader has a text-based browser or monochrome screen or PDA or 30" Apple display or Macintosh with Postscript font rendering or rejects all Javascript for security reasons or has limited vision so uses big plain fonts or prints all web pages to dead trees or doesn't want fonts that change when you wave a mouse over them.
Picking good fonts is valuable for improving readability - but only the reader can do that.
Bill Stewart
New Fast-Compression-only CPR http://preview.tinyurl.com/dy575ks
the problem with serifed fonts is that at small sizes (10p), the serifs are too fine to be rendered properly on the monitor, thus giving many serifed fonts a 'crumbled' and illegible look. also, on a font like Bodoni, the bowls, ascenders and descenders are so fine that they tend to disappear.
less text across a column isn't necessarily a 'good thing' either---if there's too little text on a line, the reader is too busy scanning left to right, thus destroying the continuity and actually slowing comprehension.
...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.
Nothing.
I have no doubt that Verdana is a nice, readable font. It'd be nice to see people actually supporting their claims with evidence though, rather than just making up crap.
The web was designed to not let you specify format for a reason.
Quite so, but was that reason "allow the user to customize", or "make it really easy to implement an HTML renderer on many different systems with different constraints"? I submit that the latter was a far more important point. (Tim B-L, if you're listening, please feel free to correct me if I am mistaken.)
sIFR and similar stupid hacks are, without any room for argument, the wrong way to do it.
Oh! Well, since you have declared there's no room for argument, I guess there's no point in anyone even suggesting an alternative..... </sarcasm>
The Bitstream PFR format is public. But Bitstream withdrew the tools that allow conversion of other fonts into PFR format, partly because of threats of litigation.
While I agree this is a neat hack, I'm not sure how it's better than just rendering your text in Photoshop into a GIF file and putting that on your web page?
Or, for more maintainability, having a {servlet | cgi} that does that on the fly and caches the results for performance?l &textid=EH51&lang=use-locale"> )
e.g. <IMG SRC="/RenderText?fontslot=14&w=400&h=200&mode=fil
At least by using an image, you're not dependent on the user having Flash installed and javascript enabled.
OBDisclaimer: Of course, having to do this sucks. But the font licensing issues that are a large part of the reason we don't have downloadable fonts are not going away anytime soon.
I discovered the same thing in high school (a long time ago in a country far, far away...) My cursive writing was mediocre (unattractive) at best, and messy at worst, but switching to printing made it much more legible and attractive.
I agree, the practical benefits of cursive writing are overrated. It comes from an era in which royal personages such as the famed Earl of Higglesbottom (nonexistent, but you get the idea) would have his secretary write long missives in a beautiful, flowing script. Of course, the commoners wanted to emulate that, and teachers knew that if they taught their students how to write that way, then one day, they might be able to get a job as they Earl of Higglesbottom's secretary, which was a good gig if you could get it, a farthing a week and a half-day off on Sunday.
Teachers as a group, however, are terribly slow to adapt to change, and few of them seem to have noticed that the current Earl of Higglesbottom is drunk who had to sell his ancestral castle and now lives above the grocer's in a bedsit, so there's really no point to cursive any more.
Research? More like computer displays, web standards and readability for dummies (for the most part). And anyway, why does he talk about point sizes just to present us with some CSS that has font size defined in pixels? "Web designers" have to get out of paper thinking, realizing that the computer displays are additive and low-res is a good start, but it's not nearly enough. It's most important to get the things that the user can't easly change right: organization, navigation and accesibility. Once you have that right you can choose a good comination of fonts to suggest via CSS (but you make sure that your page does not break with other fonts and different font sizes). I will continue to override their choice because the web is not a book or maganize, I jump from page to page and don't want to wade through a font salad because they wan't to look unique and "just like that".
Analogies don't equal equalities, they are merely somewhat analogous.
sIFR text is completely selectable and copy/paste-able. The headache part is that the selection doesn't carry over between the sIFR elements into the normal HTML part, which could be considered a browser/plugin limitation but still a pain, nonetheless.
I am sick of having to create :lang(x) CSS formatting for every single one of the dozen languages I use in my website and linguistics-related weblog just because there no font that is both readable and covers enough of Unicode. Bitstream Vera and Verdana are pleasant on the eye so I have those set for the default, but when I present text with IPA, lesser-known Cyrillic characters, or polytonic Greek, I have to switch to fonts like Lucida Sans Unicode or Arial Unicode MS that simply aren't as readable (and this last one is rarely illicitly acquired and installed by non-Windows users). Things are better for my print stylesheet, since I can specify serif fonts like TITUS, whic looks good and covers almost everything, but the acceptable-looking sans-serif fonts are not Unicode-friendly.
Lucky the DejaVu project is extended Bitstream Vera to include more of Latin, Greek, and Cyrillic forms, it isn't widely installed yet. Would that all Linux distros include it by default.
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!
The author is asking a wrong question. Choosing a font is not a one-size-fit-all matter. Different websites have different purposes. You need different fonts for different occasions. It's almost as if the author is asking what the best clothing style is.
Dear author, consult your local art school and take typography classes. People make living out of designing and choosing fonts.
<rant>Dear slashdotters, presentation is more important than you want to believe. Fonts DO matter.</rant>
I set the text on my website to be a shade off white. This seems to soften the contrast difference in White on Black.
On a side note, I know my site is built like crap - I am using divs and tables in a bad combinaton. I am trying to migrate away from table layout and slowly working towards using CSS properly. I have just begun to play with container divs (not implemented live) so that I can control my layout better across browsers. Can anyone tell me if it breaks when using ctrl+mousewheel?
I tend to see Myspace users make odd perversions of it, like (my favorite) pink Comic Sans MS on green background--horrible, even by Comic Sans MS standards. It has its uses, but not those.
You can hold down the "B" button for continuous firing.
Firefox 1.5 has introduced new problems that didn't exist in previous versions.
Try this: Install Firefox 1.5. Now, add extensions Adblock and Tabbrowser Extensions.
Notice now how sites like Jalopnik and Kotaku no longer have headlines. The javascript flash detecter finds flash, but then its oddly blocked by the browser, despite not having a block set. SIFR dies on its arse.
Also note how you can no longer download anything from a javascript-launched link, like anything from Fileshack. Tabbrowser Extensions mysteriously breaks these links from working. I toggled every likely setting that would cause this, and nothing fixed it. Since then, an update to Tabbrowser has come out, but the problem still exists.
These problems, with adblock and tabbrowser, did not exist with 1.0.7, but now I have upgraded and have to farm off certain sites to IE to read.
Personally I think that every web page should use small cyan coloured text on a white background :)
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.
Flash should be used sparingly, for specific purposes. If it's used for (*gasp*) FLASH to spice up presentation, and not as a means of presenting primary content, anything presented in the Flash section can be gleaned from the body text that is rendered in a standard manner. There are some things that really do work well as Flash presentations, and I'm not slamming it. I am just dissatisfied with the uses some people put it to. It's like writing letters to Grandma in a spreadsheet. Sure, you can do it, but it's still the wrong tool for the job.
Mal-2
How is the Riemann zeta function like Trump rallies? Both have an endless number of trivial zeros.
I guess there's no point in anyone even suggesting an alternative.....
The GP post actually suggested an alternative, albeit kinda lamely. He seemed to be suggesting creating a new standard, although realistically just adding a few extensions to CSS makes a bit more sense to me.
I agree with the GP in that sIFR is more than a bit silly when it's entirely possible to simply addon some functionality to CSS and thus allow browsers to implement it in a much better way. Resorting to freakin' Flash in order to display a headline seems to be way overkill. It works, but it is pretty silly.
- Give a man a fire and he's warm for a day, but set him on fire and he's warm for the rest of his life.
It's certainly possible to add functionality to CSS to do this, but it will be years before enough people are using browsers that support this for mainstream sites to rely on it. sIFR is certainly not perfect, but allows a surprisingly workable solution for 98% of web users right now.
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?
the 12/05 issue of The New Yorker has a great profile of Carter, including his process, and developing Verdana. It also talks about the difference between print and screen design--imo, rendering fonts onscreen is like drawing in sand, compared to print. The rules of typography for screen are very different, so it's good to have somebody of Carter's background and expertise to show us the way.
I guess i'll have to grudgingly give it to Microsoft for hiring Carter to do Verdana;>
How did people ever read long texts in black letter typefaces?
Mea navis aericumbens anguillis abundat
Well, you can already specify fonts in CSS, so why not simply do that? You can even specify multiple choices of fonts in priority order.
Yes, if the user doesn't have your font, he sees it with another font. So what it sounds like to me is that you need an easy way for a user to download and use your font. There's got to be a better way than using a Flash app.
I do know that sIFR's demo site totally and abjectly fails on my machine using FlashBlock, displaying every headline as a Flash app that I need to click on to make it display, so it doesn't seem to be a particularly perfect solution there.
- Give a man a fire and he's warm for a day, but set him on fire and he's warm for the rest of his life.
Maybe the search engine is faulty, but I just did a search on "understanding" and "comprehension" on this whole discussion and came up with zilch! What the hell is this so called "readability" anyway other than "looks nice to me" ? Literate readers don't read one neat word at a time -- they read blocks of words. And they don't read for some "clarity" or "neat looking" purpose -- they read for MEANING? So tests on font types should be dealing with comprehension -- the ultimate goal.m l
And given earlier controlled tests on paper show that serif fonts in slabs of body text produce up to 5 times the levels for sans serif when comprehension is the thing tested, there's a chance that this "readability" preference for sans serif throws the baby out with the bathwater.
For some details, try http://www.ascilite.org.au/ajet/ajet7/priestly.ht
and the reference to Colin Wheildon's book, "Type and Layout".
The reasons for the difference may have nothing to do with comparative "readability" -- but cultural differences. For example, how many newspapers / books do you see with sans serif body typefaces ? And where did you learn to read ?
It doesn't matter if this is an effect or a cause -- it's an evident trend.
So sorry, until the comprehension issue is dealt with, so much of this discussion is a web wank. Looks nice, just doesn't work ?
Meanwhile, K.I.C.K rules : Keep It Comprehensible, Knucklehead..
A few sans serif letters may be more readable at extremely small point sizes, but only if the serifs on a fuzzy computer monitor appears to close certain letters that are supposed to be open (e.g. 'u' versus a simple, round version of 'a'). (This can be largely solved with well-chosen alternate letter shapes like the extra over-arching hump on the lower-case a, however.)
In general, though, sans serif fonts have a disadvantage over serif fonts at normal text sizes. Serifs force additional letter separation by their very nature, since fonts typically don't allow one letter to actually touch another. This extra space makes the distinction between certain letter combinations much more pronounced.
For example, with Helvetica, which IMHO makes a TERRIBLE web font, the letters "rn" look almost indistinguishable from the letter "m" until you hit about 18 point where you can see the tiny gap. In a serif font, by contrast, the letter combination 'rn' is forcibly spaced apart by the serif on the top left corner of the letter 'n', making it look very different from a lower-case 'm'. Of course, this deficiency of sans-serif fonts can be improved in a professionally typeset document by changing the kerning. However, this may result in other spacing oddities. And, of course, kerning adjustments aren't practical for web content anyway.
The use of sans serif for web pages is a fad. It will fade when people realize that sans serif fonts are inherently harder to read, even on computer monitors. Or at least, it rightfully should fade. Sans-serif fonts are... like... so 2003.
Check out my sci-fi/humor trilogy at PatriotsBooks.
a number of good fonts but italics should alwasy be avoided, except to emphasize a word or short phrase....
Sounds like it's high time for a font:// protocol to be devised. ...I keed, I keed!
CSS already has support for describing fonts. Look at the @font-family at-rule. What's more, Internet Explorer has supported it for years, with the proviso that you provide a font definition in their "eot" format. Since CSS allows you to provide several formats, there's nothing to stop someone inventing an open embedded font format which can be used along side it with CSS2.
There has been debate on Mozilla's Bug Tracker and on Opera's community forums about adding similar support to these browsers, but thus far the developers have been uninterested. It degrades well, though, so there's no reason why you can't go ahead and provide embedded fonts for IE and some generic fallbacks for the rest.
If you're going to post something intriguing like this in you sig, do us a favor and explain what you're talking about in your journal or something! As the owner of 2 2405fpw's, I'm curious.
My other car is a Popemobile