Use pixel font sizes rather than point sized fonts

  • dr nick
  • Proficient
  • Proficient
  • dr nick
  • Posts: 263
  • Loc: Frankfurt

Post 3+ Months Ago

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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

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

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 :my2cents:
  • dr nick
  • Proficient
  • Proficient
  • dr nick
  • Posts: 263
  • Loc: Frankfurt

Post 3+ Months Ago

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

Code: [ Select ]
<head>
<style type="text/css">
<!--
.pixelheight {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
}
.pointheight {
    font-family: "Times New Roman", Times, serif;
    font-size: 10pt;
}
-->
</style>
</head>

<body>
<table>

<tr><td class="pointheight">Times 10pt<td></td><td class="pixelheight">Times 16px</tr>

<tr><td bgcolor="#1111FF"width="100" class="pointheight">
This is a bunch of text that you might want to have in a column that neatly fits down the side of your page in keeping with the design
</td>

<td width="100"></td>

<td bgcolor="#00CC00" width="100" class="pixelheight">
This is a bunch of text that you might want to have in a column that neatly fits down the side of your page in keeping with the design
</td></tr>
</table>
</body>
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. .pixelheight {
  5.     font-family: "Times New Roman", Times, serif;
  6.     font-size: 16px;
  7. }
  8. .pointheight {
  9.     font-family: "Times New Roman", Times, serif;
  10.     font-size: 10pt;
  11. }
  12. -->
  13. </style>
  14. </head>
  15. <body>
  16. <table>
  17. <tr><td class="pointheight">Times 10pt<td></td><td class="pixelheight">Times 16px</tr>
  18. <tr><td bgcolor="#1111FF"width="100" class="pointheight">
  19. This is a bunch of text that you might want to have in a column that neatly fits down the side of your page in keeping with the design
  20. </td>
  21. <td width="100"></td>
  22. <td bgcolor="#00CC00" width="100" class="pixelheight">
  23. This is a bunch of text that you might want to have in a column that neatly fits down the side of your page in keeping with the design
  24. </td></tr>
  25. </table>
  26. </body>


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!?

Quote:
When you are carefully aligning text so that it flows with your design, speak the language of graphic design -- in pixels!!! So define your font size in pixels!


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.
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

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. :thumbsup:
  • dr nick
  • Proficient
  • Proficient
  • dr nick
  • Posts: 263
  • Loc: Frankfurt

Post 3+ Months Ago

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.
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

done :)

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 70 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.