Pixels and Points in CSS Font Sizes

[Genimuse]

I come from a print background so I naturally choose point sizes in my CSS for fonts. The theory in part of my brain says that will make it easy to read at any resolution.

Of course it fails terribly when, for example, I'm expecting a menu on the left to fit over a background graphic.

So I want to convert my points to pixels. The problem is I don't really know the appropriate conversion. If all screens were at 72dpi then I know that 12px = 12pt, but if I just convert over like that everything gets too small. I know that 96dpi is used on some screens, but in that case 16px = 12pt, which seems too large.

What's going to work best?

Thanks in advance.

 

[SPYDERIX]

Hi,

This question has been asked b4 and there were tons of posts and I don't remember an answer coming up. Most likely the reason for no answer is what you have already pointed out:

"If all screens were at 72dpi then I know that 12px = 12pt, but if I just convert over like that everything gets too small.[/b]"

It's up to you what unit of measure you decide to go with, the point sizes are easily changed as part of some browser settings if the font is too small or too big, but when you use pixel sizes this can't be controlled in most browsers.

Hope this helps!

Keep up to date with my 2003 NHL Playoffs Wallpaper

http://www.spyderix-designz.com/nhl/nhl_playoffs.jpg

 

[Genimuse]

Thanks.

I did a search of the forum here for "pixel point" and "pixels points" but the two hits didn't seem to be asking the same question -- sorry if it's been asked before.

 

[SPYDERIX]

No need to apologize, I was just pointing out that no-one could come up with an answer b4 either and wasn't sure if you'd get a good enough answer to your question tonight.

Keep up to date with my 2003 NHL Playoffs Wallpaper

http://www.spyderix-designz.com/nhl/nhl_playoffs.jpg

 

[EdwardMartinIII]

Well, the real answer is to not specify. Let the client browser display in the method chosen by the client. Specify smaller or larger if you wish.

Web page is-not-equal-to print page, therefore it's dicey at best trying to connect-the-dots, function-wise.

Think relative, think let-the-user-decide, think who-really-ought-to-be-in-charge-of-showing-the-information, think the value of the container versus the value of the message, think people with bad eyes squinting at little text even though they told the browser big text.

If you want to try and force browsers to do your bidding, the table at

http://www.cgioutlet.com/all/browse/css/cssmeasure.shtml

might help.

But again, I urge you to consider the philosophy driving this desire to control other people's browsers.

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[Genimuse]

Thanks for the thoughts. Unfortunately I need a different solution, so here's the site:

http://www.areclinic.org

I used some CSS and some old school, and am not in a position to rewrite the whole thing.

I recently changed the size in the CSS of that menu text from 12pt to 16px so that I would know that it would likely fit in the 125px-wide space.

Unfortunatley in IE6 the menus at the left fit nicely over the background image. In IE5 and in NS6 and 7 the menu text flows over the background blue and into the white. It seems as though it's a difference in font rendering, but I don't know. Either way in such a situation I don't really have the option of allow the text to flow wherever because the rollover menus will end up all over. I know the current situation isn't ideal but I at least need to resolve the overflow problem a bit.

I supposed I could put a narrower table cell there (or a nested table -- yeah, I know, deprecated), but I'm hoping to create a quick fix that will at least work for 90% of the browsers out there.

Any thoughts on how to do so?