Results 1 to 5 of 5

Thread: line height

  1. #1
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default line height

    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

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

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

    coothead

  3. #3
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default PT (point) is for print

    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-practi...s-px-vs-pt-vs/

    Also see http://pgiinc.com/pages/Printing-mea...finitions.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; } ?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,945
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    	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:

    Code:
    	font-size: 12pt;
    	line-height: 11pt;
    Then things would be even more squished with the ascending and descending overlapping slightly.

    If you go:

    Code:
    	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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •