From the article: How Big is an Em?
There are lots of different ways to measure fonts. Find out what other Web designers do and share your own techniques for sizing your fonts on your Web pages. What's Your Measure?
font measure
- i currently use px but can see I am going to have to go over my 100 plus websites and change to ems (along with a number of other changes)! Thanks for your articles - they are the BEST i have read and learned from so far!! eg. I was taught at uni to use tables (in 2005) but have struggled with the change to using but am now eager to get back to the 'office' to apply the things I am learning this evening from your articles - thanks again Jennifer - Lyle; Stacpoole Internet
- —Guest Lyle Stacpoole
If is for web is ems
- Ems or percentage is the most flexible unit I use .8 em as the standard 10pts in print and everything else scale from there 1.2 for h1 etc,etc
- —Guest Nando
Grasp the nettle, people!
- I find it disturbing that so many of my fellow front end devs are happy to settle for pixels when we have a wider range of screen resolutions than ever before. You *cannot* rely on your user having their browser's default font size set to 16px. What you can rely on is them having their browser set up so that they can read the text, no matter what the pixel size of their screen. C'mon ems aren't *that* hard to calculate (wanted pixel size divided by assumed default), the hard part is making your build reflow legibly at different font sizes, and you have to do that even if the user has a modern browser.
- —Guest Chris Ovenden
Pixels Pixels Pixels
- If you have the extra time to figure out inheritance of EMs and your end-users (which should be a lot, for you to consider to use ems, i.e. old-people kind of audience) will need to zoom-in or out more than one or two levels, go with EMs. For me, I don't have the extra time or energy to figure out element inheritance when using EMs, Px are the easiest, and are the ones that will most likely show the same across browsers. I am definitively not doing EMs for the ocassional visitor that needs to resize contents.
- —Guest Eduardo
pixels are faithful
- I stick with tried and true pixels especially after a huge embarrassment once with a design I tested in several browsers. I thought it looked great. Then one day along came that amazing job interview and for some reason the browser the boss had didnt treat the ems right and it looked horrible, needless to say it set a very bad first impression. Ive come to find over the years that its best to stick with the sure fire ways because you ultimately have no way of knowing how things will look for each and every end user even when they do have the same browser due to monitor settings etc. Although I always end up going back and looking at ems/ %'s with longing, esp when you see people like Eric Meyer wield them like nerf bats
- —Guest just me
Percentages
- I actually use % for font sizes. I have a reset style sheet that sets base font-size to 100% of browser default (typically 16px) and then my site-specific style sheet is usually set to 75% of that (12px). Margins, and padding are then set in em's so everything scales on re-size. Yes modern browsers will re-size pixel fonts, but margins and paddings set in px won't scale accordingly, and sometimes that can through your entire layout out of whack.
- —dbmartin
px
- I know many Web developers who choose ems over pixels, stating that ems are scalable. This argument was valid several years ago, but the newer browsers will scale pixels. So people who have trouble reading small text can also make the font larger when pixels are used. Thank goodness, because I really hated having to use ems. Images are in pixels. Trying to set images in ems never worked for me. I know many developers who will set images in pixels and divs and font size in ems. I tried doing the same with horrible results. Reset the browser default font size, and the text becomes either way too small compared to the images or way too big. The other issue I have with ems is due to their so-called advantage of being scalable. Em sizes are set relative to their parent element. The problem is that different browsers will make different decissions as to what element is the parent. I've experienced many cross-browser bugs as a result. I've also experienced issues with the original CSS file n
- —Guest Anonymous
Ems for me all the way
- Ems are the only measure I use because they are more flexible. I set my ems to be a specific height for my base font, and then measure everything else from it. So, even my photos and divs have measurements set with ems. And my pages scale really well.
- —Guest Emms Yum
