Comments on: Font Sizing: em, pixel, point, percent and keywords http://blog.w3conversions.com/2009/02/font-sizing-em-pixel-point-percent-and-keywords/ realizations on life, the web, and everything Mon, 16 Mar 2015 06:43:26 +0000 hourly 1 http://wordpress.org/?v=3.0.4 By: nexflo http://blog.w3conversions.com/2009/02/font-sizing-em-pixel-point-percent-and-keywords/comment-page-1/#comment-3662 nexflo Wed, 30 Sep 2009 07:55:10 +0000 http://www.communitymx.com/blog/index.cfm?newsid=941#comment-3662 Automatic px to em resizing can be done at http://pxconverter.com/ <br /> <br />allows file upload and on the fly conversion <br /> <br /> Automatic px to em resizing can be done at http://pxconverter.com/

allows file upload and on the fly conversion

]]> By: Michael Grosch http://blog.w3conversions.com/2009/02/font-sizing-em-pixel-point-percent-and-keywords/comment-page-1/#comment-3661 Michael Grosch Thu, 26 Feb 2009 23:19:34 +0000 http://www.communitymx.com/blog/index.cfm?newsid=941#comment-3661 Thanks for turning the switch on thet lightbulb. <br /> <br />I also found this nice online tool that really helps converting px to em, which I wanted to share: http://pxtoem.com/ Thanks for turning the switch on thet lightbulb.

I also found this nice online tool that really helps converting px to em, which I wanted to share: http://pxtoem.com/

]]> By: rod murgatroyd http://blog.w3conversions.com/2009/02/font-sizing-em-pixel-point-percent-and-keywords/comment-page-1/#comment-3660 rod murgatroyd Wed, 25 Feb 2009 20:25:17 +0000 http://www.communitymx.com/blog/index.cfm?newsid=941#comment-3660 Got your point Stef...pixels are still relative to a screen setup. My reading of the MAC px definition was that 1px = 1pt...NO not unless you are a printing man!! <br /> <br />Looking forward to your next page illustrating this. <br />...Rod Got your point Stef…pixels are still relative to a screen setup. My reading of the MAC px definition was that 1px = 1pt…NO not unless you are a printing man!!

Looking forward to your next page illustrating this.

…Rod

]]> By: Stef. http://blog.w3conversions.com/2009/02/font-sizing-em-pixel-point-percent-and-keywords/comment-page-1/#comment-3659 Stef. Mon, 23 Feb 2009 19:50:20 +0000 http://www.communitymx.com/blog/index.cfm?newsid=941#comment-3659 Rod... Hi again. :) <br /> <br />As I said before, screen CSS should never use the pt unit. That said, it is equivalent to 16px FOR THE BROWSER DEFAULTS. Defaults are the way the browser ships of course, and yes, the user ABSOLUTELY can change that. Most won't, but people with low vision (as well as web developers) may. That's what started my first blog post on this subject about why I use the em unit for sizing my layouts as well as fonts. :) <br /> <br />I'm extremely unclear on what you're saying about fonts needing a "correction factor" based on their point value. On the demo I linked to, you can see that fonts DO render at different sizes based on their font-family. This is why I always recommend checking the size of all fonts in the font cascade you create for elements on your page as you could get varying visual results dependent on what's available on the user's machine. You can't set a different size for each font-family you define in your font cascade (yet!). <br /> <br />As far as the pixel size of the mac - yes, we're now 96dpi just like PCs and apparently have for a while. :D <br /> <br />Opera has the same 16px default for both mac and pc. And they're not actually translating it to em units to zoom (AFAIK), they're simply magnifying the page. Just like IE7 will do by default if you increase the text size (though you can change that in your preferences so that only text zooms). <br /> <br />I think to sum it up, you're thinking from a print perspective (you are originally a print designer?). You're thinking that a pixel is an absolute size with an absolute measurement like a point. It is not. The literal pixel size will vary based on the resolution and set up of a person's monitor but it will still relatively be the same size. (Meaning that all the 16px defaults will be the same size on each monitor -- relative to each other.) <br /> <br />Does that make sense? (I'm going to create a little page to illustrate this shortly. I'll let you know when it's done.) <br /> Rod… Hi again. :)

As I said before, screen CSS should never use the pt unit. That said, it is equivalent to 16px FOR THE BROWSER DEFAULTS. Defaults are the way the browser ships of course, and yes, the user ABSOLUTELY can change that. Most won’t, but people with low vision (as well as web developers) may. That’s what started my first blog post on this subject about why I use the em unit for sizing my layouts as well as fonts. :)

I’m extremely unclear on what you’re saying about fonts needing a “correction factor” based on their point value. On the demo I linked to, you can see that fonts DO render at different sizes based on their font-family. This is why I always recommend checking the size of all fonts in the font cascade you create for elements on your page as you could get varying visual results dependent on what’s available on the user’s machine. You can’t set a different size for each font-family you define in your font cascade (yet!).

As far as the pixel size of the mac – yes, we’re now 96dpi just like PCs and apparently have for a while. :D

Opera has the same 16px default for both mac and pc. And they’re not actually translating it to em units to zoom (AFAIK), they’re simply magnifying the page. Just like IE7 will do by default if you increase the text size (though you can change that in your preferences so that only text zooms).

I think to sum it up, you’re thinking from a print perspective (you are originally a print designer?). You’re thinking that a pixel is an absolute size with an absolute measurement like a point. It is not. The literal pixel size will vary based on the resolution and set up of a person’s monitor but it will still relatively be the same size. (Meaning that all the 16px defaults will be the same size on each monitor — relative to each other.)

Does that make sense? (I’m going to create a little page to illustrate this shortly. I’ll let you know when it’s done.)

]]> By: David Hucklesby http://blog.w3conversions.com/2009/02/font-sizing-em-pixel-point-percent-and-keywords/comment-page-1/#comment-3658 David Hucklesby Sun, 22 Feb 2009 22:55:31 +0000 http://www.communitymx.com/blog/index.cfm?newsid=941#comment-3658 You said: "all current browsers on both platforms now use 16px as their font-size default." <br />Mostly true, but not entirely. My IBM laptop (1400 x 1050px on 15" screen) runs at 120 DPI. While most browsers do indeed use 16px as the "medium" setting, IE (all versions) and Opera use 20px. <br /> <br />Other platforms may run at other than 96 DPI as well. <br /> <br />BTW - The link "view comments" does nothing for me. (Opera 9.63 on Mac.) You said: “all current browsers on both platforms now use 16px as their font-size default.”

Mostly true, but not entirely. My IBM laptop (1400 x 1050px on 15″ screen) runs at 120 DPI. While most browsers do indeed use 16px as the “medium” setting, IE (all versions) and Opera use 20px.

Other platforms may run at other than 96 DPI as well.

BTW – The link “view comments” does nothing for me. (Opera 9.63 on Mac.)

]]> By: Rod http://blog.w3conversions.com/2009/02/font-sizing-em-pixel-point-percent-and-keywords/comment-page-1/#comment-3657 Rod Tue, 17 Feb 2009 21:25:04 +0000 http://www.communitymx.com/blog/index.cfm?newsid=941#comment-3657 Fonts, pt, px and em's <br />Some notes on the subject <br /> <br />In your 'Fonts equivalencies' you really need to specify which browser is in use. Even then if designing you cannot rely on the 'default' font being 12pt, medium etc. It can be changed by the user. I have observed that Opera has a default of 13px but also inherits font size from other HTML and styles it is displaying. I use a css designed to equalize all my 8 browsers to 16px. <br /> <br />The font displayed must have a correction factor according to its 'pt' value. That is, if Arial font is 12pt (16px) in size on the screen then Times New Roman at 12pt is 92% of that and Super Black SF is 126% but still defined as 12pt. Even changing to 16px font size the point values are honoured. <br /> <br />I don't have a MAC to confirm the 16px default but would doubt it as the pixel size of the MAC would now have to be 96dpi for correct page display of HTML documents. Or is it that the MAC browser is refomating the page as if it were a 12px font (72dpi). This would be a possibility as the Opera browser seems to be able to format all px values to em units so it can zoom everything correctly. Then how does the MAC handle the different size units (pt, px, em, ex and percent) and how does it know that a web page is formatted for a PC screen? <br /> <br />In your em-based div sizes example the results are what I would have expected. <br /> <br />My concern has been in achieving a standard format definition that works between browsers and secondly ensuring code generated is scaleable. <br /> <br />I would wish for more browser developement tools such as the <br />'Developer:javescript console' of Google Chrome and the 'Advanced:Developer Tools' offered by the Opera browser. Both of which relate the css properties to the code. Also a better code generator program that works in native 'em'. I recently complained to one company because its code could not be zoomed even twice without loosing text or over flowing onto it's non scaled images. <br /> <br />Perhaps more questions than answers still but the relationships are becoming clearer. <br /> <br />regards...Rod <br /> <br /> Fonts, pt, px and em’s

Some notes on the subject

In your ‘Fonts equivalencies’ you really need to specify which browser is in use. Even then if designing you cannot rely on the ‘default’ font being 12pt, medium etc. It can be changed by the user. I have observed that Opera has a default of 13px but also inherits font size from other HTML and styles it is displaying. I use a css designed to equalize all my 8 browsers to 16px.

The font displayed must have a correction factor according to its ‘pt’ value. That is, if Arial font is 12pt (16px) in size on the screen then Times New Roman at 12pt is 92% of that and Super Black SF is 126% but still defined as 12pt. Even changing to 16px font size the point values are honoured.

I don’t have a MAC to confirm the 16px default but would doubt it as the pixel size of the MAC would now have to be 96dpi for correct page display of HTML documents. Or is it that the MAC browser is refomating the page as if it were a 12px font (72dpi). This would be a possibility as the Opera browser seems to be able to format all px values to em units so it can zoom everything correctly. Then how does the MAC handle the different size units (pt, px, em, ex and percent) and how does it know that a web page is formatted for a PC screen?

In your em-based div sizes example the results are what I would have expected.

My concern has been in achieving a standard format definition that works between browsers and secondly ensuring code generated is scaleable.

I would wish for more browser developement tools such as the

‘Developer:javescript console’ of Google Chrome and the ‘Advanced:Developer Tools’ offered by the Opera browser. Both of which relate the css properties to the code. Also a better code generator program that works in native ‘em’. I recently complained to one company because its code could not be zoomed even twice without loosing text or over flowing onto it’s non scaled images.

Perhaps more questions than answers still but the relationships are becoming clearer.

regards…Rod

]]>