What does "font-size" measure?

Obviously, font size should measure the size of the font, but it isn’t as simple as that. If I set an element on my page to a font-size of 72px, the height from the tallest ascender to the lowest descender of the font is only 66px. If font-size doesn’t measure the distance between the top of the tallest letter to the lowest edge of the lowest letter, what does it measure? Thanks.

Perhaps these links can help


Neither of those links explains the inconsistency between the specified font-size in pixels and the actual measured height of the font.

Try it for yourself: make a heading, set it to a specific font-size in pixels, then screenshot and measure the heading in an image editing program. For me, the difference between the font-size of a 72px heading and its actual height was 6px. I have a feeling this is a nonsensical typographical convention from long ago, but I’d like to know if there’s a reason for it.

A font usually contains other characters than Latin letters. Some of them will reach above the tallest ascenders or below the deepest descenders of the Latin letters.

So the font size specifies the height of the character box in which all possible glyphs in the font must fit. Latin letters may or may not utilise the full extent of that box.

That makes sense. Thanks for the help!

To add one more thing, the way to measure is from one point, say the baseline, on one line, to the same point on the next line, with zero leading, i.e. line-height equals 1.



line-height isn’t the same as font-size though - usually the line height is slightly larger than the font size so that even when letters do use the full height of the font that they don’t collide with the line above or below.

… on the next line, with zero leading, i.e. line-height equals 1.
“Normal” line-height is 1.2 or there-about in most browsers. You may set line-height to “1”, which makes it equal to the type size.

From Robert Bringhurst in Elements of Typographic Style

Type Size See Body Size

Body Size In graphic terms, the height of the face of the type, which in letterpress terms is the depth of the body of the type. Originally, this was the height of the face of the metal block on which each individual letter was cast. In digital type, it is the height of its imaginary equivalent, the rectangle defining the space owned by a given letter, and not the dimension of the letter itself.



  1. Which one is best measurement em or px?

If i used em measurement that we can scaled up the font size. But If i used the px measurement that we cant scaled up the font size. Its correct or not?

  1. If i develop the new website. Which type of font size measurement use?

  2. If i used the em measurement that only to purpose for accessibility? its correct?

Advice me…

It is recommended as Good Practice to use a “flexible” unit for font-size, such as em, pt, % or whatever. Since pt was developed as “point” for font-sizes in print, most people use pt in their print stylesheets (though as I understand it pt doesn’t match anything on paper anymore, not since Mac switched from 72 dpi to something higher?)

  1. Which one is best measurement em or px?

px is excellent to use for sizing things that must match something else sized in px… best example is, text that must match a background image. Images are sized in px.
Otherwise, it usually makes more sense to size fonts (and also other things like containers) in em, a flexible unit based on the default size of the default font’s letter “m” (hence the name, “em”).

If i used em measurement that we can scaled up the font size. But If i used the px measurement that we cant scaled up the font size. Its correct or not?

It is correct only for Internet Explorer, who uses the logic that a pixel is a set unit, the size of a little dot of light on a user’s screen, and so don’t enlarge text that is set in px (Internet Explorer 7 and 8 will of course zoom the text fine, since that’s not the same as text-enlarge).
Firefox, Safari and Chrome will scale px font sizes. Opera only ever zooms, so a moot point for Opera.

  1. If i develop the new website. Which type of font size measurement use?

I would use em, but research it yourself and make the best choice for you.

  1. If i used the em measurement that only to purpose for accessibility? its correct?

Hmmm, well if people with low vision need to make the text bigger, and they’re using Internet Explorer, then yes using any flexible unit will allow them to increase the font size. In other browsers I don’t see anything particularly “for accessibility”.

What’s more awesome is, when you are sizing all the boxes in your page in em, and the fonts too, then when people enlarge the text (different than zoom), everything grows together and usually keep their layouts. So, text-enlarge won’t break your layout (using em’s for font sizes and px for your box sizes, you do have the risk that text-enlarge will make the text pop out of its containers and make your page layout a bit disasterous).

A point (pt) is not a flexible unit. CSS uses the same definition of ‘point’ as PostScript (if I recall correctly), viz. that 1pt = 1/72 inch (approx. 0.353 mm). It’s a physical unit just like mm, cm, inch, etc. 12 points is a pica (pc), a unit often used to specify the measure (line width) of typeset text.

Historically there have been a few different units called ‘points’. There’s a lot of information on Wikipedia about points.

In my experience, the way font-sizes relate to real px sizes, differ from font to font & font foundry to font foundry.

I personnally think that AutisticCuckoo is right on this one…:rolleyes:

Absolute units

Centimeters, millimeters, inches, points and a few others are absolute units. They are units we use to measure the actual size of stuff.

Using absolute units for setting web fonts is considered bad practice. This is a total shame, as an absolute unit could very well be the best way to ensure decent legibility of text across devices. Actually, in theory using absolute units to size text could be the preferred option, but most browsers/software/OSs are unable to map a given absolute size to the corresponding number of pixels for the device (and configuration) they’re running on. So for now at least don’t use absolute units to size web fonts.

Relative units

Pixels are a relative unit. The actual size of a pixel may vary greatly from device to device. The iPhone screen is 3.5" at 480px by 320px. The Palm Pre screen has the same amount of pixels, but is smaller (3.1"). Same amount of pixels, but smaller screen: hence the screen’s resolution (in DPI) is higher, and the actual size of a pixel is smaller. And surely you have noticed that the laptop or desktop screens you’re using now have smaller pixels than the devices of ten years ago had? (Well at least the laptops do.) Actually the difference in DPI from one computer device (and configuration) to another is sometimes a 2:1 ratio.

This means that web graphics (mostly sized in pixels) may appear great on one screen, but huge or tiny on another one. And since many sites use pixels for sizing web type, this means that text legible on one device may be too small on another one. This is a tough problem to cope with, and there is no perfect solution. Using an absolute unit such as points (pt) would be great, but most browsers (or OSs or the combination of both) don’t support it well.

Anyway, since most web graphics we work with are in pixels, and we tend to size our websites (well at least their width) in pixels, then it’s tempting to use pixels for sizing text as well. There are two problems with that:

  1. Internet Explorer (5-8) does not allow users to resize text set in pixels. All other browsers do, but IE doesn’t. This is less of a problem now, since with IE7 and 8 the most obvious for the end user to get bigger text is to zoom the whole page.

  2. Users who have configured their browser to use a different (smaller or bigger) default text size may want their preference to apply to websites they visit. Using pixels doesn’t allow this.

I reckon i don’t need to remind anyone why allowing the end user to resize text is good? (Just in case: if your visitors can’t read your text because of their device or because of their own poor vision or both, do you want them to go away or do you want them to use the tools at hand — the text zoom function of their browser — to be able to read your content anyway?)

Proportional units

The proportional units available in CSS are %, em and ex. Forget about ex, it’s hard to explain, it’s not consistently implemented in browsers, and even if it were it wouldn’t be that useful.

Pourcentages… well it depends on the property you’re using. Percentages work differently for height, width, or font-size. In the case of font-size, the percentage is relative to the computed font-size of the parent element. I.e. if you set html {font-size:20px}, then body {font-size: 50%;}, then the computed font-size for the body element will be 10px.

The em unit behaves exactly the same (when used for font-size) than percentages, except that the equivalent of font-size: 100% is font-size: 1em. As for the origin of the unit’s name, it may be related to the width of a letter «M», but don’t be fooled: the width of most «M» letters in most fonts is smaller than one em. Characters which are (or should) be 1em-wide are the EM DASH (—) and the EM SPACE. Both are used by typographers and are defined in Unicode. Anyway, one em in a given font size is equivalent to the height of a line of text (without leading) composed in that font size. If an element has font-size: 12px (as a specified or computed value), then for that element the value of one em is 12px.

One last note: the base font size in most web browsers nowadays is configured as 16px (unless the user changed it). So if you set font-size: 80% or the equivalent font-size: .8em for the body element, then your base font-size (for the body element and its contents) will become a computed value of 12.8px. Browsers and/or OSs (since some browsers use the OS’s tools for rendering text to some extent) may try to round that value to 13px, or may try to render the text at approximately 12.8px (Firefox 3-3.5 does this on OS X, while Safari 3-4 does the rounding thing).

Ok, that it’s for proportional units. They are preferred for avoiding the IE6 problem with font resizing and pixels, and to allow the end user to specify a different base font (18px instead of 16px for instance) — for comfort or sheer legibility. Actually, many accessibility norms or methods will prohibit most use of absolute units or the px unit for font-size.

It goes back to the original measurements of type when the measurements were based on the height of the lead pieces used to mark the paper. They were not measuring the letter itself, they were measuring the amount of space it would take up on the printing press.

Good summary, Florent V! :tup:

Across devices, yes, but not across users. :slight_smile: Even if you set the size to 30pt it would be too small for some people to read. There’s no size that fits everybody, which is why absolute font sizes are a bad idea on the web (even if some browsers, illogically, allow absolutely sized text to be resized).

Or it may truncate it to 12px. I think Opera does (or did) that.

This links its very useful for px – em – % – pt – keyword

Well, actually the one place where we would need points is for the base font-size. 12pt instead of 16px would be interesting. Then we go on using proportional font-sizing for web content.

Those people will need specific assistive technology, which is a different issue (and implies different constraints for webdesigners).

Allowing users to resize text whose size was defined in absolute units or using a relative unit such as px is perfectly logical. In the spirit of CSS and WCAG, user styles and preferences may override styles defined by authors. I would argue that the behaviour shown in Firefox or Safari is indeed the most standard-compliant implementation. Or would you say that because an author has defined a block as 600px wide, then browsers shouldn’t let users resize that block by, say, zooming the page in or out? Then all current browsers are doing it wrong. :wink:

Not in my tests. Maybe version 8 did (never tested that one), but current versions don’t.

I recommend using ems for all of your measurements, so that your layout is consistent even if the user changes the font size. Even if a user can’t read the text because it’s too small, setting all the units to ems allows them to scale the page easily. You can find a thorough and practical demonstration of using ems to create a flexible layout here: alistapart.com/articles/fluidgrids.

There’s only one important aspect of using ems that’s not covered in that post: they compound. Let’s say that this is your HTML document:

<div id="parent">
<div id="child">

… and this is your CSS:

body {
font-size: 100%;
#child {
width: 10em;

If you set the change the font-size of the #parent div, you will also change the width of the #child div. Adding this line to the CSS:

#parent {
font-size: 0.75em;

… will make the #child div only 75% as wide as it used to be. That behavior was the cause of most of my problems using the fluid grid method.

In short, em = good, px = bad.

12pt is far too small to read for a lot of people. You don’t need to be half-blind to have challenges with that, being middle-aged can be quite sufficient. :slight_smile:

Some of them, yes, but not all. Many can cope quite well, thank you very much, if you only use relative font sizes that can be enlarged with the built-in browser functions. Of course, now that everyone has copied Opera’s zoom (more or less successfully) the problem is diminishing.

I can see your point, but I don’t quite agree. It’s useful, yes, but not really logical. Zooming would be a more logical option.

If I’m trying to show, say, a preview of what a business card will look like, it’s important that the card’s dimensions and the fonts are exactly what I specify. If they’re hard to read (which they probably will be), you should zoom the whole page, not just resize the text which will give the user the wrong impression of what the final business card will look like.

Zooming is very different from changing the text size. It’s the equivalent of using a magnifying glass instead of having the newspaper reprinted in a larger point size.

It may have been Opera 8, or it may be my memory that’s failing. :slight_smile: