Another way to create an “illustrated letter” is to add an image in the background of the first letter. Again, you’ll need to use your eyes. Pay attention to the spacing around the letter — both inside and outside the block. Here I’ve added a margin-top to place the image in relation to the text. I have also added a padding-top to place the letter in relation to the image.

Traditionally, the top of a drop cap lines up horizontally with the text block. Use a padding-right to create space between the “illustrated” letter and the text. Use a good line-height on the p tag, so as text wraps around the illustrated letter, you don’t end up with a big gap between the image and the text.

This illustrated letter was created by placing an image behind the first letter of the first paragraph.