Public news / March 2007 / Em calculator
Em calculator
Handy Em calculator might save you some time in your daily work.
02 mar at 10:42 by schnuck
There are 6 guest comments so far.
Search the archive
Stylegala news archive
- July 2008 [33]
- June 2008 [46]
- May 2008 [5]
- April 2008 [5]
- March 2008 [3]
- February 2008 [4]
- January 2008 [7]
- December 2007 [3]
- November 2007 [8]
- October 2007 [17]
- September 2007 [12]
- August 2007 [12]
- July 2007 [12]
- June 2007 [11]
- May 2007 [25]
- April 2007 [17]
- March 2007 [19]
- February 2007 [19]
- January 2007 [23]
- December 2006 [15]
- November 2006 [23]
- October 2006 [39]
- September 2006 [29]
- August 2006 [50]
- July 2006 [38]
- June 2006 [29]
- May 2006 [27]
- April 2006 [50]
- March 2006 [38]
- February 2006 [38]
- January 2006 [65]
- December 2005 [45]
- November 2005 [41]
- October 2005 [44]
- September 2005 [46]
- August 2005 [42]
- July 2005 [32]
- June 2005 [36]
- May 2005 [55]
- April 2005 [50]
- March 2005 [37]
- February 2005 [65]
- January 2005 [94]
- December 2004 [61]
- November 2004 [67]
- October 2004 [12]
- September 2004 [1]
Public news archive
- July 2008 [72]
- June 2008 [115]
- May 2008 [126]
- April 2008 [77]
- March 2008 [69]
- February 2008 [80]
- January 2008 [72]
- December 2007 [35]
- November 2007 [54]
- October 2007 [66]
- September 2007 [51]
- August 2007 [65]
- July 2007 [58]
- June 2007 [68]
- May 2007 [87]
- April 2007 [75]
- March 2007 [65]
- February 2007 [62]
- January 2007 [68]
- December 2006 [52]
- November 2006 [51]
- October 2006 [73]
- September 2006 [52]
- August 2006 [85]
- July 2006 [57]
- June 2006 [67]
- May 2006 [103]
- April 2006 [77]
- March 2006 [93]
- February 2006 [99]
- January 2006 [111]
- December 2005 [104]
- November 2005 [83]
- October 2005 [125]
- September 2005 [106]
- August 2005 [94]
- July 2005 [103]
- June 2005 [79]
- May 2005 [79]
- April 2005 [65]
- March 2005 [47]
- February 2005 [35]
- January 2005 [22]
- December 2004 [31]
- November 2004 [37]
News contributors
Features
- Stylegala BookStore
- The Stylegala BookStore has a massive archive of great books for you as a professional..
- Bullet madness
- Bullet madness is a list of 200 bullets, arrows and icons uploaded by our users.
- CSS Reference
- An alphabetical list over the most common CSS1 and CSS2 syntax and properties.
Sponsors
This has absolutely no value!
You cannot simply multiply or divide the px value to get the em value. One em unit is the width of the small letter 'm' in the current font. The em-to-pixel ratio varies by so many factors that you should never attempt this.
Try to figure out the difference between 1 em on a WinXP IE6 ClearType rendering 96 dpi system with Verdana, and 1 em on a Mac OS X Safari Antialiased rendering 120 dpi system without the Verdana font installed...
Simply don't mix pixels and em/ex values!
Actually Anders, em is not typeface specific, 1em is 1em for all typefaces at any given point size (e.g. 1em in a 12pt typeface is 12 points, period). Also, it is the capital M, not the lowercase, and it is not even necessarily that (that practice comes from printing presses, but is not necessarily the rule in modern foundry fonts or other languages’ fonts).
You are correct however that em to px calculations are dpi dependent. Fortunately, the equation used in the linked calculator works on most systems today. The default font size in most browsers is 16px. IE’s default however is 12pt (which at 92dpi equals out to roughly 16px). However, a windows system running at a higher dpi is not so uncommon anymore … in which case these em to px calculations would be incorrect. So yes, this may be considered a bad practice.
"which at 96dpi equals out to roughly 16px"
my bad
62.5% is the magic number to working with ems. From there one just calculate as you would normally do (viz. in a base 10 system, not base 16)
yeah but 62.5% is so small, on IE sometimes its unreadable. i use 75% or even 95%. then adjust individual elements as needed.
Hi
My tool lets you input your browser's default font-size, because all 1st-level calculations depend on this value. So if you're using any modern computer with modern browser, you should be able to use Em Calc and design sites properly without any tweaking.
Anyway, I always set font-size on body as 100% - it makes text size the same in IE / Fx / Opera / Safari etc etc etc. You shouldn't use font-size: 16px because IE won't let you change font-size on your webpage.
BTW, today I released small pack of improvements marked as version 2.1, check them out. :)
Add a comment:
Keep the comment relevant, constructive and be polite.
A valid email address or URL to your site must be provided, or the comment might get deleted. Content seemed inappropriate or offensive may be edited and/or deleted. Avoid explicit language and words such as "sucks" and "ripoff". For more in-depth discussions use our forum. Email addresses are never displayed. Line breaks and paragraphs are automatically converted - no need to use <p> or <br/>. Quotes & apostrophes are automatically converted to smart punctuation. Be careful when copying and pasting portions of entries or other comments. The following inline HTML elements may be used: <strong><em><pre><q><blockquote><code>. All other code will get removed before posting. Don't forget to close your tags.