CODEWITHSUNDEEP
htmlcssrenderingfont-size
Kevin Wang
Kevin Wang

Reputation: 3330

CSS Font Size Specifics

I have a couple of specific questions about font size:

  1. Is pt (I.E. 12pt) standardized? I think I read somewhere that pt = 1/72 of an inch. However, the size of 24pt font in photoshop is significantly different from size 24pt font in css.
  2. What exactly does font-size determine? Is it a sort of unstandardized arbitrary description about letter size or does it actually refer to the specific height or width attribute of letters?

Thanks Stack!

Upvotes: 4

Views: 3324

Answers (7)

JacquesB
JacquesB

Reputation: 42689

1)

In print css, a pt is exactly 1/72 of an inch.

In screen css everything is defined in terms of pixels, and a pt is defined as 1 1/3 pixel. But how large this is in physical measurements like inch depend on screen DPI and vary greatly between devices. For this reason, pt (and other physical measurements like in, cm etc.) is not that useful in screen css.

2)

Font-size refers the the height of the "em-box" - a bit simplified this is the rectangle which can contain all letters in the font including ascenders and descenders. Individual letters will of course often take up less space than the whole em-box. For example a lower-case x will have space above and below, while a lower-case j might fill the whole height of the em-box.

Font-size therefore indicates how much vertical space is required by a line of text, but the dimensions of individual letters and glyphs will vary relative to others depending on the letter and the design of the font in use.

Furthermore some fonts may have letters which extend ("bleed") even outside the em box, which is also a stylistic choice by the designers of the font. E.g. the letter "Å" will often bleed above the em-box.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201876

  1. In CSS 2.1 (the current spec), pt is unambiguously 1/72 of an inch. The reality is different, though, and this is reflected in the CSS3 Values and Units draft, section 5. It describes two setups, using different “anchor units”. If the pixel is the anchor unit, an inch (in as CSS unit) need not be an inch (the physical unit, 2.54 mm), and hence the meaning of p may vary as well. This is one reason why pt in CSS need not match pt in some software.

  2. The font size is a basic property of a font. Any relationships between it and dimensions of characters are up to the font designer, but font design is of course not arbitrary. The CSS 2.1 spec puts this rather vaguely, but the formulation is still useful (against many common misconceptions): “The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.” (And on the other hand, most glyphs use just a small part of the em square.)

Upvotes: 2

Matt Coughlin
Matt Coughlin

Reputation: 18906

font-size is the baseline height of the font (the height of a capital H character) plus a little room above it (the ascender) and larger amount of room below it (the descender).

For a particular font at a particular font-size, the baseline height will always be the same size. Below are some examples, based on measurements of the Arial font:

font-size    baseline height
   10           7
   11           8
   12           9
   14           10

In theory, for CSS, pt is a rough approximation of the baseline height in px. For instance, a font-size:9pt has a baseline height of 9px, which corresponds to font-size:12px. In practice, I've sometimes found that pt is larger than the baseline height by 0.5 to 1.0 px.

Here's a jsfiddle showing a side-by-side comparison of capital H's in px and pt.

In most PSDs I've seen, a font specified as 12pt is in fact 12px. But this may vary. When in doubt, measure the baseline height of the text and convert backwards from that to a font-size in px. For instance, if a capital H has a height of 9px, then the font-size is 12px. Sometimes antialiasing in a PSD makes it difficult to accurately measure the baseline height.

Upvotes: 6

Ray Toal
Ray Toal

Reputation: 88468

You can go straight to the official W3C documentation on CSS for specifics of the font-size property.

And to your question about the meaning of pt in CSS, again the official documentation shows that yes, it is 1/72 of an inch.

Remember that in different applications you can zoom your screen, so think about these values more for printed, rather than screen, media.

Upvotes: 1

DrinkJavaCodeJava
DrinkJavaCodeJava

Reputation: 808

It's usually better practice to measure font in pixels in CSS. Like the question you asked pt size is pretty arbitrary and varies upon the developers own definitions.

Upvotes: 2

Erenor Paz
Erenor Paz

Reputation: 3171

You could take a look here from a similar question about font size in Photoshop and CSS.

While here You can find a nice conversione table: you can notice that PT in Photoshop are equivalent to PX in CSS.. i think you shouldn't use PT in both.

Finally, here you can read something about the history of PT in typography (yes, you are right about 1pt = 1/72 inch) :)

Upvotes: 3

treng
treng

Reputation: 1685

"pt" in fonts is only for print CSS. Here is a link which explains all differences between types of sizes http://css-tricks.com/css-font-size/

Upvotes: 1

Related Questions