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."
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.
Indeed. The article makes some reasonable points, but falls over by using http://www.jaredigital.com and http://www.coudal.com as sample sites. Both of those make schoolboy errors when it comes to web typography. They override the user's default font, and they specify explicit font sizes in pixels. Which might work fine for them, but not everyone has the same size or resolution display that they do. Font sizes should always be given as a percentage of the user's preferred height, and never specified explicitly. Sigh.
(Yes, in addition to being a web page designer, I'm a typography freak)
"The invisible and the non-existent look very much alike." -- Delos B. McKown
And for a very good reason. Flash contents are not indexed by Google. Not even when it's text only.
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?
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 point of highlighted has already been touched on, it can be highlighted.
But the strength of sIFR is that under the hood, the markup remains <h1>Replaced Text</h1>. Maintaining it's searchability, symantic correctness, and in the event the user doesn't have the appropriate version of flash or has JS turned off, the headline defaults to the style specified in the CSS, Trebuchet, Verdana, what have you.
sIFR respects the users preferences while at the same time delivering the cherry on top when it is permitted. Because whether or not you care to admit it, designers like to make their pages look nice, and that means typefaces too.
Can't we all just get along!!?
__
Thou hast besquirted me, O leotarded one.
the anti-aliasing make the overall impression of the font too blurry
e r/Step1.aspx
Try this; it worked well -- much better than I'd hoped -- for me:
http://www.microsoft.com/typography/cleartype/tun
So now you're telling the user what they want!?
If the user has flash installed and JavaScript turned on then that is the only green light/permission I need to serve the user the content they have approved. I create pages out of xhtml+css with markup, presentation, and behaviour seperated correctly. So long as I keep the Javascript in the behaviour column, the flash in the presentation column and the headline in the markup, the user has to freedom to view whatever areas they want without compromising the acctual content. sIFR has a place to sit in the architecture and it doesn't bully the content around.
__
Thou hast besquirted me, O leotarded one.
For further reading into the web designer community, poke around sites like the following:
so imo, mostly, this argument falls flat. Perhaps more important is the accessibilty of a website? Maybe this is more important:
http://www.w3.org/WAI/
(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.)
Yes, the article completely missed out on the Very Most Important Font Size Issue on the Web.
That is, of course, how Windows treats points as equivelent to pixels, whereas Macintosh and UNIX system treat points as 72-per-inch like they're supposed to be. (X11 has lots of problems with font rendering if you use the older APIs, but it does know how to read the DDC codes from your monitor to calculate the correct resolution: check xdpyinfo | grep dimensions.)
(I don't use Windows enough to know--do Mozilla and Opera have the same pixels vs. points issue, or is it Internet Explorer only?)
But the absolute best advice on font size is the one you offer: relative sizes from the user's chosen default.
The Minimum Font Size setting in the new Mozilla and Safari browsers is crucial to us non-Windows users. But, that just sets a floor--without relative sizes, we see no font size changes for anything that is specified "too small".
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.
Kerning has to be specified in the font you are using in order to work. And doing it well is one of the hardest parts of font design. Perhaps you have badly kerned fonts installed on your system?
I'm currently running KDE 3.2.1, and can definitely see kerning in my fonts; for instance in K3b, the menu item "Add files..." has the first 'd' pulled slightly left of where it would normally sit. However, I wouldn't say the font it's using (called just "sans serif" in the control centre, so I'm not sure what it is exactly) is great. Although switching on "sub-pixel hinting" in the control centre improves it substantially, there are still problems: "sk", "si" and "sh" seem to be too close together, and "ol" seems to be too far apart, but the big ones ("AV" and the like) all kern correctly.
It seems to me, therefore, that it just comes down to using badly designed fonts.
Actually in some browsers, such a Firefox, you can actually change the DPI. I have mine set to 96dpi on my MS-Windows machine.
Jumpstart the tartan drive.
Here's a link to MS Typography section...
http://www.microsoft.com/typography/default.mspx
...if only there was a "Didn't Bother To RTFA" mod.
Unhighlightable: In addition to the obvious accessibility features, sIFR text can also be selected, copied, and pasted by users. It also zooms with the user's text-zoom settings, although this only occurs on page load and not on-the-fly. And finally, of course sIFR works with linked text (anchors).
Unsearchable, undisplayable without Flash: If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
And just for an added bonus, before someone complains about accessibility:
sIFR is fully accessible to screenreaders and other assistive technology. Don't take our word for it. Ask Matt May of the W3C who endorses it as an accessible method to create rich typography on the web. Or ask Joe Clark, one of the world's leading accessibility experts, whose interest in typography is only trumped by his interest in accessibility.
The knee-jerk reaction of some people whenever they see Flash is that it must be inaccessible because it's Flash. What we've done with sIFR, however, is turn that model completely on its head. Your (X)HTML document is still the exact same document it was before sIFR kicked in. Your code is untouched and sIFR is completely abstracted to the javascript layer; therefore, your accessibility, your search engine friendliness, and your semantics are the same as they were before the day you decided you like nice fonts.
They use studies and examples to show that not only is x-height important to legibility, but ascenders and descenders are also vital. Compromising the ascenders of a font with increased x-height (such as in University Roman) can decrease the legibility. What's most important is a balance between x-height, and ascender/descender size.
The ascender/descender relationship to legibility/readability is also WHY IT IS MORE DIFFICULT TO READ TEXT IN ALL-CAPS, EVEN THOUGH IT HAS THE LARGEST X-HEIGHT OF ALL.
Overall, they found that sans and serif fonts are roughly equal in readability, with serifs having a slight advantage depending on the size of the font.
Though the article is written more towards print typography, the summary advice applies to web as well.
As a republican I feel it my responsibity to manufacture criminals. People need punished!