Font-sizes in css: em ex px, mm cm in pt pc, %
January 18th, 2006 by Sonja DuijvesteijnThere are enough different ways to define font-size in css, but what do they all mean, and when to use them? Three are variable sizes, depending on their surroundings to figure out what size they’re shown at. Those are the em, ex and px. The rest are absolute heights, for when you really need to know how big something is.
Absolute font-size
These absolute measurements are generally meant for print. Since it’s unknown to a browser how many pixels a cm is on your specific screen. For pt, this generally results in 1px = 1pt, the other measurements can differ even more.
- in (inches; 1in=2.54cm)
- cm (centimeters; 1cm=10mm)
- mm (millimeters)
- pt (points; 1pt=1/72in)
- pc (picas; 1pc=12pt)
Besides the sizes not being rendered properly there is another problem with using absolute measurements for font-size. You can not resize them (especially in IE). So, a visually challenged visitor cannot change the font-size with the correct buttons for it. Keep these sizes for use on printed pages.
Relative font-size, the em
There are only 3 relative font-sizes, the em, ex and px.
The em is abstract measurement, w3 says the following about em’s:
Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the em square and it is the design grid on which the glyph outlines are defined. The value of this descriptor specifies how many units the EM square is divided into.
They mean that every font has a square in which characters are drawn (how high and how wide a character can be, every character in that font fits in the same em square). Based on the width and height of this square an em value for that font is calculated. And, when you change this value with css, the height and width of the text is altered with it.
Relative font-size, the ex
Font-size ex is somewhat similiar to the em measerument, as it uses the default size of the font (not the default size the browser uses, but the size the font is drawn at). Where the em uses the square in which the entire character resides, ex is the height of a lower case x.
You probably noticed that why you type something in Times New Roman, and then change font-family to Verdana, it seems to big, eventhough it takes up the same space on your screen.
What seems as a differance in size is actually a difference in legibility. Verdana has a bigger ex than Times New Roman does. This could be a useful measurement if you insist on using a strange font not everyone has, but you want it to be legible both in the intended font, and the back-up font.
Relative font-size, the px
A pixel is a rather weird way to measure font-sizes, eventhough used frequently. Depending on your resolution, and screen width a size is given to the text. When two people, both with a 17 inch screen, one with a resolution of 1024*756 and the other of 800*600, look at the same text in font-size 12px there will be a significant different in size.
When to use which?
Use absolute font-sizes only for printed pages, that’s what they’re meant for, and good at.
Relative font-sizes are harder to determine when to use what. The em is actually based on px as well, so there shouldn’t be too much of a difference. But there is one major difference in fact. When you change the size of the font in IE the pixel height stays the same, while the em size changes along. So considering accessibility issues you should use em’s.
In pixel perfect designs however you might not want to let your visitors change this. Do consider the fact however that you are severly hindering visually impaired users if you choose to do content texts in px’s.
Percentages
Percentages are a different way of defening font-size. As you know characteristics of an element are passed down to their descendants. So, if the body has font-size 2em, everything element in body will have that same font-size. With percentages you can change this font-size by a percentage instead of a exact value.
Read more about css
CSS 3 Attribute selectors
CSS rollover image
Related posts
Google code webstats
CSS 2 Attribute selectors
Favicons
March 8th, 2006 at 12:50
px is not relative, it is absolute.
March 13th, 2006 at 10:33
No, px is relative, as it is dependant on screen size (inches) and resolution.
When those are known however it is absolute for that screensettings. So on your screen 12px is always the same height. But, when developing sites, a pixel is relative, as you can’t say that 10 pixels is always the same size. So, 10 pixels on my laptop is well readable, on this screen however it is not. The same 10 pixels. That why pixels are relative.
March 16th, 2006 at 10:20
I’ve found that browsers use a common factor when calculating the width of a div that is specified in ems:
http://tom-lee.blogspot.com/2006/03/how-many-pixels-in-em.html
July 4th, 2006 at 5:44
10 pixels on anything is still 10 pixels. its just at different resolutions you are alloted more or less pixels to work with. 10 pixels on 1600×1200 appears smaller because 10 out of that many pixels to work with is a small amount, while 10 pixels in a low res environment would appear bigger due to having less pixel space on the screen. a pixel is an absolute unit of measure, but how its rendered depends on the resolution of what its being viewed on
August 17th, 2006 at 2:50
At the same resolution, the size of a pixel is relative due to the dot pitch. Thus, is you use a ruler to mesure 10 pixels on your screen, on someone else’s the size is likely to vary. Unlike cm, in, which are absolute in the physical world (the internal structure is irelevant here)
November 2nd, 2006 at 8:09
Replying to “disagreement with bob”’s comment:
Measuring web content in real-world measurements is a ridiculous idea. I could have 100px in the space of 1 inch or 1 centimeter. That space could be 18 inches away on a phone, or 10 meters away on a conference room screen. Should 1cm still be 1cm in both cases? Not a chance.
cm, mm, in, pt, and pc should be ignored by browsers, and only used by printers. Ideally, we should be able to control both worlds, with syntax like font-size:11px/1cm. The W3C has been promising us web/print consistency with CSS for over ten years, but until browsers ignore real-world measurements (except when the page is sent to the printer), it’s not going to happen.