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 ?
Sans serif...
http://www.intocablesdelivery.com/
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?
...is that you kill the fun for a lot of stupid web designers who like to work hard on a bad idea.
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.
Thank you for giving us a WHOLE FUCKING CATEGORY of fonts. You do realize what 'sans serif' means, right? Hint: It's not the name of a font.
And it's name is COURIER. Nothing else works in Lunix, anyway.
- Eat it.
<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.
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.
I agree. I prefer reading white text on a black background on a computer if I do it for extended periods of time. My eyes don't feel as tired, and the light in the room can be dimmer (like at night) without making me squint.
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.
The problem with most of the Fonts is, that they aren't optimized for Screen. The Article mentions Helvetica as a good Screen Font, personally i have never seen a good aliased Helvetica.
Aliased Text still provides better readability for small Font sizes.
A short List of screen-optimized Typefaces that can be found on almost every System:
serif: Georgia, Times
sans-serif: Arial, Verdana, Trebuchet
monospace: Courier
Since CSS allows you to choose different Typefaces for one Element, the last Font should allways be the "Standard Font".
example:
element {
font-family:Helvetica,Arial,sans-serif
}
If Helvetica isn't installed on the System, Arial will be used. If Arial isn't installed, the Font will be defined by the Browser (in this case the Browsers "sans-serif" Font).
It's also a good Idea to define a font-size for the body Element and then use relative values ("em" values) to set Font Sizes for Headings or similar.
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.
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.
It needs to be leet-able or it will miss the 12-18 demographic.
/me age 25-30
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!
"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."
Well there goes my site on Egyptian Hieroglyphics. Oh wait! You don't have that font, and it would be "dictating" for me to provide it. Mr "I'm insecure and afraid of losing control" web browser man.
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.
Anybody who admits to the design of the ESPN web page automatically loses points in my book. That website has never ever displayed in a readable fashion for me. I use it regularly to demonstrate poor page design. The site is unusable.
And the number one culprit for the layout problems on ESPN is touted here as a feature.
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 really really wish more web designers would think about specifying fonts for non-Windows boxes as well, what with the web being a cross-platform medium and all. This article in particular would have been a great place to talk about this. Linux has got a great set of fonts in the Bitstream Vera family which are becoming the default on many distros, and yet I haven't seen many sites except those of open source projects use them (AUCTeX uses Vera Sans to good effect). And I'm sure Mac users have tons of beautiful fonts installed by default -- Apple doesn't settle for cheap typography -- but does anyone else know about them? Code Style has a font survey of common fonts on Windows, Macs and Unix, but its relevance is doubtful since the results are being aggregated since 2001!
And to all the people screaming that websites shouldn't specify fonts at all, well, come on, really. Typography is an important part of design, especially in a text-heavy medium like the web, and the right font can go a long way in making text more readable and conveying a particular style or mood at the same time. Try typesetting your resume in Trebuchet MS sometime, or a happy birthday card in Baskerville. Just because it can be abused (is there anything that can't?) doesn't mean it's no good. Seriously, that sounds as reactionary as any extremist conservative. Besides, you can always disable "Allow pages to choose their own fonts" in your browser's preferences. Oh, and why not disable colours, backgrounds, CSS and everything else while you're at it? You never know when some dumb web designer might make the site unusable because of bad colours or poor layouts. Even better... just switch to Lynx, set your preferred terminal font and colours, and you're good to go!
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).
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).
There is already support in CSS 2 for downloadable fonts. It is the
@font-face "at-rule" which allows a new font-family to be named (or an existing one replaced) with a "src" attribute specifying the URL for the font data. Only Internet Explorer supports this, at present, and the font files have to be OpenType fonts created using Microsoft's WEFT utility. Other browsers do not support this feature of CSS at all, and even if they did, the CSS standard does not specify the format of the font files for the "src" attribute, so browser developers would have to agree on at least one common format in order for this to be usable in a cross-browser setting. However, it will work in Internet Explorer, which is the largest group of users.
How is the solution described in the article better? It is not a cross-browser solution, either, since it depends on Flash being installed. It is also a hack, requiring markup that puts Flash movies into documents instead of head tags, etc. That is not semantic markup, something that the "Designers" camp has never been particular sympathetic to, but which others find important. The @font-face at-rule is integrated with the rest of CSS, and therefore is consistent with the overall thrust of standards development. What is described is just the tag all over again, only much worse.
It seems that if downloadable fonts is really a need, then time would be better spent in implmenting support for @font-face in Firefox, Opera, Safari, etc, and agreeing on the font formats for the src attribute. Since Microsoft browsers support OpenType, that would seem to be a starting point.
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.
I mean, really, what else matters apart from the font being invisible to the unaided eye?
The sifr link in the article is stupid. This is better
> /me age 25-30
I bet you live near Portland, Oregon and created the infamous _nus software too. How far off was I?
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
RTFA!
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"
Far too many of the responses here indicate that the /. community has no clue quite how far modern web professionals are going to keep the HTML user-friendly and standards-compliant, while still making their website pleasurable to view on as many browsers as possible (so they get web traffic from people besides, you know, geeks).
/. community is quite aware of what the web-design community is doing. Most of us are against it, as the web-design community is missing the fundamental *point*.
Actually, most of the
Content is king. The web was designed to not let you specify format for a reason. Attempting to task this on later without creating a new standard for the purpose is entirely the wrong way to go about it.
If you want to add something to the web, do it the right way. sIFR and similar stupid hacks are, without any room for argument, the wrong way to do it.
Garlic? Bread?
(apologies to non-UK readers who may not get the joke)
At least your answer here is more specific. Think of someone asking "What would make a good gourmet meal?" and your answer was simply "meat". Answering the slight variation of "something involving meat" at least indicates that you are aware that "meat" isn't a gourmet meal in itself. The answer is still just as generic and useless, however. Do you see the difference? Articles and qualifiers can make a world of difference.
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.
"I'm suprised that so far the comments have all suggested that website designers have no business specifying fonts for their websites, and that the user's preference should trump all."
I'm not. Geeks primarily are an insecure lot. You see this in this story, and you saw it in the KDE story yesterday. Someone or something is always "taking away" something from them, and they feel threatened. Even if they have control (can change fonts, can select WM). They still want the illusion preserved at all costs.
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 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.
http://www.w3.org/TR/REC-CSS2/fonts.html#font-desc riptions
Notice that you *can* embed fonts with CSS. No obnoxious Flash shit to deal with. Okay... it's MSIE only, but it is part of the CSS standard.
--
alex
The revolution will be mocked
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.
Webdings.
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;>
Verdana. I'm saying this as a former anti-anything-Micrsoft Linux zealot.
.exe format, since a lot of Windows machines didn't have these fonts available at the time.
.fonts.conf to disable anti-aliasing, the very attractive Bitstream Vera fonts were no longer so attractive. One reason why no one has bothered to improve the non-anti-aliased look of Bitstream Vera is because Verdana uses a patented technology called font hinting, to look attractive when not anti-aliased. Linux, being open-source, can not use this patented technology in countries with software patents without being open to lawsuits.
I once posted a blog about this:
In the beginning, Linux did not have any vector fonts that looked good on the screen--a vector font being a font that can become any arbitrary size and printed without looking blocky. Linux used one set of fonts, called bitmapped fonts, to display information on the screen, and another set of fonts to print out documents. These fonts looked more or less like each other. This allowed the screen fonts to look very attractive on the screen, and the printing fonts to look attractive on paper. Since paper has a lot more resolution than a computer screen, the fonts should be different.
The main disadvantage to this approach was that the screen fonts could only be displayed in a small number of different point sizes, such as 8, 10, 11, 12, 14, 17, 18, and 20 point. There was no way to have a 9-point screen font. This made things difficult for word processors, since you either had to have a nice-looking screen font which often wasn't quite the same size as what would be printed, or use a printing font on the screen that looked unattractive until it was printed. For the web, however, it was a reasonable compromise.
Microsoft chose a different approach. Once the web started to become popular, Microsoft hired font designer expert Matthew Carter to design a font that would look very attractive on the screen at any resolution, and look reasonably attractive when printed. The crown jewel of his labor was the Verdana font, which Microsoft made available as a free download in a Windows-specific
And, indeed, the Verdana font is a very attractive screen font. There is plain simply no other vector font that is this attractive on the screen.
Verdana was designed at a time when computer displays normally could display only 256 colors. As a result, it is very well optimized to display using only two colors.
Well, a few years passed and Linux became a more viable desktop operating system. Computer displays also became far more advanced, being able to display thousands or millions of colors on the screen. This made a technology, called font anti-aliasing, possible.
Anti-aliasing is a technology that makes a font appear to have more resolution than the screen has by using grey (or even color on some displays) tones to simulate a given pixel having some black and some white dots at a resolution higher than the screen resolution. Because of the way human vision works, this is a very convincing illusion that makes fonts appear to have more detail and be more attractive.
Once this anti-aliasing technology became viable, a font that looks very nice when anti-aliased, Bitstream Vera, was developed and made available for Linux. Bitstream Vera is a very attractive font, which rivals Verdana when anti-aliasing is turned on.
However, not everyone, including myself, fully likes anti-aliasing. The problem is that anti-aliasing makes the fonts look a little blurry; many people's eyes compensate for this by trying to focus on the fonts, which results in fatigue and eyesore. Anti-aliased fonts can give me migrane headaches if I look at them too long.
After I figured out how to set up
The way I have worked around this issue is to download a program that uses this patented technology from a country that doesn't have software patents.
The real solution to this mess is to have some geek add a feature to Firefox th
How did people ever read long texts in black letter typefaces?
Mea navis aericumbens anguillis abundat
Verdana, hands down, is the best font for current low-resolution computer screens (I'm saying this as a Linux fanatic who looked at all of the Bitstream Vera fonts and carefully comparing them to the mail Microsoft web fonts). While Microsoft no longer has this font on their web page, it can be found here:
http://corefonts.sourceforge.net/
Note that Verdana looks like a cheezy 30s art-deco font when printed out. Note also that FreeType has to be recompiled with the patented hinting enabled for Verdana to look nice.
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.
I have found it surprisingly difficult to find software that creates fonts (that doesn't cost a fortune).
There was one project for Mac on Sourceforge but I am a Windows guy.
Is this an OSS project that needs addressing?
Dgatwood, good post. Thanks.
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!
I don't know what you're bitching about, because that site looks great on both my Mac OS X system and on my Windows system right next to it. The text is clear and legible in both, nicely sized and antialiased, even the italics look great.
I think you should check your computer before you blame it on the website. I would put that website as among the top 10% on the web.
As for your comment about letting users contort your browser however they want, I quite agree that style and presentation are important and the designer should be free to experiment. However, it is perfectly possible to experiment and create exceptional and never-before-seen layouts without fucking up the UI with plug-ins replacing the standard interface elements. Why use Flash, which has unsolvable accessibility and consistency problems, instead of using the standard tools like CSS and XSLT and SVG? Fuck Flash, get something that obeys the UI rules. Those are far more important than ease of website creation.
Verdana makes the web unreadable. For reasoning see this article:
Why you should avoid Verdana
unless you're talking about pencils or computers or food (et cetera). bitching about text aliasing is missing the point - because ultimately the point is usability and communication.
anti-aliasing itself, when used at the sizes that are reasonable for reading decent quantities of text on-screen, does not contribute to readability. anti-aliasing is nice for big text where the blurring does not approach the critical level of detail in the face itself.
the thing these ever-striving folks need to realize is that the common screen will not approach print any time soon. the color space is different, the resolution is different, and most important (and most subtle) the purpose is different too. when that changes, it won't be the web designers or even macromedia making the advances; the necessary advances are outside the realm of design, they're physical.
and yes, i say all of this as a successful designer. get it through your heads: the web is not print. admit that fully and completely and your sites will improve dramatically.
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
This is Adblock causing you trouble. Many people are reporting the same trouble with 1.5 - having to resort to IE (ugh!!) to get java and flash to work properly. The fix is to uninstall Adblock extension and find the "Adblock Plus" extension. Here is the link - remember to uninstall Adblock first, restart browser, then go here: http://www.extensionsmirror.nl/extfirefox/Adblock_ Plus_0.5.11_enh.xpi
You might have to enable downloads from this site first.
It works exactly like Adblock and best of all - Java and Flash work beautifully just as before.