Comments on: Convert em,px,pt and % in css http://sureshjain.wordpress.com/2007/07/06/53/ World of technicians..................... Wed, 11 Nov 2009 06:29:33 +0000 http://wordpress.com/ hourly 1 By: izdelava spletne strani http://sureshjain.wordpress.com/2007/07/06/53/#comment-2727 izdelava spletne strani Mon, 09 Nov 2009 19:58:31 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2727 Thanx fot this post, been looking around for this a long time. Really helpfull Thanx fot this post, been looking around for this a long time. Really helpfull

]]> By: CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes : Speckyboy Design Magazine http://sureshjain.wordpress.com/2007/07/06/53/#comment-2726 CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes : Speckyboy Design Magazine Mon, 09 Nov 2009 16:03:22 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2726 [...] Convert em,px,pt and % in CSS [...] [...] Convert em,px,pt and % in CSS [...]

]]> By: shirley http://sureshjain.wordpress.com/2007/07/06/53/#comment-2725 shirley Mon, 09 Nov 2009 10:48:57 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2725 nice... It helped me Keep it up nice…
It helped me
Keep it up

]]> By: Brightshore Miami http://sureshjain.wordpress.com/2007/07/06/53/#comment-2723 Brightshore Miami Fri, 30 Oct 2009 18:18:22 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2723 Great post, not too many helpful resources on typography and usability on the web! Great post, not too many helpful resources on typography and usability on the web!

]]> By: Nitin http://sureshjain.wordpress.com/2007/07/06/53/#comment-2701 Nitin Thu, 08 Oct 2009 15:05:00 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2701 There is no clear cut relationship between EMs and pxs, because EM sizes are based relative to the size of the font, whereas px sizes are based relative to the screen resolution. Since those two elements are disparate, no exact correlation can be made. There are ways, however, to get fairly close. One method is to set the base font size (the font-size property on the element) to around 62.8%. This makes the base font, or 1.0em, approximately equal to 10px. It's not exact, and changes from font to font, but generally speaking it's pretty accurate. With that font setting in the body, you can use EMs as px equivalents like so... 1.0em = 10px 1.1em = 11px 1.2em = 12px 2.0em = 20px 5.0em = 50px etc. There are a few caveats, however, the major one being that it isn't a precise conversion so elements that must be EXACTLY Xpx are unlikely to be so. The other big danger is that setting the base font this small makes IE text resizing somewhat problematic, as this 62.8% size becomes the "meduim" setting for IE. Since IE only allows two font-size increases ("large" and "larger"), those who need larger fonts may not get a big enough size to suit their needs. Likewise, sizing down to "small" or "smaller" makes text virtually unreadable. There is no clear cut relationship between EMs and pxs, because EM sizes are based relative to the size of the font, whereas px sizes are based relative to the screen resolution. Since those two elements are disparate, no exact correlation can be made.
There are ways, however, to get fairly close. One method is to set the base font size (the font-size property on the element) to around 62.8%. This makes the base font, or 1.0em, approximately equal to 10px. It’s not exact, and changes from font to font, but generally speaking it’s pretty accurate. With that font setting in the body, you can use EMs as px equivalents like so…

1.0em = 10px
1.1em = 11px
1.2em = 12px
2.0em = 20px
5.0em = 50px
etc.

There are a few caveats, however, the major one being that it isn’t a precise conversion so elements that must be EXACTLY Xpx are unlikely to be so. The other big danger is that setting the base font this small makes IE text resizing somewhat problematic, as this 62.8% size becomes the “meduim” setting for IE. Since IE only allows two font-size increases (“large” and “larger”), those who need larger fonts may not get a big enough size to suit their needs. Likewise, sizing down to “small” or “smaller” makes text virtually unreadable.

]]> By: Abel Braaksma http://sureshjain.wordpress.com/2007/07/06/53/#comment-2697 Abel Braaksma Wed, 30 Sep 2009 17:16:17 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2697 (my previous tries received a "discarded" message, perhaps your spam bot is set too strictly..., you can email me if you know more) Some thoughts: An em is dependent on the specifications in the font itself, there's no direct relation to pixel size. PPI is pixels per inch, which should be taken into account before doing any calculation (a Mac has 76 PPI, old Windows has 72, newer Windows have 96 ppi), this influences the size of the rendered font by large. Local settings (i.e., for people with bad visuals) can have an even smaller points per inch. The best thing is, eventually: test and find the correct factor for your specific font on your specific display and use that factor throughout. Perhaps of interest, but not fully related: <a href="http://www.undermyhat.org/blog/2009/09/understanding-font-substitution-in-browsers/" rel="nofollow">font matching resolution by browsers</a> which can influence the size of your glyphs unpredictably (my previous tries received a “discarded” message, perhaps your spam bot is set too strictly…, you can email me if you know more)

Some thoughts: An em is dependent on the specifications in the font itself, there’s no direct relation to pixel size. PPI is pixels per inch, which should be taken into account before doing any calculation (a Mac has 76 PPI, old Windows has 72, newer Windows have 96 ppi), this influences the size of the rendered font by large. Local settings (i.e., for people with bad visuals) can have an even smaller points per inch.

The best thing is, eventually: test and find the correct factor for your specific font on your specific display and use that factor throughout.

Perhaps of interest, but not fully related: font matching resolution by browsers which can influence the size of your glyphs unpredictably

]]> By: rawraj http://sureshjain.wordpress.com/2007/07/06/53/#comment-2694 rawraj Fri, 25 Sep 2009 16:52:11 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2694 Thanks a lot m8 I always thought that pts and pixels displayed differently.(maybe because I never thought of using odd numbers in pixel sizes). I would always convert 10pt to 12 pixel and would just assume that the browser is displaying the font "weirdly" Well after reading this article i put Hello world wrapped in span tags and inline css next to each other. Gave one span 10pt and other 13 px and found it was the exact same size. So much for assumption(didnt someone say assumptions are the mother of all f#@#ups :-P) Got to print this stuff and keep. Helpful I get some stuff designed in corel draw and there they follow the point system. I need to read up on why pts are better then pixels or is em the best? Thanks a lot m8
I always thought that pts and pixels displayed differently.(maybe because I never thought of using odd numbers in pixel sizes).
I would always convert 10pt to 12 pixel and would just assume that the browser is displaying the font “weirdly”
Well after reading this article i put Hello world wrapped in span tags and inline css next to each other.
Gave one span 10pt and other 13 px and found it was the exact same size.
So much for assumption(didnt someone say assumptions are the mother of all f#@#ups :-P )
Got to print this stuff and keep.
Helpful I get some stuff designed in corel draw and there they follow the point system.
I need to read up on why pts are better then pixels or is em the best?

]]> By: dean peters http://sureshjain.wordpress.com/2007/07/06/53/#comment-2638 dean peters Tue, 18 Aug 2009 18:01:04 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2638 Found a nice page that also provides conversions relative to the size you set for the BODY tag: http://PXtoEM.com Found a nice page that also provides conversions relative to the size you set for the BODY tag: http://PXtoEM.com

]]> By: Hopelessly, I’ll Love You Endlessly » Audio Rush http://sureshjain.wordpress.com/2007/07/06/53/#comment-2630 Hopelessly, I’ll Love You Endlessly » Audio Rush Fri, 14 Aug 2009 09:16:56 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2630 [...] Px, em ,pt and % Calculator- This website was very useful when I was converting from px to percentage (%). The reason for converting is because if you use px and pt for your font and line-height measurements and it’s too small; the visitor won’t be able to enlarge your font in their browser. This is why it’s best to use % or em. The calculator isn’t 100% correct and it varies but it’s pretty easy to work out once you know how. [...] [...] Px, em ,pt and % Calculator- This website was very useful when I was converting from px to percentage (%). The reason for converting is because if you use px and pt for your font and line-height measurements and it’s too small; the visitor won’t be able to enlarge your font in their browser. This is why it’s best to use % or em. The calculator isn’t 100% correct and it varies but it’s pretty easy to work out once you know how. [...]

]]> By: Girish http://sureshjain.wordpress.com/2007/07/06/53/#comment-2624 Girish Mon, 10 Aug 2009 05:00:04 +0000 http://sureshjain.wordpress.com/2007/07/06/53/#comment-2624 The table is incorrect. You should atleast specify which font it applies to. The table is incorrect. You should atleast specify which font it applies to.

]]>