Preserved Topic: css (Page 1 of 1)

i was taking a look at a style sheet and i saw a font size specified like this

FONT: 11px/18px

was wondering why there are 2 font sizes.

where did you see that?

I saw that too (see http://www.webstandards.org for an example) and was flabbergasted. Someone in #html on EFnet said it was meaningless and to use only one size... But I'm still curious.

As far as I know, using two size values in font: isn't appropriate. I'ld like to reference W3C, but I can't get the server. I think the revelvant section at W3C is section 5.2, which is about font properties.

Let me check my archives. Here we go...

quote:

---

The 'font' property is a shorthand property for setting 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

For a definition of allowed and initial values, see the previously defined properties. Properties for which no values are given are set to their initial value.

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the third rule, the line height percentage refers to the font size of the element itself.

In the first three rules above, the 'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to their initial value ('normal'). The fourth rule sets the 'font-weight' to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.

The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.

---

Umm... something like that. But I don't see exactly why there are two size values in the first rule. Hmm...

I think I found it in section 1.2 Grouping

quote:

---

Similarly, declarations can be grouped:

H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}

In addition, some properties have their own grouping syntax:

H1 { font: bold 12pt/14pt helvetica }

which is equivalent to the previous example.

---

So, font-size/line-height, ie font-size: 12px; line-height: 14px.


---
I, Warjournal, Techincal-Slop Author Extraordinaire.

Any moderator, feel free to move this topic to the DHTML forum...

So, what is the advantage of using a pt sized line-height? I thought that a percentage (150% is nice) for line height was the most readable (across different systems).

I'm thinking this is a good setting for a paragraph:

P {font:12px verdana, arial, geneva, sans-serif; line-height: 150%; margin-top: 0; margin-bottom: 12px;}

So, could I save a wee bit of text and use

P {font:12px/150% verdana, arial, blah blah}