If you look at this post (or any of my posts), you’ll probably notice that the first letter is much bigger than the rest of the text. This is what is known as a drop cap. You might have seen this used on various magazines, books, and blogs like <a href="https://www.theverge.com/">The Verge</a> and <a href="https://www.eater.com/">Eater</a>.
After seeing this being used so much, I decided to research what it was and how I can implement it on my blog. First, I needed a definition of what a drop cap was and of all places, <a href="https://www.lenovo.com/gb/en/glossary/drop-cap/">Lenovo</a>, offered the best explanation for what a drop cap was:
<blockquote>
Drop cap is a typographic feature commonly used in publishing to enhance the visual appeal of text. It involves enlarging the initial letter of a paragraph, often extending it into the lines below, creating an aesthetically pleasing design element.
</blockquote>
What the uses of drop caps are:
<blockquote>
Drop caps are commonly used in various forms of printed materials, including books, magazines, and newspapers. They serve as a visual cue to mark the beginning of a new section or chapter, making the text more visually appealing and engaging for readers.
</blockquote>
If a drop cap can be used in digital content:
<blockquote>
Drop caps are less commonly used in digital content compared to print media. However, they can still be employed in certain contexts, such as e-books, online magazines, or blog posts, to create a visually striking introduction and capture readers' attention.
</blockquote>
And if you could add drop caps to a website and what the best practices are:
<blockquote>
Yes, you can add drop caps to your website using cascading style sheets (CSS). By applying appropriate CSS code to the desired hypertext markup language (HTML) elements, you can achieve the drop cap effect. However, it's important to ensure that the usage of drop caps doesn't negatively impact the overall user experience or page loading times.
Here are some best practices for using drop caps effectively in design:
<ul>
<li>Ensure that the drop cap is visually consistent with the overall design of the document or webpage.</li>
<li>Choose a font and size that is legible and complements the surrounding text.</li>
<li>Use drop caps sparingly to avoid overwhelming the reader or detracting from the content.</li>
<li>Consider the cultural context and target audience when deciding whether to use drop caps.</li>
</ul>
</blockquote>
It’s honestly a well written document explaining how drop caps can be used in newsletters, media content and listing popular design trends.
With this in mind, I began to create a drop cap that would be aesthetically pleasing to the user, while not impacting the overall user experience or performance of loading a post.
I recently made a post about some <a href="https://www.joshblewitt.dev/posts/2025-05-20-performance">performance improvements</a> I had made to my blog, including removing custom fonts. I decided that it would be best to continue using this font stack for the drop cap.
<pre><code class="language-css">body {
font-family:`

`-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;`

`}
</code></pre>
It’s a consistent sans-serif look across all operating systems that looks modern, which is what I want. Obviously the drop cap will be in bold and several times larger that the rest of the text, so that it stands out and grabs the readers attention.
Next, I want to the text to wrap around the drop cap, that means I will need to use:
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">Float</a>; best way to make text wrap</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height">Line-height</a>; tightening vertical space</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">Margin-right</a>; for breathing room</li>
</ul>
Then comes the logic, how can this be applied to only one character on a blog post?
Pseudo-class and a pseudo-element will do the trick, as it turns out.
First, this will need to be applied to the first paragraph element, which is where the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type">first-of-type</a> pseudo class comes in. But now we need to target the first letter in that element, which can be achieved with the pseudo element of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter">first-letter</a> comes in.
However, my first attempt had a slight issue. It was applying the CSS to quote blocks, which didn’t look great. I was slightly confused on how I could resolve this, but I learnt about the use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator">child combinator</a>, which will now only target the first paragraph that is a direct child of my CSS class.
So with this in mind, this is the CSS I had for achieving the drop cap style that I wanted, which looks like this:
<pre><code class="language-css">.dropCap > p:first-of-type::first-letter {
 float: left; /* allows text to wrap around it */
 font-size: 4em; /* 4 times current font size */
 line-height: 0.8; /* tightens vertical space */
 margin-right: 8px; /* breathing room */
 /* font styling */
 font-weight: bold;
 font-style: normal;
 font-family:
 -apple-system,
 BlinkMacSystemFont,
 Segoe UI,
 Roboto,
 Oxygen,
 Ubuntu,
 Cantarell,
 Fira Sans,
 Droid Sans,
 Helvetica Neue,
 sans-serif;
}
</code></pre>
The end result looks pretty good. The text wraps around the drop cap while giving it an appropriate amount of space. Plus, since it’s using fonts that would be installed on the user’s machine, the performance of loading a post isn’t impacted.
I feel that the use of the drop cap gives my blog a more professional look and I want it to be a visual cue to mark the start of a blog post.
Feel free to copy the CSS above and use it on your own blog, publication or wherever you publish.

Posts tagged with Code