Wilk4: Font Size Control Question/Discussion
   Response 1, Dean Maynard - Stingray Web

Hey Jeff,

How have you been? I happened upon your site discussing the dilemmas you face with CSS and font sizing and asking for feedback from other web developers. Thought I'd throw in my .02:

I have been using fixed font sizes more and more. Specifically, using the 'pt' attribute. It is certainly true that all browsers seem to deal with fonts in their own way and all users have their fonts set to who knows what. In my view, whatever solution would provide the most universal control would work best. For sites with very simple layouts, it's not so critical. but the more complex the layout gets, the more control over font size becomes necessary.

I've found that the 'pt' attribute seems to provide the most consistent rendering across browsers and platforms. It is CERTAINLY a far cry from ideal, but the other solutions don't work well for me.

For example, using %ages for font size really puts you in the same situation as using the browser default. There's no way to determine a base font size. For someone using huge fonts, 80% to them is like 150% to someone else. There's just no way of knowing.

Although the modern browsers will allow resizing fonts even when using CSS, I find that using absolute point sizes works best. 9pt Arial in IE and Netscape are "roughly" the same. However, 80% Arial is a total crapshoot because you STILL have no way of knowing what you are starting with.

I used to design with the philosophy of giving the user TOTAL control and respecting that control by not going nuts with absolute font sizes. However, my views on that have changed significantly in the last year or so. I find that people are lazy. I'm guessing that at least half simply leave their fonts at the default size and type style (which in my view are HUGE and ugly). Most people will simply not go to the trouble of resizing their fonts, etc. etc. They just don't care. They want something to look correct "out of the box."

I've been working on a fan site for one of my favorite bands, April Wine. You can see it at http://www.aprilwine.net I've taken liberties here and done a lot of little javascript, dhtml, cookies and CSS "tricks" to get what I wanted done. I've even used Flash in a **somewhat** non-conventional way (I use it for audio only). If you look at the site, keep in mind it's a hobby site, so I've gone significantly heavier on the graphics than I would for any business site. I'm using it almost as an experiment for new ideas.

I've employed the following "tricks":

  1. The site uses frames. I use a hidden frame which functions as an audio player. I've made background sounds for the home page which can be turned on or off by the user. I've also made my sounds in 2 different formats: MP3 and Flash. If the browser detects the flash plugin, it uses the flash sounds. If not, it uses the MP3 sounds (Flash sounds are about half the size, so I prefer to use them). A cookie keeps track of the sound format so this test does not have to be performed every time the page loads. If the cookie is detected, it uses either ".mp3" or ".swf" (the cookie value). So, on the home page, if you cliick the "play now" link, it simply loads the correct audio file into the hidden frame. I use Javascript to write out the embed tag or the Flash object depending on the browser. This way you can play songs on demand without having an audio player pop up. There are 15 different sounds that are randonly rotated to avoid monotony.

  2. After the entire frameset for the home page loads, I set a 2 second delay to run a "preloading" routine in the bottom frame. The delay is employed to 'fool" the browser into thinking the entire page has loaded. I found that without this delay, the page would not load until the preloading routine was completely done (which is a LONG time with a 56k modem). The javascript function preloads virtually every graphic and audio file on the entire site in the background. The bottom frame is rarely changed, so even if the user navigates to another page, the bottom frame stays right there, so the preload routine continues to "run" in the background while the user is browsing the rest of the site. Eventually, all the graphics and sound files are loaded in the background without the user really being able to tell. Seems to work quite well. In fact, in Netscape (uuggh), you can see the files being loaded in the status bar (IE hides this activity). It's a bit similar in theory to all those browser caching programs that go and fetch additional web pages while you are idle.

  3. I use CSS extensively throughout the site with fixed point sizes and typestyles. The way the site is laid out, I have to have control over the fonts. If they were too big, things would really look screwy. There's no way to prevent someone from "super-sizing" their fonts, but at least it is controllable to a point and for the vast majority of users. I haven't really optimized the style sheets, but they seems to work quite well. I'm considering making 2 different sets of style sheets: one for the PC and one for the Mac. Mac fonts seem to render smaller (at least any feedback I've gotten about fonts being too small has been from Mac users). I'd use javascript to detect the platform and then write out the correct style sheet definition.

Anyhow, thought I'd drop you a line and say "hey!" :)

Dean Maynard
Stingray Web, http://www.stingrayweb.com/
sent 6/5/2001