Web Platform Team Blog

Making the web awesome

Drop Caps Are Beautiful

As a design pattern that predates movable type, initial letters or “drop caps” remain quite common in books and magazines today. They can be merely decorative, they can help navigation by emphasizing the beginning of a new section, or both. Yet they seem comparatively rare on the web and are even more obviously missing in most e-books.

What is missing?

Though CSS offers the basic layout mechanisms needed for initial letters – floats and ::first-letter – the solution is incomplete. For the result to be visually appealing, a drop cap has to align with its adjoining text in a specific way. The diagram below shows how the baseline of the capital “H” should rest on a baseline of the adjoining text; and how, in the most common case, the top of the H should align with the top of capital letters in the first line.

Through careful adjustment of various properties – font-size, height, margin, line-height… – one can achieve a similar result in CSS. There is a catch: the resulting set of layout values will be tightly coupled to the metrics of a specific font family. If font fallback occurs, the alignment is lost. Any change to the original page design – new font size, a change of paragraph line-height – will also require updating all these values.

As an example, here is an initial letter in the online New Yorker:

Dropcap set in Neutraface

Drop cap set in Neutraface

Though this capital “I” is a little short – its top is lower than that of the capital “U” in ‘Utah’ – its baseline does line up well with the third line of text. But if the preferred Neutraface family does not load and the browser falls back to the next specified family, we would see this when the layout defined for Neutraface is instead applied to Helvetica Neue:

Screen Shot 2014-09-16 at 12.57.49 PM

The same page after font fallback to Helvetica Neue.

Often, no baseline alignment is even attempted. For instance, in this Vanity Fair article the baselines of the initial letters do not line up with those of the adjoining text. Dave Cramer collects more examples on his tumblr.

The initial-letter property

To fix this, the CSS Working Group is discussing the initial-letter property specified by Dave in the CSS Inline Layout module (The alignment diagram we used earlier was copied from the specification). Since earlier this month, you can try it out in Webkit Nightly.

It is very exciting to have a native implementation to play with, though there is of course more work to do to finalize the feature design and implement it across browsers.


In the meantime, we thought we would try to lay out drop caps using JavaScript and CSS. The result is dropcap.js.  Using a single line of code you can specify the height of your drop caps and which baseline they should line up with. The project’s built-in demo page will let you play with common font families and some sample text. For instance, a four-line high drop cap set in Baskerville with text in Times New Roman:

Screen Shot 2014-09-17 at 10.59.01 AM

The library and its source code are available on GitHub. Let us know what you think on this blog or via @adobeweb on Twitter.


  1. October 02, 2014 at 1:26 pm, Vadim Makeev said:

    Sylvain, please remove text-align: justify from .test-paragraph and keep it left-aligned. Spaces between words in your example are too ugly to illustrate good typography. Don’t trust me? Ask any typographer or designer with typography skills.

    • October 04, 2014 at 2:40 pm, Brad Shaw said:

      Just what we need, a loud mouth know it all typography Nazi. Except you reference what must be one of the ugliest authorities on web typography. Trying to apply print methodology to the web simply does not always work and The Elements of Typographic Style Applied to the Web is a shining example of this. Yes, there’s some ugly spacing in that paragraph, but it illustrates what the author was trying to illustrate, a 4 line drop cap almost perfectly aligned (it’s actually 1 pixel too high). Nevertheless, this dropcap.js is intriguing as I was just working on trying to get dropcap alignment perfect with the css methods described above when I coincidentally stumbled across this article in my feeds.

      • October 12, 2014 at 8:51 am, Richard Rutter said:

        “One of the ugliest authorities on web typography”? Ouch. Care to expand on that? What offends you in particular? You might like to bear in mind the site was put together in 2005 (9 years ago and counting) before pretty much anyone else was even talking about web typography as something worth considering.

  2. October 02, 2014 at 1:35 pm, Sylvain Galineau said:

    Vadim, I am quite aware of this general guideline. But for a single short paragraph centered in a page, no justification looks even odder to me. At the least, I do not believe it looks better. (And I tried it, with many line measures). Also, I do not think justification is as bad as browsers’ algorithms make it look. A lot of print content is justified and looks fine. We should expect better justification instead of giving up on it entirely. Same thing with drop caps!

  3. October 11, 2014 at 12:52 pm, Jack Leckliter said:

    I can’t get dropcap.js to work, and I suspect it’s because I don’t know javascript other than copying/pasting scripts others have created into my HTML. For people in my situation (which I suspect is many), the documentation at GitHub doesn’t give enough to go on to implement things successfully. What’s giving me trouble is the dropcapRef parameter. The Github page says:

    > …[o]nce you have updated your markup [by enclosing the drop cap in a
    > span tag with a class of “dropcap”], simply include the script in your page:
    > The script defines the window.Dropcap.layout method; you call it like so:
    > window.Dropcap.layout(dropcapRef, heightInLines, baselinePos);
    > The dropcapRef parameter may be one of:
    > • An individual HTMLElement object
    > • A NodeList e.g. obtained from querySelectorAll() or a property
    > such as Node.childNodes
    > The specified element(s) will be floated, sized and positioned based on the
    > values you specify for baselinePos and heightInLines.

    Can you provide simple, copyable/pasteable code that specifies dropcapRef to equal a class of “dropcap” or “span.dropcap”? Thanks.

    • October 13, 2014 at 2:21 pm, galineau said:

      Hi Jack,

      Apologies if the instructions were too high-level for you. I will improve on them. Here is what you would want to add to the bottom of your page, given a class for “dropcap” and assuming a dropcap height of 3 lines:

      <script src=’/yourpath/dropcap.min.js’></script>
      var dropcaps = document.querySelectorAll(“.dropcap”);
      window.Dropcap.layout(dropcaps, 3);

      Does this help?

      • October 13, 2014 at 9:14 pm, Jack Leckliter said:

        That did the trick — thank you!

        Two typos to correct, though: The spelling of the external script “drocap.min.js” in your example above should be “dropcap.min.js”. Also in the sample line of code that loads the external script…

        …the single quotes in the example should instead be double. I was banging my head against the wall trying various things that didn’t work until I noticed that. Bingo.

        Also, not being familiar with javascript, it is unclear to me what might be kosher for single vs. double quotes on the document.querySelectorAll(‘.dropcap’); string. Examples I’ve seen at show single quotes, your example shows double, but both appear to work.

        Thanks again!

        P.S. I’ve noticed one anomaly with the drop caps so far. On one of my websites that uses plain-vanilla Verdana for the body copy, the drop cap does not align to the baseline of the adjacent body copy, but instead a few pixels above. The disparity is progressive: perfect alignment if the drop cap has a value of “1” (i.e., doesn’t have the appearance of a drop cap) a few pixels above base alignment if “2,” more if “3,” etc. On another site that uses Angie Sans (via Typekit), though, the base alignment is perfect.

      • October 13, 2014 at 9:42 pm, Jack Leckliter said:

        After a little more testing, it turns out the problem with the quotes causing the external dropcap.min.js file not to load properly wasn’t that the quotes were single instead of double. It’s that in your post they got converted to true quotes rather than being straight quotes, and I had cut and pasted your code rather than retyping from scratch in Dreamweaver. As long as the quotes are straight and not curly/true quotes, either single or double quotes works.

        • October 14, 2014 at 3:49 pm, galineau said:

          Jack, I am not sure why or how these quotes were transformed but yes, only straight quotes in code.

          Regarding your Verdana issue, is this something you can reproduce by choosing Verdana in the dropcap demo page at ? Is this something you can reproduce using other web browsers on the same machine? Because the web platform does not expose font metrics we have to use other methods to figure them out. Success depends on our ability to get accurate numbers for both the drop cap family and the family of the adjoining paragraph. I’m happy to look into this given: the operating system and browser you use, the family of the paragraph, and the paragraph’s line-height.