Posted by dorayme on 10/26/07 12:57

In article <ffskgo.14o.1@dylanparry.com>,
Dylan Parry <usenet@dylanparry.com> wrote:

> dorayme wrote:
>
> > Perhaps when you have finished you might supply an example.
>
> I've put together a short example text (some simple Lorem Ipsum should
> suffice) which can be seen at http://tinyurl.com/2mpagu - if you follow
> the link at the bottom of that page you can see the same text with all
> font sizes, margins and padding at their default browser settings, but
> with the typefaces, small-caps for headings and the grey lines kept intact.
>
> The first thing you might notice when viewing the CSS for the page with
> a baseline grid is that the body text is set to 62.5%. Now yes, this
> would be a bad thing if that was the actual size of the text as shown,
> but it isn't - the value of 62.5% is purely set to aid in the
> calculations of the baseline grid. The font size for various elements
> are set higher to adjust for this, for example P elements have their
> size as 1.4em, which is 87% of the browser default size, or 14px high.
> Of course, if you have your browser set to display fonts larger than the
> default, the styles will scale up and you'll have P text larger than
> 14px high, but the baseline grid will also scale and still look nice.
>
> If I was using serif typefaces for the body text, then I would probably
> have set the P text to 1.6em as this would be easier to read. It's all a
> matter of choice, and I may have not made the correct one ;)

Thanks for this. I can see immediately that your 'worked' example
is outstandingly better looking. That means I study it tomorrow
more closely - getting tired now...

--
dorayme

[Back to original message]