Forum Moderators: not2easy

Message Too Old, No Replies

Using double fonts size like 1em/13px

         

toplisek

8:54 am on Nov 9, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I like to know if this is usual to use double measure unit lik PX and EM like:
1em/13px

What should be set in the correct way?

Paul_o_b

10:29 am on Nov 9, 2011 (gmt 0)

10+ Year Member



When font sizes are expressed that way they refer to the font-size first and then after the slash the line-height.

font-size/line-height

In your example above the font-size is 1em and then the line-height as been set to 13px. Which is nonsense really because if the computed font size was 16px the line height would be 13px and half your font would be missing.

Usually you would set something like 1em/1.2em to allow breathing space around the font. However I prefer unit-less line heights and would use 1em/1.2. (A unit-less line-height passes a scaling factor down to nested children unlike those with units which pass down a fixed computed size to their children).

Note that when using the "font" shorthand it is mandatory that you define font-size and font-family or the rule is invalid.

For font rules I prefer to use longhand anyway just to avoid any issues because any rules that you don't set in the shorthand are reverted to their defaults.

lucy24

10:57 pm on Nov 9, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



if the computed font size was 16px the line height would be 13px and half your font would be missing.

Or, depending on browser, the line-height value would simply be ignored.

Paul_o_b

10:02 am on Nov 10, 2011 (gmt 0)

10+ Year Member



I don't think it will be be ignored as such but will be allowed to overflow - which may or may not have much impact on surrounding content unless the font-size is quite large.

If the overflow is hidden then indeed all browsers will clip the content.

p {
margin:0;
overflow:hidden;
font-size:24px;
line-height:13px;
}


With smaller font size the clipping will be less of course as there is always a little space around the glyph.

Although the line-height may be smaller than the font the "content area" (the box described by the font-size of each character in the element) can still increase the distance between successive baselines.

The inline-box model is though a thing of great complexity and mystery and no doubt there will be exceptions and exclusions to these rules :)