In typography, the diminuendo is the craft of setting letters with an primary large initial (our old friend the drop cap) and progressively diminuendoing the point size of the type as it runs down into the main body text, adding impact, drama, romance, and dizziness to the affair, whilst hopefully still assuring a smooth transition between initial and body text. To achieve this in CSS, we wrap line sections within the paragraph with unique <span>s. The more lines, the more spans will be required and given enough spans we will one day be able to build a bridge to the moon.
With the drop cap already in place (this time using silhouettes from all-silhouettes.com), we simply crack a few spans into the CSS omelette. The spans inherit the type attributes of the containing p class, thus avoiding unnecessary code. All we need to do is specify the diminishing font sizes:
div#maincontent p span.dim1 {
font-size: 20px;
}
div#maincontent p span.dim2 {
font-size: 19px;
}
div#maincontent p span.dim3 {
font-size: 18px;
}
div#maincontent p span.dim4 {
font-size: 17px;
}
div#maincontent p span.dim5 {
font-size: 16px;
}
Then wrap your chosen text segments with the spans. The final span should be only 1px larger than the standard paragraph font style. Example:
<span class="dim1">This is the largest size of font, strong and proud</span> <span class="dim2">the next section is older, wiser, and humbler</span> <span class="dim3">and this third section is shrinking like the Wicked Witch of the West</span>
Now back to watching the rain fall upon the carnations, trying to be red and trying to be carnations.
