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":
- 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.
- 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.
- 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!"
:)
Sincerely,
Dean Maynard
Stingray Web, http://www.stingrayweb.com/
sent 6/5/2001