Drop Cap : A smallest history of the drop cap

Once upon a time, there was a letter at the start of the first paragraph of a text. It was bigger than the other letters, and, sometimes, it had different colors from the black of the text. It could even hide some symbol or some illustrations and was a way to introduce the reader to the text that followed. At that time, books were hidden in the darkest rooms of religious places or castles, and the only light available to help readers when the sun was down was a candle and its dancing flame.

Imagine the moving shadows around a letter which would have been drawn by hand and painted with that shiny red, and you can feel the reality of the story.


Drop caps are not always latin – see above, page from a Hebrew Bible, Shelfmark: MS. Kennicott 3, more information about this book here

For centuries, drop caps have been a focus of what are today known as book designers. There were two main uses of that initial capital:

  • the decorative one, which would add meanings by mixing letters, colors and illustrations;
  • the brain-friendly one, which would help readers to break the text in different parts and remember where they stopped their reading thanks to the illustrations.

Until the XXth Century, book designers used the drop cap as an ornament, and, with the evolution of the printing process, and to reduce cost, they came to only use a bigger letter with no specific color, as a declaration of the first paragraph of a new chapter or section.

Around the 1910s, Adolf Loos made a big move against ornamentation when the Ornament und Verbrechen was published, (in German or in English) followed by Jan Tshichold and Max Bill, both book designers of the first half of the XXth Century. Eventually, both of them fought each other about modernism in book design (you can read more about their battles here or the French translation published by B42.)  Following that period, drop caps were less and less used.

A return to drop caps came with the revival of the manual printing press with its own special typeset that came all around the world in the past decade. It was called vintage type or vintage letters, with, as a major activist in that game, Jessica Hische and her Daily Drop cap project

The Adobe solution.

There’s quite a few ways to make a drop cap using different JS libraries from around the web.

Today we’ll use the simplest one, which works quite well, made available by the Adobe team.

The pro

  • Drop caps are well formatted: the baseline is respected;
  • The initial is scaled using math to have the right height;
  • The library weight is only 3.3kb;
  • It’s inDesign user-friendly;
  • In case of a missing font, we’re still aligned to the baseline.

The cons

  • The use of the css :first is quite impossible, we have to use a JS work-around to achieve the same result.
  • It’s inDesign user-friendly.

How does it work?


The header

As always, we add the link to the library in the header (we’re adding jquery too).

<script src="js/dropcap.min.js" charset="utf-8"></script>

the body

Let’s make a paragraph to have the first letter as a drop cap. We use the span class dropcap that we’re going to use to tell to the script which letter we need to turn to a drop cap. In the following, it’s the first one.

<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates repellendus officia perferendis, illum tenetur aut</p>

Then, we add the script, just before the end of the body to be sure that the whole content is loaded before the script does its job.

    var dropcaps = document.querySelectorAll(".dropcap");
    window.Dropcap.layout(dropcaps, 3, 2);

The first line of the script is vanilla javascript that will select all class=“dropcap” of the HTML, by adding those html elements to the dropcaps variable. The second line will execute the layout function of the dropcap script, with three options :

  • the elements the script will affect,
  • the size of the drop cap;
  • the line of text the drop cap will be based on.

In our example,

dropcap.layout(dropcaps, 3, 2)

we will affect all the elements of the dropcap variable, using a size of 3 lines, and starting the drop cap on the third line of the paragraph.

Here is the result when we change the css to have serif for the drop cap, while using the new Work Sans font for the body.



More about drop cap

And now, a few links to explore the world of the drop cap.

This post was written by Julien Taquet

From posters to interfaces, I’ve been designing user experiences for a decade, with a soft spot for books. If computers and networks are strongly asking “what is a book today?” I’d like to push the thinking further. And since I always like to do things in a different way, let’s turn off InDesign for a while and see where –and if– we’ll be stopped in the making of books.


  1. You’re right Dave, thanks for this insight!

    What’s also interesting is to see how the CSS working group chose to go along the Adobe road to describe the drop cap.

    For now the attribute is not really supported, but let’s keep an eye on this.


    And, while looking at it W3C also thought of the alignment of those drop cap. Maybe we can start to think about hanging punctuation.

Leave a Reply to Dave Cramer Cancel reply

Your email address will not be published. Required fields are marked *