View Full Version : Line spacing anomaly

11-20-2010, 10:57 PM
When you have a paragraph of text on your website that wraps onto several lines, the spaces between the lines are all the same.

Well, I like to have an enlarged first letter on a page - sometimes referred to as a Fancy First Letter. Typographically, these sometimes span the first two or three lines. Keeping things simple for a website, I make my first letters one or two sizes larger than the text and someties bold, too. Like this....

Sometimes referred to as a Fancy First Letter, these characters set the stage, so to speak, for the text that follows. Typographically, they sometimes span the first two or three lines, and are often decorated with a floral design. Usually, these fancy first letters are reserved for the start of a chapter in a book....

Do you see how the first line spacing is bigger than the following lines? This is the first part of the anomaly that I hope someone can explain in order to correct it.

When I embolden and enlarge this first letter, the first line spacing (the space between line 1 and line 2) gets bigger, too. Okay, I can understand that - the first letter sits in its own space and as the letter itself is made larger and bolder, so the space around it is made larger and bolder. The small space under the letter is thus larger than the space under all the other letters on that line so the first line spacing is correspondingly larger, too.

However - this is the funny part - when you use styles in the code - line-spacing:24px; - the opposite happens. An enlarged first letter *reduces* the first line spacing. I cannot demonstrate it here because html is switched off, but you can see the effect at the top of the righthand column of my website.

Can anyone explain why this happens and how I can nullify this to make the first line spacing the same as all the other line spaces in that paragraph?

Harold Mansfield
11-21-2010, 12:19 AM
You need to set the line height and spacing to justify the letter and create the proper space for the next lines to also wrap around it...basically treating it like an image.
What you are trying to do is called a "Drop Cap". It can be applied in CSS and HTML.

I'd need to see the code that you are using to be able to tell you how to fix it.

11-21-2010, 09:27 AM
Thanks for your post, Harold. I'm not after a drop cap - rather a raised cap - an enlarged initial on the same baseline as the first line of text (exactly as I showed above.)

Code I am using is the simplest possible - <font size=6><b>B</b></font>usiness coach....

No wrapping required.

The wider first line spacing on plain (un-styled) text is a nuisance but the problem now is the styled text that creates a narrow line-spacing beneath the first line.

&#37; ADDED:

Okay. We've got it done, Harold. What you said about setting the height and spacing for the letter gave me the clue I needed.

This is the code I am now using -- <span style="line-height:37px; color:#aa0000; font-size:250%;">B</span>usiness Coach...

The line-height for the rest of the paragraph is set in the preceeding <div style....> component.

Thanks for your help.

Harold Mansfield
11-21-2010, 12:18 PM
Usually when I hit a snag like that, I look at where I've seen it and view the source code to see how it was done. Have you tried that?
Here is a tutorial that covers using raised caps and initial fonts in CSS:
CSS Initial Caps - Decorative First Letters - Use CSS to Create Initial Caps (http://webdesign.about.com/od/advancedcss/a/aa090307.htm)

And here's one that covers fancier initial fonts:
Initial Caps - Examples (http://webdesign.about.com/od/examples/l/bl_initial_cap_examples.htm#i2)

Other than that I have seen people use an image of the font, and raise or lower it to sit on the line without affecting the other lines.

11-21-2010, 12:35 PM
"Borrowing" from source code is something I do quite often - when I see something I particularly like. Going back and finding a site that has something I am trying to do isn't so easy. And when I have such knowledgeable friends, why not give them the opportunity to shine?!