Ah, but the real question is whether was my original post about meeting your accessibility standards or instead finding out what can and cannot be done when it comes to changing fonts based on the designer’s preferences?
You seem very determined on making this thread about your needs and your interests, and that is worse than being a “newbie” - it shows an online immaturity more than anything else…
Debbie
Some minor observations and tweaks:
Just because it works doesn’t mean it’s good practice. What’s happening is the browser is overlooking your failure to code your site properly, figuring out what you meant to do, and doing it properly. Bad idea to grow dependant on your browser to cover your posterior.
MS Sans Serif is a tremendously outdated and obsolete font. Arial is not a particularly well-designed font (Helvetica is far better), but it is legible at most mainstream sizes. Between its legibility and its near-universal market penetration, that’s why it’s used on so many sites.
I like the Gentiums, but maybe 0.5% of your readership has them. The Bitstreams have been superseded by the DejaVu fonts. Both are significantly larger than “regular” fonts; the serifs should probably be considered “slab serifs.”
Let’s tone down the rhetoric in here, please. Ardent discussions are welcome, but some folks are verging towards personal snippery, and that won’t fly. And for the record, without citing anyone in particular, SitePoint is very newbie-friendly, so calling someone a “newbie” or whatever as an insult is not what we do here. Thanks.
Turn CSS off. Use USER.CSS in browsers like Opera. I actually force a lot of pages into 85% body 100% everything else Arial using user.css becuase the site’s developer used some goof assed illegible font. (like a 12px serif for example!)
I’m certain that 1200dpi medium has NOTHING to do with that.
You’ve got to be kidding with that example – Since 99.99% of print books are in a generic serif font like Double Pica Roman or French Cannon, typically in 8 pica novella, 10 pica novel or 12 pica junior reader… The ‘font’ the text is in is only there for legibility, NOT to ‘convey meaning’. Given that every Roc Book I pick up is in “great primer”, and every Del-Ray book I pick up is in their in-house romanesque black – REGARDLESS of what book it is, you’re arguements not holding a lot of weight.
But then, I actually open up books and read the inside instead of ooh-ing and aah-ing over the cover - which is the only place you see variation. I can ONLY assume the covers are of what you speak, though if that was my only factor in picking up a book I’d have a bookshelf filled with trashy romance novels from the busty chicks on the cover and not this giant stack of sci-fi, fantasy, military historicals, and biographies. (I like football and porno and books about war…)
Ok, that’s just talking out your backside – 1) try getting your meaning across without using words. if anything you’ve got that backwards.
Second, we’re not talking verbal, we’re talking PRINT, where 100% of the communication is verbal.
So you’re saying if we replaced all the actual words with hyphens, it would still have meaning? 99% of the content of this site IS TEXT. What font it’s in, what colors and borders are wrapped around it do not add any real meaning to it apart from perhaps bold for headers and padding as dividers.
Mein gott, you realize how absurd those assertions are, right?
Funny, I worked closely with a print graphics department for five years back in the 90’s. I’m willing to bet I know more about typography than you do since I’ve even written font kerning engines from scratch.
As such I realize one VERY important thing about screen vs. print media. 99% of what you can do (Boy, we both love pulling percentages out of our posteriors) in print doesn’t work for screen.
First, you’ve typically got a fifth (lq laser) to a tenth (1200dpi lithographic) to a millionth (actual typesetting) the pixel density. This is why serif fonts are typically harder/disastrous to read on screen at anything less than 20px in size – 80% more than the comfort zone for most “96dpi setting on 75dpi device” screen users, and 20% larger than lf/120dpi users end up with. You may want to poke your head into the “web content accessibility guidelines” sometime.
Second, one of the great things about design for print is you ALWAYS know the size of your ‘target’ device even when the pixel pitch changes. You design for 8"x12" trifold it’s going to be shown at 8"x12" trifold. You cannot make those assumptions when designing for screen without throwing accessibility down the toilet. Dynamic fonts that change size, no two user screens being the same pixel density or resolutions. The best websites are fluid layout adapting to the users screen size, dynamic font sizes to adapt to the users pixel density and preferences, and a simple sans-serif font like arial or verdana so that the most users can read them with the absurdly low pixel density of most displays!
… and yet I go to Apple’s website, and they are using Arial for all content text on my machine (since I have neither lucida grande or helvetica installed). Adobe’s website? ARIAL. Microsoft? IBM? When it comes to content and even most headings – ARIAL. Start up Firebug or Dragonfly and check for yourself! Hell, of the ones you listed only Citibank uses a “different” font – Verdana… Which I believe I mentioned above.
They do this because accessibility is more important to them than some artsy typeface that half the world might not even be able to read.
Hah, funny. Sad part is I would agree with your viewpoint on the usage of fonts IF we were talking print – everything you’ve said bespeaks a print-only background, where that 200 years of research and development ACTUALLY COUNTS FOR SOMETHING.
But you clearly don’t have any experience on this topic when it to design for SCREEN, which is an entirely different set of media than print with an entirely new set of rules. Rules set forth by the limitation of the medium – limitations like a fraction the dpi, inability to predict the target dpi or dimensions, or even just the simple realities of hosting costs and bandwidth restrictions. Design for screen has only been around for about fifteen years, and the current capabilities of screen have been commonplace for only about a decade – the limitations of the current technology making that 200 years of print utterly meaningless. (and will stay meaningless until we get 300+dpi displays and everyone can agree to use the same screen size, viewing distance and resolution!)
Hence why there are plenty of artsy websites out there which are very pretty, but ultimately useless to the end user – which is why all the useful websites (like those of the companies you listed) restrict themselves to proven simple fonts designed for screen that you can be guaranteed everyone already has without any extra download.
Bottom line: SCREEN is not PRINT… which is why people coming from a print background are usually best served by forgetting everything they think they know about layout, fonts, and getting the information presented into the hands of your target audience.
– edit – unless of course all you are designing is the logo/banner, in which case just use an image!
Oh, and why the die hard nerd rage against Arial? It’s the most legible for screen media font (at least under windows) there is… Of course it falls apart with the crap Apple renderer or worse, Freetype with it’s “kerning? What’s that?” attitude – but that can hardly be blamed on the font.
But then I have my own nerd rage/rabid dislike for most of the alternatives – especially M$ new ‘improved’ fonts which I find illegible … like most all the default fonts under linsux or OSX. (where you aren’t even given the option to change the system metric to suit the display)
At certain sizes, it works well, but at other sizes it looks messy. It’s not the worst choice by any means, but I find Calibri, Trebuchet and Verdana to be better at all sizes rather than just some. And I find Arial just plain dull. But I accept that that’s just a personal aesthetic preference!
My intent was not to open up a heated debate, and my stance has been pretty flexible. (I am not a persons with disabilities hater! I just like “creative control”.)
I completely sympathize with you, but you seem to have open a debate here. In regards to fonts I think there is only a handful of fonts you can use online (without them being images). I am not sure which ones those are, but it might be worth looking into it. Probably Times, Arial, Verdana, Tahoma, Trebuchet MS, I am sure there is more.
There is no way to embed fonts on a website without it being an image. If you are very particular you can have a heading as an image, which many do. Personally I prefer to keep my text as text. Sometimes though image titles are more attractive. You should not, and more importantly, CANNOT, have funky text in your main body. A possible workaround is to have your body text as an image, which is a no no, text should be text.
I don’t think the nerds are raging - it’s the designers. Arial is overused. Just like Times New Roman – it isn’t a bad font until you couldn’t find a newspaper in the US that didn’t use it - then it starts to become a little grating. People tire of things - we wouldn’t have a fashion industry and many designers wouldn’t have jobs if that wasn’t the case.
What about the @font-face method we’ve been discussing? That isn’t an image - it’s text. And it does effectively “embed” the font - on about 99% of browsers currently in use.
Just because it works doesn’t mean it’s good practice. What’s happening is the browser is overlooking your failure to code your site properly, figuring out what you meant to do, and doing it properly.
Quite true. I will start using double quotes just to stay safe (most of the time anyway 
).
I like the Gentiums, but maybe 0.5% of your readership has them.
I attach Gentium with @font-face. Then it really doesn’t matter whether my readership has already got them or not, provided I am willing to spend the bandwidth - which in some cases I am.
Both are significantly larger than “regular” fonts; the serifs should probably be considered “slab serifs.”
That’s true; however, I design with larger default fonts because I try to stay aware of the needs of people with poor eyesight. Down around 12 or 13px, I probably would use Arial.
Let’s tone down the rhetoric in here, please.
I’ll second that motion :(.
Wrong, wrong… so wrong. People linked to examples of HOW to do it… the best of the lot being “Font Squirrel”
WEFT/EOT, CuFon, SiFR…
lol, my needs, sorry no I am an accessibility specialist. I get paid to basically make sure the web is accessible as possiblle based off W3C WCAG and Section 508. So going back to your question, can’t these be overwritten? no by making it so the font is temporarily downloaded, thus forcing the user to see a possible unfriendly font 
that is worse than being a “newbie” - it shows an online immaturity more than anything else…
this makes me laugh, since a) you don’t know about me, b) before the age of 23 I had job offers from three companies you know, and probably do something with every day, those jobs were all for the same type of position
again, it’s all about history and what it can teach us. it should tells us not to experiment in vain, but, how can you help? the web platform follows the cows path the worst way possible.
operating systems vs. web
operating systems fonts: sure, you have many. for the interface though, two, three at the most, are used. web platform means interface first and foremost. after that we start talking about presenting the text, the image, the video, the sound. so two, three at most, well picked, should suffice.
what about the art on web? well, the art has images, svg, canvas, flash, silverlight…need more? no font will be able to let you express like these. new fonts are just the novelty, but like any thing fashionable they will not be able to replace the above ways of expression, nor mimic them in a satisfactory way.
office suites vs web
office suites: ship with dozens of fonts nobody uses. sure, at first, it was a feat: new fonts, new ways to express. but in the end you only use two, three at the most, for your documents, spreadsheets, presentations. otherwise, if too many type faces, it starts transmitting all the wrong messages about you: uneducated, superficial, lack of taste, lack of elegance.
on the web, sure, you can embed fonts. but how they render? some do more damage than good, looking like a bad accident.
publicity vs. web
while the publicity relies heavily on colours, shapes, it limits it self to two, three fonts at most per message. for the same reason: the written part is more difficult to grasp by the human brain, while images are interpreted asap.
on the web you can have your publicity move faster than anywhere else. but still, the same rules apply: images are interpreted instantly almost, the text needs to be process. and so, if you want to transmit a message, you go wild with the images, but convey a written message the easiest way possible for the human eyes and brain.
what’s left then? why all the pretty funky fonts are made?
for identity. meaning exceptional rare use. they intend to combine the additional shapes to a type face in an image, easy spotted and interpreted by the humans. those are not for actual text.
examples? well, book covers, logos, chevron, heraldry. first letter in a paragraph. and since most of the fonts available render so ugly, you are better off w/o them.
from my experience: there is a fine line between art and kitsch when using fonts, whether is the print or display. using too many type faces usually doesn’t help the art. the best of what typography can offer has been invented in the past centuries. you can try variants, but you cannot change the human eye or brain. look at the subtitle fonts, how hard it is to find a good one, as opposed to the printed word. and if you invent a new font just from logos and publicity type faces, that’s kitsch.
but we can always switch to egyptian hieroglyphs 
Deathshadow, do you find that people listen to you more when you “huff and puff”??
Here’s a little tip… They don’t. :goof:
And as far as “whose is the biggest”… Well, results speak volumes.
If someone can say they are running a successful website and/or business and have the volume, sales, and $$$ to back it up, they must be doing something right. (Take a look at companies like Apple and SitePoint…)
Everyone else is just an “armchair quarterback”.
Some people have made some pretty strong statements about this and that. I wonder if anyone wants to back up those comments with something that THEY have produced?
Me. I’m simply a mortal. Just trying to learn and be innovative and not think like the masses.
Debbie
I’m on a MacBook…
But then I have my own nerd rage/rabid dislike
I find it hard to believe anyone would use deathshadow60 and “nerd” or “rage” or “rabid” in the same sentence?! 
Debbie
Never said I wanted that. (And that seems to be fueling a lot of the debate.)
Anyone that has seen website or printed materials that are REALLY well designed, knows that choice of Font can have a major impact.
And that doesn’t mean using 5-year-old crayon font for all of the content of Moby Dick?! However, it may mean that you use custom - even “artsy” - fonts strategically in certain places (e.g. Heading, Side-Boxes, Embedded Quotes, Branding, etc.). But if all you have to choose from are the defacto fonts, then that limits the effect you can have.
At this point, I say, “Step back from the font and remain calm…”
Debbie
one thought: why do you think images were used in the first place, instead of, i don’t know, 40px text for banners?
another one: why do you think only a few fonts are adopted?
simple, because of how poor many fonts are rendered.
you think you can change that using another untested, unproven font? no, you can’t. you need to remember a font is rendered differently on different browsers AND different OSs. too many combinations to trust in your new untested font face benefits.
when a font will prove it self on web, it will also be adopted on web, no question about it until then, it’s just a matter of “i can do it”, like css3 or html5. but you should only “do it” to your self! 
to summarize it: a fork, a spoon… can’t do much mods on them. the concept has reached its maturity with no hopes of innovation, only fine tuning.
Don’t forget the other obstacle to broad adoption of a font, besides having “proven itself” - being preinstalled on at least Windows and Mac. Helvetica, for instance, which was referred to earlier as a better alternative to Arial, has only a 7.42% installation rate on Windows machines according to this codestyle.org report.
This is where @font-face steps in, allowing us to use fonts without an installed base.
(Of course Helvetica itself is commercially licensed and can’t be used this way.)
well, i don’t forget that a font has obstacles in becoming standard, but for good reason. hasty decisions are bad decisions.
and to me @font-face is this:
“the designer: oh, man, i only have Arial and Times New Roman and it’s not enough”
“the web entity: ok, ok, stop winning. here is @font-face for you, see if you really were missing something”
“the designer (after two weeks): oh, man, i waisted my time with those fonts. nobody appreciates the work i’ve done with them. oahahaaaaa!!!”
“the web entity: stop crying, stop crying. here, have rounded corners to play with. (thinking to it self: arghhhh, developers today!)”
you forget an essential thought: browsers install. with the installation process, today, you have svg, flash, adobe reader bundled. why not fonts? the alternative font face is an enhancement, so a progressive enhancement solves the older browsers problem too
From what I’ve been reading, it’s either “this way” or “that way”: it’s no “artistic license on the web” or it’s “all artistic license”.
I’m trying to figure this out: are you all pigeon-holing all users into one group?
If you are, than this argument is moot because every design and every bit of code is subjective to the target audience. Whether or not to use @font-face or to use Arial or Times New Roman is all decided by who you’re trying to reach.
i vote ney on the pigeon-holing. a vote yey on the every design and every bit of code is subjective to the target audience.
there is plenty of artistic licence on the web: artwork done by images, svg, canvas, css. @font-face is about as moot as it can get: think javascript, flash. you actually need to go to a specific site to download a resource. ever think of the possibility you are not allowed to? for security or other reasons?
Definitely true but in the opposite way for the web to the way it works in print.
Use @font-face to force a font to download (even if your visitors already have it on their computer) and your page will load slower and a lot more people will therefore leave your site before it finishes loading.
Remove the @font-face and your page will load a lot faster resulting in a lot more people seeing the page.
Most fonts are designed for printing rather than screen display and so if you are going to include a fancy font you are best off limiting it to the @media print section of your CSS.