Font size. What can I be sure of?

Question

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

So, what does 12px mean? And what does 20pt mean? 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?

Answer 1

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%.

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.

Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 2

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

Answer 3

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.

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.

Answer 4

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.

Answer 5

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

Answer 6

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:

mmmmmmmmmm
iiiiiiiiii

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.

Answer 7

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

px=pixels (a dot on the computer screen)

Answer 8

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))) ...