Posted by Dylan Parry on 10/25/07 21:47

Ben C wrote:
> On 2007-10-25, Dylan Parry <usenet@dylanparry.com> wrote:
> [...]
>> I've actually taken to applying traditional typesetting techniques to my
>> online texts and started to write stylesheets working on a baseline with
>> text, line-height and margin all relative to each other. It really does
>> make text so much more visually appealing and easier on the eye.
>
> So what are good relationships to use between those things?

Depends entirely on the chosen fonts and the size of your baseline. It's
not something I'd really want to try and explain, so try a search for
"baseline grid". FWIW, the first few results in Google look like useful
reading on this matter.

Essentially, the line-height should be equal to baseline/font-size,
which for a baseline of 2em, and a font size of 1.5em (say for H2
elements) the line-height would be 1.33333em. The margins would then be
either 1.33333em top and bottom, or you could move the margins around as
long as the top and bottom added up to 2.66666em (1.33333*2). It's a
little more complicated than that, but that's the basics.

I'm far from being a typography expert though, so I'd read up on it
anyway ;)

> In CSS "normal" line-height is supposed to be between 1.0 and 1.2 times
> font-height (where font-height is distance from ascender to descender,
> aka "em-height" I think).
>
> But how this looks depends a lot on the font. In some fonts line spacing
> looks quite crunched up at 1.0, but in others too spaced out at
> 1.1.

Indeed, which is why it depends on your font etc.

> When you say margin, do you mean paragraph margin? The default
> stylesheet for CSS 2.1 sets 1.12em for some reason.

Yes, the top and bottom margins on block elements that usually contain
text, eg. P, UL, OL, H# etc.

I've found it helpful to use a "Reset" stylesheet that removes all
padding and margins etc from elements and causes all browsers to display
everything the same so you have a clear starting point for your own
styles. Of course, that means that paragraphs have no default margin and
STRONG/EM are by default regular text instead of bold/italicised, but it
does give you a nice blank canvas where you can predict things more easily.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

[Back to original message]