A quick trick to make the first letter spread multiple lines.

I've always liked to see articles where the first letter of the first paragraph is much larger and expands a few lines. So I wanted to try and do the same on my personal site.

Since I am using Scss on my site, I will first show you how to do it using CSS. Then how you can do it with CSS, it won't be much of a difference, I'm sure you will be able to understand what's happening.

Selectors

Since the goal is to transform only the first letter of the first paragraph of your article, we need two selectors, the :first-of-type and the :first-letter.

By adding the first-of-type selector to the paragraph, it will only apply the rules to the very first paragraph inside the article element. Since we are applying the rules to the first paragraph, we also need to add the first-letter selector to apply the rules only and only to the first letter in the first paragraph.

scssCopy
1p:first-of-type {
2    &:first-letter {
3      float: left; 
4      color: #FF721E; 
5        font-size: 60px;
6        line-height: 50px;
7        padding-top: 4px;
8        padding-right: 8px;
9        padding-left: 3px;
10    }
11  }

Using the float rule, will make the first letter to move to the left and put the rest of the test on the same line as the big letter. We also need to increase the font-size and the line-height, otherwise, the letter will occupy the whole left space and will not allow the rest of the text to move under it.

Finally, I added some padding just to add a bit more space around the letter. If you don't add some padding, the text will stay too close.

Responsiveness

When users use your site on mobile, the first letter might look way too big. It sure did on my case, so I tweaked the font-size and line-height a bit, making the first letter smaller then added a media query for a desktop screen and then, increase the letter size back to the previous values.

scssCopy
1p:first-of-type {
2    &:first-letter {
3      float: left; 
4      color: #FF721E; 
5      font-size: 45px;
6      line-height: 43px;
7      padding-top: 4px;
8      padding-right: 8px;
9      padding-left: 3px;
10      @include desktop {
11        font-size: 60px;
12        line-height: 50px;
13      }
14    }
15  }

CSS Version

Well if you want to use this trick with CSS instead, I got you covered. The rules will look the same. You can just add the two selectors together. Note that you will need to add a media query here if you want to change the size of the letter in smaller screens.

cssCopy
1p:first-of-type:first-letter {
2  float: left;
3  color: #FF721E;
4  font-size: 60px;
5  line-height: 50px;
6}

I hope this helps you add that effect to your site, feel free to share it with me on Twitter @FabioRosado_.