When I write and speak, I often talk about using em units to size layouts giving the user the ability to resize the entire layout if they change their font size. In fact, chapter 5 of the book I co-authored with Greg Rewis is an entire project based on em units. Until all browsers zoom, this is my personal preferred method. My personal site is built using this method.
Last year, I wrote a blog post about Scaling fonts using em units and how I saw that affecting different types of users. A comment was made recently, and I wanted to address it in a new post while sharing a couple charts I made for myself. The comment said:
“A simple calculation as 1pt equals 1px at 72dpi (MAC)
so:
1pt equals 1.33px at 96dpi (PC}12px (pt) font in MAC is therefore 16px in a 96dpi PC.
If you have a parent element with a 11 pt font then to convert px dimensions to em you divide them by 14.63 (11pt x1.33) Dont interchange pt and px on a PC.”
First I'd like to address using points for the screen on either a Mac or a PC. Simply don't do it. Ever. Points are for print. I regularly use points (as well as inches and serif fonts) when I create a print style sheet. I updated an article recently called From screen to print: Creating a print CSS in Dreamweaver published both at Community MX and Adobe's Devnet Center. One thing it addresses is how to use pts for print style sheets.
Until 2000, Macs used a 12px browser default and PCs used a 16px default. We got used to seeing different things (and due to the 72dpi vs 96dpi difference, it was further compounded if points were defined). I'm under the impression (but can't find anything quickly to back it up) that the 72/96dpi issue is no longer a problem. If anyone can point me to a recent reference confirming or denying that, I'd love it. Either way, all current browsers on both platforms now use 16px as their font-size default.
A while back, I was messing around for my own entertainment (you know, partying on a Saturday night or something) and created a couple of charts that might be helpful. The first is font size equivalencies. This chart shows that setting the font to 100%, 1em, 16px, 12pt and medium are equivalent in the same font. It also shows how font sizes can vary greatly from font to font.
The second chart was an exercise showing divs sized using em-units with a variety of font sizing. The red line down the right side is a graphic at 800px. The body's font size is set to 100% (16px). The first three divs show the default font sizing with the divs set to three different widths. The second section shows all divs set to 50em with the font-sizing (placed on the div) set to different units. It's an interesting exercise if you'd like to more clearly understand the effect of font sizes on the size of an em unit.
The interesting thing to me in the second chart, based on the gentleman's comment in my blog, was that viewing this chart on both a mac and a pc the lengths of the divs are the same. Yes, there's a very slight difference in actual font size on the PC – two of the lines of text slightly wrap to the next line – but the 50em width of the div is still exact on both platforms. Are we really that different anymore?
{ 6 comments… read them below or add one }
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
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.)
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.
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.)
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
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/
Automatic px to em resizing can be done at http://pxconverter.com/
allows file upload and on the fly conversion