Note to Self: Drop Caps

Drop Cap, short for drop capital, or otherwise known as drop initial is a large capital letter at the beginning of a paragraph (like the letter D at the beginning of this paragraph), occupying more than one line.

In the Late Antique period both came into common use in Italy, the initials usually were set in the left margin[...], as though to cut them off from the rest of the text, and about twice as tall as the other letters. The radical innovation of insular manuscripts was to make initials much larger, not indented, and for the letters immediately following the initial also to be larger, but diminishing in size (called the "diminuendo" effect, after the musical notation). Subsequently they became larger still, coloured, and penetrated farther and farther into the rest of the text, until the whole page might be taken over. The decoration of insular initials, especially large ones, was generally abstract and geometrical, or featured animals in patterns.
- Brief History of the Initial, Wikipedia

The cover of this post features a Winchester Bible paragraph. The capital initial illustrates a man, with the yellow glow above his head, (and likely a disciple), teaching to the Gentiles. Other classical texts sometime have illuminated initials and border, followed by minuscule. In more modern texts, this 1975 issue The New Yorker begins its article in a drop cap occupying depth of two lines.

The drop cap is everywhere as I pay more attention to it. Come as no surprise, drop cap is a staple in typography design. I like the asthetics of drop cap. Here’s how I achieve this effect in this jekyll-powered blog.

In my /assets/css/screen.css file, I added the following block.

/* EDIT: added drop cap here:*/
.firstcharacter {
    font-weight: bold;
    float: left;
    font-size: 75px; 
    line-height: 60px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px;
}

The beginning of the markdown file reads like this:

<code><p><span class="firstcharacter">D</span>rop Cap, [...] </p> </code>

let the cap drop.

.