Use pixel font sizes rather than point sized fonts

Hi,

Has anyone got any ideas or experience getting the font-size to remain a constant pixel size across different systems?

I use a laptop with 1600x1200 resolution, so I actually change the DPI setting to 125% normal size (120 dpi). (You can configure this parameter in Windows by right-clicking the desktop, select properties, click settings tab, click the advanced button, and that should leave you on some advanced display settings). Note that this isn't quite the same as changing the font size under the Appearance tab for properties, although I don't know if that causes the same problems.

Basically, I thought you could get around it using CSS code to define a constant pixel size, though I don't think it works in some cases.

i've never done this, nor has it ever even crossed my mind

you make a decent point, but as a professional designer, this is just
asking for too much work and headache IMO. I'm sure css could solve a
great number of cases for you here, but this isn't a problem in particular
that i'd be willing to tackle.

Besides, isn't the point of having higher res screens to provide crisper,
cleaner images?? along with that, you get more screen space. I'm not
so sure increasing the font size is all that valuble in terms of clarity. As
I'm sure you are aware, most fonts are made to be a specific size anyway.

Just my

OK, I've had a closer look into this and the solution is really simple. First, here's the problem. First, the code:



Basically, the code sets a 3 column table - in the left column, it uses css code to define a times font size 12pt. The right column defines a times font, size 16 pixels.

On a system with normal-sized fonts you'll get the following results (screenshot):

<img src="http://wwwisg.cs.uni-magdeburg.de/~nick/tmp/normal.png" border=1></img>

On computers with scaled fonts set (like my laptop), you'll get this instead:

<img src="http://wwwisg.cs.uni-magdeburg.de/~nick/tmp/scaled.png" border=1></img>

Notice how the left (blue) column changes appearance on different systems, because there the fonts have been set using point size, whereas on the right (green) column, the text wraps around the box in the same way on both cases, because it's defined as a pixel size.

The take-home message!?



I've seen so many websites that use point size fonts, rather than using css for pixel size fonts. And sure...its a minority of systems that used scaled fonts, but if you're using css, then its not hard to specify pixel heights instead of point heights for fonts.

funny that you brought this back to life. I just recently ran into a problem
where i need to do just this! and using a master css was my answer as
well. great code drnick. I'll post my master css file sometime in the
future. It consolodates all my possible font uses in 1 file and make it
easy for me call on different colors and sizes, but as you put it, normalize
them.

great thread, great find sir.

No problemo! This thing was bugging me all the time I was doing website reviews, because 90% of them the font sizes were all off.

Is it possible to change the thread title? Something like:

"Use pixel font sizes rather than point sized fonts in your webdesigns!"

might be more obvious.

done