• 2019-10-19

    Perfect drop caps

    Author

    Jens Törnell

    Comments

    Start a discussion

    It can be tricky to have drop caps in the text to perfectly align with the number of rows, expecially if you often change your mind about font size or line height.

    Solution

    p {
  --line-height: 1.5;
  --font-size: 1rem;
  --rows: 5;

  line-height: var(--line-height);
  font-size: var(--font-size);
}

p:first-letter {
  float: left;
  font-size: calc(var(--font-size) * var(--rows) * var(--line-height));
  line-height: 1;
}

    The only value you should change in the code above is the rows that now is set to 5. It will then recalculate the drop caps letter to match the rest of the text.

    HTML

    You need a really long text. You can use http://www.cupcakeipsum.com/ for that.

    <p>A long text</p>

    Future

    In the future we can probably solve this with initial-letter but as the time of this writing, it's not well supported and should not be used.

    Sources: