Drop Cap, CSS, and WordPress

Dropcap from 1613

Drop cap is an initial that sits within the margins and runs several lines deep into the paragraph, with the consequence of indenting some text. You have seen this trick used thousands of times before: in your favorite book it’s the a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text. And if you have ever seen a medieval manuscript, you will have noticed that the initial often is several lines in height, sometimes ornately decorated.[1]

Drop Cap in WordPress

If this visual trick is still used today, there must be a reason. And there is: it looks good (and visually tells the reader where the beginning of the main text is). Drop cap can be used on your WordPress theme too, let’s give a look at how:

There are two ways of inserting a drop cap into your WordPress design through CSS:

  1. The CSS only way
  2. The CSS + HTML way

Both have their advantages and disadvantages. Let’s give a look at how to implement them.

CSS Only Method

In WordPress, edit you CSS file (very easy to do if you are using WordPress Jetpack’s “Custom CSS”) and use the following code as a starting point:

p:first-child:first-letter {  /* we are selecting every <p> element that is the first child of its parent and, more specifically, the first letter of that element */
font-family: Palatino, serif; /* here you can declare the font that you would like to use. A backup font can be useful */
font-size: 75px; /* how big should your font be? */
color: #903; /* color? */
float: left; /* where should the letter “float”? */
line-height: 60px; /* self-explanatory */
padding-top: 4px;  /* define the white space between the drop cap letter and the rest of the text with the padding property */
padding-right: 8px;
padding-left: 3px;
}

What you have written as a code is the following:

“Hey webpage! When you reach the first occurrence of a paragraph, change the first letter with the following characteristics: font-family: Palatino, serif; etc.”

Check the result and edit the CSS as needed.

Pros:

  • Write the code once in your CSS file and see it everywhere you have told it to be!

Cons:

  • Not supported in IE 8 and earlier versions.
  • Might appear where and when you don’t want it to appear, depending on your code.
  • Might not appear where and when you want it to appear.

CSS + HTML mode

Same as above: edit your custom CSS file and use the following code as a starting point:

.dropcap { /* declares which elements in the html text will have to obey the following CSS code */
font-family: Palatino, serif;
font-style: normal;
font-size: 6.6em;
display: block;
float: left;
margin: .08em .07em 0 0; /* shorthand to declare every margin distance in a single line */
line-height: .67em;
color: #b85051;
}

Save and close (this is the CSS code used for this website, by the way).

What you have written in your CSS with this code is, in human-readable words:

“Hey webpage! Whenever you find a part of the HTML code called ‘dropcap’ ( ” .dropcap { ” ), make that part of the text look like this: font-family: Palatino, serif; display: block; etc.”

So, now you have to create the part of the code called ‘dropcap’. Very easy:

Start writing a new post in WordPress, and switch to “text”.

Whenever you want to a big letter to appear (in our case, it’s the first letter of a post), write the following:

dropcap”>*insert one (or more, if you really wish!) letter here*.

In human-readable text, that means:

“Hey webpage! Here begins the part of the HTML called ‘dropcap’, please use the CSS instructions I have declared. The part ends here:(</span>)”

Pros:

  • Flexible: Total control on where you want the drop cap to appear.

Cons:

  • Not automated: you will always have to remember to add the span class when and wherever you want the drop cap to appear (this means, you will have to edit all your older WordPress posts to make sure there is a drop cap everywhere.)

Final Thoughts

As always, give a good look at w3schools’ CSS section if you are having any trouble or want to know more about HTML, CSS, and Javascript.

Drop cap is cool, but it might not always fit your design. Remember always that what matters is the result: adding an extra element as the drop cap might make your webpage look cluttered, or maybe it just doesn’t fit the main font of your page, or it’s simply unnecessary considering the audience you website will be aiming at. Always keep in mind what the final goal of your design is, and ponder if a drop cap is useful to reaching that goal or not and act consequently.

Have fun experimenting!

*The opening image comes from a fantastic initiative from the Boekwetenschap en Handschriftenkunde Amsterdam.

Giulio Menna
Lover of: all things digital, humanities, and medieval manuscripts. I created Sexy Codicology and the DMMmaps Project and run them both with passion and love in my free time. I am an MA graduate in Book and Digital Media Studies at Leiden University. Still happily living in the Netherlands.
%d bloggers like this: