> The cheatsheet is an excellent resource, but I'm flummoxed by the line-
> height table at lower left on Page 2.
>
> I understand the Blueprint line-height is 1.5. So, you would multiply
> any type size by 1.5 to determine the line-height.
>
> Can anyone explain the significance of the three columns of numbers in
> Gareth's line-height chart?
Hi Bob,
sorry for the delay in replying -- I've got 2.5 year old twins and a
16 week old baby too. I'm getting about 4-5 hours sleep a night and am
struggling to fit everything into my days (or nights, for that
matter!), so I hope this explanation makes sense.
If you add the "showgrid" class to the container (or any other
element) you'll see that it adds a background image outlining both
vertical columns and the horizontal lines. If you were to measure the
distance between the horizontal lines you'll find that they are 18px
apart (including the line). This is because of the following
calculation based on these CSS rules in screen.css:
Line 18: body {line-height:1.5 [...]}
Line 29: body {font-size:75% [...]}
You are right in saying that the line-height is 1.5 -- but 1.5 of
what? Line 29 sets the font-size to be 75% of the default, which in
most browsers is 16px. So,
16px * 75% = 12px
Then multiply that by 1.5 to get the line-height in pixels:
12px * 1.5 = 18px
So the green LINE-HEIGHT box on page 2 of my cheatsheet is something I
use quite a lot. It gives me a quick ready-reckoner to tell me that if
I want to create any images and ensure that they maintain the vertical
rhythm created by the line-height that's the height I need to make
them. An image that takes up 5 lines of text will be 90px high; an
image that takes up 10 lines of text (fills 10 rows on the showgrid
background) needs to be 180px high, etc.
Does that make sense?
Sincerely,
Gareth J M Saunders
Anstruther, Scotland, UK
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
