AGS Logo AGS Logo

Drop Caps Then and Now
The initial-letter property

Manuscript of a Gregorian chant's sheet music with lyrics. The first word in the lyrics containing a beautifully ornate drop cap.

Wikimedia Commons contributors, "File:Lucis Creator Optime 14th C.jpg," Wikimedia Commons

A little bit of history

Drop caps have been around for for centuries. Even before we had CSS, or computers, or even the printing press. They were already around when monks were painstakingly copying books by hand in their monasteries. Often full of intricate details they usually marked the beginning of chapters or paragraphs to indicate the beginning of a new sections or chapters. An example of a drop cap is shown in figure 1.

Manuscript with enlarged and beautifully ornamented first letter on at the top of page on the beginning of the first paragraph.
Frontispiece of the day Psalter of the seventeenth century. prov. Convent of the Capuchins of CL, author unknown, Public domain, via Wikimedia Commons

Once we started using the printing press, the presence and drop caps diminished along with their complexity (figure 2) although when used, their purpose stayed the same, to denote the beginning of a paragraph or chapter.

Black and white ornate letter N printed using a printing press.
Henry Stacy Marks (1829-1898), Public domain via Wikimedia Commons

Drop caps on the web

Then came the web, and drop caps became a lot more difficult to implement. Although we have had the ::first-letter pseudo-element, which allows us to select the first letter in any given element, aligning the letter to the rest of the text could be a bit tricky. One solution was to use a combination of floats and margins. First, we select the first letter of the first paragraph and set the color and font size as seen in listing 1.

Selecting the first letter
p:first-of-type::first-letter {
  color: var(--accent);
  font-size: 350%;

Because we increase the size of the letter, the letter towers above the text as the baseline of the letter is the same as the rest of the line, as seen in figure 3.

The first letter of the first paragraph is yellow and much larger than the rest of the letters which are a very dark blue almost black. The letter's baseline is aligned to the baseline of the other letters beside it. There is much wider space between the first and second lines and the between the lines of the rest of the paragraphs.
Increased font size and colored first letter

To be able to manipulate the letter's position, we then float the letter to the left and use line-height and margins to vertically align the top of the letter to the top of the rest of the line (listing 2), which produces the output seen in figure 4.

Using float to create a dropcap
p:first-of-type::first-letter {
  color: var(--accent);
  font-size: 350%;

  float: left;
  line-height: .25;
  margin-right: .5rem;
  margin-top: .4em;
The first letter is larger than the rest and yellow, aligned top aligned to the first line and the spacing between the first and second line is now consistent with the rest of the paragraph.
Finished drop cap

But what if we had a simpler way of achieving the same result?

The initial-letter property

Recently introduced is the initial-letter property, which allows us to position the letter without having to float it or calculate margins and line-heights to position it.

As of October 2023, the support is still a bit shaky (figure 5), but even with only partial support we can already see the benefits and ease of use.

Screenshot of support table from showing partial support in Chrome, Edge, and Opera. Incomplete support in Safari, and none in Firefox.
initial-letter browser support on October 25th 2023

Note: To check the current state of browser support for initial-letter, visit Can I use initial-letter?

The initial-letter property takes 2 numbers.

The first is the number of lines the letter is going to span. In other words, how tall our letter is going to be in terms of paragraph lines. We want ours to span two lines, so we will use a value of 2.

The second is optional and is how many lines we want our letter to sink into the text by. We want ours to be flush with the top of the first line, we set it to be 2 lines tall, so we will also make it sink by two lines.

Our declaration therefore looks as follows: initial-letter: 2 2;.

Using this property we can therefore radically simplify our CSS (listing 3).

Note: ::first-letter and initial-letter will often be used together but have very distinct functionality. ::first-letter is a pseudo-element and allows us to select the letter, while initial-letter is a property and allows us to style it.

  p:nth-of-type(2)::first-letter {
    color: var(--accent);
    margin-right: .5rem;
    -webkit-initial-letter: 2 2;
    initial-letter: 2 2;

Same as before, we need to keep the color change. We also keep the right margin, which adds a little bit of horizontal space between the letter and the rest of the text. But now, all of the positions previously being done via the float, top-margin, and line height are handled by the initial-letter property while still achieving the same result (figure 6).

Note that the drop cap is applied to the second paragraph this time so that we could look at the results side by side.

The first letter of the second paragraph is yellow, 2 lines tall and flush with the top of the paragraph.
Drop cap on the second paragraph

Find the code presented in this article below or on CodePen.

Happy Coding!

License: CC BY-NC-ND 4.0 (Creative Commons)