With all the discussion of ems for font sizes this week, I thought it appropriate if I told you about a neat tool that will help you set the default font size so that you can use ems and still have a good idea of how big the font will display on the screen. Ems don't have an absolute size, but are rather based on the value of the font size in the browser or parent elment. So determining how big an em is can be difficult. But the Em Calculator will help you choose ems that are based on a default size that you set. You put in the size in pixels you want, and the em calculator will tell you how many ems that is (based on a standard text size of 16px).
- Set Your Font Sizes: Em Calculator
- How Big is an Em?
- What Font Size Measure to Use
- CSS Sizes
- Size Units in CSS
- See all the Software Picks
- Suggest Software for the Pick of the Week
Good choice. This is indeed useful.
Very useful, thanks. Have always found ems a pain!
Useful toos – thank you
Thanks for the tips and the calculator resource. Very helpful, definitely a time saver.
i am not sure of the relevance of the em to begin with. I always say a pixel is a pixel in any browser which seems safer when with considering cross platform design.
@mister5280: Unfortunately, a pixel is not always the same in every situation. Here is an interesting article:
A pixel is not a pixel is not a pixel – QuirksBlog – http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
And the main reason you shouldn’t use pixels is because of IE. IE6 (I’m not sure about IE7/8 – anyone?) won’t let you resize text that has been sized in pixels. In other words, if you set your font to 10px and then I come in can’t read it so I hit Ctrl-+ (or Cmd-+ on a Mac), the page will get larger. But the font will stay the same (illegible to me) size. http://www.clagnut.com/blog/348/
It also doesn’t scale downward for mobile devices http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Pixels are a fixed size unit. They are relative to the monitor, but ultimately they are a fixed unit.
http://www.wdmac.com/font-sizes-em-vs-pixel
Of course, you’re welcome to use whatever sizing unit you like on your site. These are just recommendations.
Thanks to Piotr Petrus for creating this tool and to Jennifer for getting the word out.