That is called an initial. There are different types of initials and the one that you have in your picture is called a drop cap or drop initial. The most common way to achieve a drop cap in web design is to wrap the first letter of the text with a span:
HTML Code:
<p><span class="drop">S</span>nookerman is awesome! Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra.</p>
Then you float the span and change the font-size, line-height and position:
Code:
span.drop {
float: left;
font-size: 4em;
line-height: 0.7;
}
This takes some testing, so play around with the position, the margins and the padding until you are happy with the result.
Good luck!
Bookmarks