Comment by 90s_dev

5 days ago

For anyone wondering how that initial letter is made to look like that:

1. The background flourish is created with ::before and a custom web font

2. The flourish letter is found via content: attr() on the parent element

3. The actual big letter itself is also done via custom web font & float: left

3 comments

90s_dev

Reply
typesarecool  2 days ago

Looks like all the CSS is

/* Drop caps / .first-paragraph { position: relative; padding-top: 0.2em;

  &::first-letter {
    /* font-weight: bold; */
    font-size: 4em;
    float: left;
    margin: 0.15em 0.05em 0 0;
    font-family: 'EBGaramond-InitialsF2', serif;
    font-display: block;
    line-height: 0.83em;        /* Fix alignment in Chrome */
  }
  &::before {
    margin: 0.15em 0.05em 0 0;
    font-size: 4em;
    font-family: 'EBGaramond-InitialsF1', serif;
    content: attr(data-first-letter);
    color: gray;
    position: absolute;
    left: 0;
    top: 0.28em;
  }
}

wavemode  2 days ago

It was only upon reading this comment that I even realized the initial letter is text. At first glance I assumed it was just an inline-block image.