Take the 2-minute tour ×

What does font size actually means?
Let's take CSS. I have font-size where I can specify a number in pixels, points etc.

So, what does 12px means? And what does 20pt means? Is it the maximum width of a character, is it the minimum one, is it the max height?
Will I know for sure that 5 characters of font-size: 10px will have no more than 50px, no less than that, or exactly that width?

share|improve this question
Most units will determine the x-height of the characters I think. –  BoltClock Apr 19 '11 at 14:49
Web design is not the same as print design. There are no guarantees about font sizes beyond the truism that a larger size will be relatively larger than a smaller size. You don't get this fine-grained control that you get in print layout, and you shouldn't expect it. –  Cody Gray Apr 19 '11 at 14:54

8 Answers 8

up vote 5 down vote accepted

Commonly font-size is defined in pixels = px or points = pt

Note: 72 pt equals one inch = 2,54 cm

The resolution of a screen is defined in px. Obviously, the more pixels on a monitor of equal dimensions the smaller each pixel and hence the smaller the font size if font-size is defined in px.

So, What’s the Difference?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

enter image description here

As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.


share|improve this answer
I don't see how this answers the question nor do i see how using em and percent units make it easier for visitors to use scalable text (but as that wasn't what the question was about it probably isnt relevant :) ) –  hooleyhoop Apr 19 '11 at 16:36
This is blatant copy and pasting of someone else's content without so much as a reference. Plagiarism will not be tolerated on our sites, don't do this in the future. –  Nick Craver Apr 20 '11 at 11:01
@Nick Craver - Sorry for that. –  Cristian Boariu Apr 20 '11 at 12:24

Each font has an internal scale that the glyphs are drawn relative to. This is arbitrary and depends on the font designer. A letter 'M' could have an internal height of 0.5, 1, or 700 internal units.

At size 10px, one internal font unit = 10px.

Depending on the design of the font, this could render glyphs of any size, without constraint.

  • Q. Is it the maximum width of a character?
  • A. No
  • Q. is it the minimum one?
  • A. No
  • Q. is it the max height?
  • A. No
  • Q. Will I know for sure that 5 characters of font-size: 10px will have no more than 50px?
  • A. No
  • Q. no less than that?
  • A. No
  • Q. exactly that width?
  • A. No
  • Q. Is it the x-height?
  • A. No
share|improve this answer

As per the W3 recommendation pt is generally for print, while px is for screen.

But the thing is CSS px is not necessarily an actual screen pixel. This is apparent when it comes to mobile devices, which have a default pixel scale other than 1-to-1.

Check out this article for a bit more detail.

Generally for sites, you should set a base font size in px, and subsequent sizes for different elements using em.

share|improve this answer

As other answers have said, there are no guarantees, but we often need some approximate rule of thumb. Empirically: here are three true type fonts, at 120px. The gray blocks correspond to the span as rendered in Chrome (padding=0), the superposed red rectangles are 120 pixels high.

enter image description here We see that (at least for these fonts; remember: no guarantees) the size can be assimilated to a "nominal height", that covers descendants and ascendants of most (but no necessarily all) common characters.

share|improve this answer

It strongly depends on the font you're using. Take the default SO font for example: 10 'm's are wider than 10 'i's: mmmmmmmmmm iiiiiiiiii

But declaring it as 'code' we get a so-called monospaced font, where both have the same width:


And even here the height-to-width-ratio is dependent on the font.

So your definite answer would be: No. You can't tell for sure.

share|improve this answer

Well...everyone has already explained what the units mean so the only thing left to answer is from where to where to measure. My guess would be from the lowest to the heighest possible point of all characters in that font you are using. That is, from the "ascender height" to the "descender height" in this article: Wiki - Typeface

share|improve this answer

Try if this calc can be helpful

Also, in a piece of code (to display a pattern of graphics/text and then print it) I used two independent directions for code execution: one for printing case, other for display case.

  1. Everything is in pt. To convert input data in cm into pt I used:

    double mesUnitCm = 1 / 2.54 * 72; // pt in 1 cm.
  2. Display case size calculations differ from printing case, as they depend on screen resolution, pattern scaling on screen etc. Then you get amount of displayed pts that fit in what should be 1 cm on printed page:

    double in1cm = a.pageFormat.getImageableHeight() / yourPatternSizeInCm;
  3. The scale of what is displayed can be calculated as:

    double scale = in1cm / mesUnitCm;
  4. To rescale a font, you get its size number (that is in pt) and resize it with scale coefficient:

    ... (TextAttribute.FONT, Font.decode(myFontName + "-" + myFontStyle + "-" + (int) (myFontSize * scale))) ...
share|improve this answer

pt=point (1 pt is the same as 1/72 inch)

px=pixels (a dot on the computer screen)

share|improve this answer
And...that means what? Where's your answer to the rest of the question? –  Cody Gray Apr 19 '11 at 14:55
He knows what the units stand for... –  BoltClock Apr 19 '11 at 14:56

Your Answer


