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?

HTML

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.

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

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.

example.png

More about drop cap

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

• Laura Franz wrote an excellent article on the history of the drop cap and best practice online, in Smashing Magazine.
• Briar Press has a huge library of drop caps. Beware, not all of those are free to use.
• The book historian Flickr account shows a lot of nice drop caps in history
• Using a font as drop cap ? You can play with those. Be warned that all fonts need to be tested to see if they react well with dropcap.js