• 2019-10-19

    Perfect drop caps


    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.


    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.


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

    <p>A long text</p>


    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.