|
|
Posted by Dylan Parry on 10/26/07 10:53
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 ;)
--
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.
Navigation:
[Reply to this message]
|