Spider
11-20-2010, 09: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?
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?