I'm trying to keep a nice vertical rhythm of 10/12 (and multiples) for my page:

body {
  font-size: 62.5%;   /* 10px */
  line-height: 1.2em;

I'd like to do a drop-cap on the first p of a section, but I don't know what font-size, line-height, and/orpadding to use for it to retain the spacing:

h1+p:first-letter, h2+p:first-letter,
  p:first-child:first-letter          { ??? }

I haven't decided whether I want it to be two line-heights or three, so I'd like to know how to calculate both.

2 answers


I'm pretty sure that you would multiply the current line-height value by the amount of lines that you want the drop-cap to occupy. eg: 3 lines high would be 1.2 (your line-height) x 3, which is 3.6em.

Try something like this if you want 3 lines occupied by the cap:

h1+p:first-letter, h2+p:first-letter, p:first-child:first-letter {
        margin:.1em .1em 0 0; }
Answered over 7 years ago by TailorDMI
  • How does the margin (specifically the top- and bottom margins) play into that? I don't want a 3-line dropped letter to bump the fourth line of text. James A Rosen over 7 years ago
  • Any margin or padding added to the element should be considered in the equation because either will increase the space occupied. If you want the cap to be smaller while occupying the same amount of space you could add the margin/padding and then subtract that amount from the font-size. Just make sure when they all add up so that the element takes up (from my example above) 3.6em, the space you are trying to occupy with the cap. TailorDMI over 7 years ago

I use a service like this to get a grid and then adjust accordingly. It is easier than to calculate!

Answered over 7 years ago by Divya Manian