Formatting Tip: Big First Letter

About Formatting Tips.

A common embellishment used in print books is to have the first letter of the first paragraph in a chapter appear much larger then the others. In addition to the letter being larger than the rest it also falls below the baseline. The rest of the paragraph will wrap around this first letter.

To achieve this we will use a little bit of CSS and a span tag. Surround the letter with a span tag and set it to use the class “bfl”.

<p><span class="bfl">L</span>orem...</p>

Add the following class to your CSS file linked by the document.

span.bfl {
    font-size: 450%;
    font-weight: bold;
    float: left;
    margin-top: -10px;
    margin-bottom: -15px;
}

The best way to illustrate this concept is with an example. Download ft-big-first-letter.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.