Floating capital letter

This tutorial shows you " How to float a first capital letter along the text or paragraph ".

Float a scalable capital letter to the left, resize it and adjust line-heights to suit your needs.

To make the capital letter line up with the text alongside, set the line-height. In this case, around 83% seems to work. Like the font-size, these figures can be adjusted to suit your own needs.

CSS CODE
.dropcap
{
float: left;
width: .7em;
font-size: 4em;
line-height: 83%;
}

HTML CODE
<p>
<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer...
</p>

No comments: