Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
pt versus em
- Thread starter 7on
- Start date
- Sort by reaction score
InLikeALion
macrumors 6502a
Em is the best way to achieve a consistent font size cross-browser. Also, in IE (iirc) users can't adjust pt sizes, but can em. That would be better accessibility to let users control the font size and plan for that. A List Apart has some good screenshots showing the various ways to describe measurements, and for fonts, em is the most consistent.
See: http://www.alistapart.com/articles/howtosizetextincss/
Also, I use a handy widget called Designers Toolbox by Michael Preidel, which on the last tab has a handy px to em converter.
See: http://www.alistapart.com/articles/howtosizetextincss/
Also, I use a handy widget called Designers Toolbox by Michael Preidel, which on the last tab has a handy px to em converter.
InLikeALion
macrumors 6502a
I just realized that you have been saying point and not pixel, so I'm not quite sure how closely they relate.
A normal base font size of 16px equals 1em. Em's are a ratio compared to what you set the default text size as, so 1em could be visually equivalent to 25pt size, if you set your base text size to something like 25px... It's relative, see?
Oooooo ok, that sounds reasonable 🙂
How would I go about setting 1em = to 10pt?
10pt is roughly 13px and 16px is roughly 12.3pt
InLikeALion
macrumors 6502a
Can we agree to start referring to 10px as points of printing doesn't exactly correlate? It will allow everyone to be on the same page for the remaining discussion.
I think the idea is that the scale is set by the default browser font size, which in most cases is 16px. There is no way you can change a browser's default size. I read a nice article somewhere about setting up what you want em's to equate to in your coding, but I can't recall where that was.... I just spent 5 minutes retracing my fav dev links and still couldn't find it.
16px base / 10px desired font size = .63em.
so for your 13px desired hight, it would go like this:
16px base / 13px= .81em
But I don't think you should even be bothering with "point" sizes. Web can't directly match your print world aesthetics. Decide what looks good on screen in physical pixels, and describe that with ems.
I think the idea is that the scale is set by the default browser font size, which in most cases is 16px. There is no way you can change a browser's default size. I read a nice article somewhere about setting up what you want em's to equate to in your coding, but I can't recall where that was.... I just spent 5 minutes retracing my fav dev links and still couldn't find it.
16px base / 10px desired font size = .63em.
so for your 13px desired hight, it would go like this:
16px base / 13px= .81em
But I don't think you should even be bothering with "point" sizes. Web can't directly match your print world aesthetics. Decide what looks good on screen in physical pixels, and describe that with ems.
angelwatt
Moderator emeritus
InLikeALion
macrumors 6502a
From my quick skim that seemed to be an informative article.
But you can't help but get a sort of twisted smile of pain/entertainment viewing that page. 🙂
But you can't help but get a sort of twisted smile of pain/entertainment viewing that page. 🙂
Ok ok, I've been converting all my pts I use into ems with a 1em equaling 16 px. Maths, bleh.
Anyway, something can't be right because when I tell my H1 tags to be 1.3em in size, they look way smaller than 16pt/20.8px using previous sizes.
Compare the attached image with www.favoritestaffing.com and look at the text.
Attachments
angelwatt
Moderator emeritus
Yea, I kind of felt the same way. I didn't read it in detail either. The article was written in 2002, but is surprisingly relevant. I guess the dating on the site also explains its umm, unique look.
angelwatt
Moderator emeritus
Eraserhead
macrumors G4
InLikeALion
macrumors 6502a
The page WILL still scale, just not for IE. Its against accessibility practices to try to keep it from scaling. It's not like using em's suddenly puts a big juicy button saying "You can scale this page!" on the site.
People who know how to scale a page already and try to use it on your site will be doing so because they want to. Probably because they have poor eyesight or hi-res monitors that make everything look very small. And those same people, if unable to scale your site, will dislike your site. Maybe not enough to keep from returning, but it will aggravate them.
And like I said, em's don't suddenly make it something your boss needs to worry about, so, as it's better practice, you should still use them as practice. Also, why not plan your code for the eventuality that someone DOES zoom your site? Just some clever included things can let it scale.
Not the best example, but on this site I did http://marybainton.com/oil.html you can up the font size a few bumps, and see how on the lefthand navigation, the background and gold line scale to stay behind the links? It gets bigger with reasonable zooming. That took just a little forethought when doing the element in PS and the page doesn't "break" when someone decides they can't read the text. Other parts of the layout don't hold together as well, but it was good practice to think about that.
This is an interesting topic, and one I've been trying to come up with a mental list of "best practices" for, but I keep thinking of one thing that most of these articles don't seem to cover much.
Theoretically speaking, in a world of monitors with different, and potentially very high, pixel densities, wouldn't pt actually be the best long-term solution? I'm not saying this is possible with current software and hardware, but just thinking ahead.
That is, if 1pt = 1/72", and I wanted "regular sized" text on screen, which is say about .2" tall, AND the computer knows what the pixel density of the screen is AND it supplies this info to the browser, then if I set the font as 14pt, the browser would calculate the correct pixel height for that size regardless of whether the monitor was 96dpi or 200dpi. Whereas if I use px explicitly anywhere I'm now going to end up with entirely unreadable text on a 200dpi screen, or giant fonts on a 96dpi one.
Again, this is a pure hypothetical at this point, and it would also probably require a way to appropriately size images to match screen pixel density (I suppose that's what IE's zoom feature is trying to accomplish), but I've always wondered if we wouldn't come back around to pt again some day.
Of course, if you use ALL em, and never refer to any explicit px heights, and if the browser has its default font size set to something reasonable for the screen, then it'll work anyway. So maybe even then we'll stay with em and it'll just be more important than it is now.
Theoretically speaking, in a world of monitors with different, and potentially very high, pixel densities, wouldn't pt actually be the best long-term solution? I'm not saying this is possible with current software and hardware, but just thinking ahead.
That is, if 1pt = 1/72", and I wanted "regular sized" text on screen, which is say about .2" tall, AND the computer knows what the pixel density of the screen is AND it supplies this info to the browser, then if I set the font as 14pt, the browser would calculate the correct pixel height for that size regardless of whether the monitor was 96dpi or 200dpi. Whereas if I use px explicitly anywhere I'm now going to end up with entirely unreadable text on a 200dpi screen, or giant fonts on a 96dpi one.
Again, this is a pure hypothetical at this point, and it would also probably require a way to appropriately size images to match screen pixel density (I suppose that's what IE's zoom feature is trying to accomplish), but I've always wondered if we wouldn't come back around to pt again some day.
Of course, if you use ALL em, and never refer to any explicit px heights, and if the browser has its default font size set to something reasonable for the screen, then it'll work anyway. So maybe even then we'll stay with em and it'll just be more important than it is now.
InLikeALion
macrumors 6502a
I think you sort of argued yourself into the right direction. Monitors of varying pixel densities in the future mean that displaying information (in browsers, or apps) should move away from using pixels as measurement. Pixel independent. Or "resolution independence" as Apple is calling it. But the point is to not describe info in px, describe it in something like em that will all be correctly proportionate to eachother, and let the browser or the user set what the base of that ratio is. ie right now the 16px default for browsers.