line height

[3dkingpin]

if i have font size 12pt and line-height of 12pt
then there should be NO gap between the lines right?

how exactly is the line height calculated

[coothead]

Hi there 3dkingpin,

that appears to be right, but I have only tested in modern browsers: IE9, Firefox 9, Opera 11.6 and Safari 5.1. ;)

You may find this site informative...
CSS line-height a step-by-step presentation (http://www.maxdesign.com.au/articles/css-line-height/)
coothead

[3dkingpin]

i have another program using same font and line height i get paragraphs of two different heights. why is this. surely 12pt font is 12pt and same size in pixels on all platforms right?

[auntnini]

The point (pt) is "fixed" unit of measurement used by typographers for printed material. See http://www.guistuff.com/css/css_units.html , http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Also see http://pgiinc.com/pages/Printing-measurement-definitions.html


Printing measurement definitions
A point is a vertical measurement of type that is .0138”, or approximately 1/72 of an inch. In other words, there are approximately 72 points to the inch.* All type is designated in points (10 point Caslon, 24 point Baskerville, etc.).* Points are always used to specify the size of type.* Typefaces may be set in sizes from four to 144 points, but are generally used in six to 72 points.* Line spacing is also specified in points (two points of leading, etc.).

A pica is a linear measurement of type.* There are 12 points to 1 pica and approximately 6 picas to 1 inch.* The length of a line is specified in picas, as well as depth (height) of a type area.* For example, a given block of copy is to be set 20 picas wide by 36 picas deep (high).* Inches are never used in type measurement. *

An agate line is a measurement used by newspapers to sell advertising space.* There are 14 agate lines to an inch.* An agate line refers to the space occupied by one line of agate type in one column.* The width of the column can vary from paper to paper.* A 60 line ad can take several forms: 60 agate lines in one column, 30 agate lines in 2 columns, etc.


You would be better off using "relative" measurement units such as px (pixels relative to screen resolution), % (of base font size), em (based on height of base font M).

I'm not sure how "inheritance" of parent element might affect pt measurements. Have font sizes been assigned to
body { font-size: 62.5%; } or body { font-size: medium; } or body { font-size: 1em; } ?

[jscheuer1]

Line-height by default is like 125%, so for 12pt (16px) it's like 20px. I say like because I think it varies by font. There's room for the ascending and descending characters like CAPS and jygpq (others or less depending upon the font) respectively + a little extra for general readability. If you go:


font-size: 12pt;
line-height: 12pt;

You can generally expect there to be no space between the ascending and the descending. For all others there will be some space to account for them. But there should be no added space for general readability. So if you have a j right above an A, they should touch. You could do:


font-size: 12pt;
line-height: 11pt;

Then things would be even more squished with the ascending and descending overlapping slightly.

If you go:


font-size: 12pt;
line-height: 10pt;
font-variant: small-caps;
text-transform: lowercase;

Then there are no ascending or descending so you could make the line height less like I have it there without overlap.