Add Drop Caps to your Blog Post Summary

Estimated Reading Time:
In today's issue of 'Slog That Blog', we'll try to make our blog posts have newspaper-style dropcaps.

#DropThatCapDownLow #huh Why? Coz, we can! Also, because it looks super cool and traditional-media-ish. Take a look!

Boring or Booyah?

Note: Though the following tutorial has instructions for use in the Blogger platform's dynamic views template, the CSS code may work on other blogging platforms with some slight tweaking. Scroll down to read more.

THE TL;DR Version

  1. Log in to
  2. Click on the blog you want to edit. The one that uses a dynamic views template.
  3. Go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
  4. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  5. Paste the code below at the end of any other CSS code you might have there.
  6. Press ‘Apply to Blog’.
  7. Done-dabidozi!
/* ADD DROP CAPS TO THE FIRST LETTER OF THE POST SUMMARY */ div.summary.entry-summary:first-letter {   font-size: 2em;   font-weight: bolder;   margin-right: 0.1em;   float: left;   padding: 0.1em;   color: #333333;   background-color: rgba(255, 255, 0, 0.5);   border-radius: 0.1em; } /* STYLIZE THE FIRST LINE OF THE POST SUMMARY  */ div.summary.entry-summary:first-line {   font-variant: small-caps;   letter-spacing: 0.1em;   font-weight: bolder; }

The Lengthy Version

What is a drop cap?

< official sounding voice >
A drop cap is a large letter at the beginning of a text block, usually at the start of a chapter or an article, that has the depth of two or more lines of regular text. 
< / official sounding voice >

Why use drop caps?

In traditional media, drop caps provide greater readability and to mark important passages. However, in this age of digital media and an almost unlimited space for fitting in content, initial caps and drop caps don't necessarily improve a website's user experience the way they did in ancient texts.
I have a counter argument though.
With people partaking most of their reading on the web, having them scroll endlessly and constantly click into pages to learn more has brought down the love of reading. In my opinion, all that space and the advantage of analyzing clicks have made it harder to respect text-only websites over the years.

Meaning, content development now has to include images, videos, and other media that promote the text content without requiring the user to apply too many actions.
So, yes. Though many would consider drop caps or even initial caps to be just decorative elements, they do respect a traditionally adopted reading style, and that's something we can surely relate to.
Having said that, let's see how we can apply drop caps to your blogpost.

Applying Drop Caps: The Amateur Way

It's quite simple really. To create drop caps, we'll be using a concept in CSS called a pseudo-element.
Essentially, pseudo elements behave just like HTML elements (and are really good at faking it!) and can be styled using CSS. The two popular pseudo elements in use are :first-line and :first-letter. We are going to use both.
In the piece of CSS code where you're applying styles to the first line, you could just choose a font that naturally is capitalized like in, 'PERMANENT MARKER' or 'LUCKIEST GUY'. To do this, replace the line 'font-variant:...' to
font-family: 'Luckiest Guy';

You can use the name as is of any of the web fonts in the Blogger font. No need for additional customization. Incidentally, Luckiest Guy is a web font. 
Or, you could do what I have done which is convert the default font for the page to its uppercase version.
Here's the CSS code once again but I've highlighted those parts that you could customize for your blog's colors and formatting.
NERD ALERT! You may have noticed that I've used font-variant to change the first line to uppercase instead of text-transform which is more commonly used. Why? Because, for some reason, text-transform seems to be getting ignored when applied to Blogger's dynamic views templates. So, you could switch to text-transform if you're using a different template or platform. Though some people would say that using font-variant instead of text-transform for small caps would be a typographical faux-pas (no, seriously), I say, "Come on! We're just having fun here".

Drop caps and your content

As you can see, not all all blog design changes affect your content the way you want it to. For example, I like the way the drop caps apply to posts that start with a long sentence. But, if your post begins with numbers or a short-sentence paragraph, it might look a little odd. Take a look.
When the content starts with a number:
So, play around and figure out what you like and what works best for your website or blog design.

What it looks like now!

Lead and feature articles:

Below the fold:

Wanna read more?

My favorite article about drop caps and how it's discussed in typography is by Laura Franz here. She talks about the history of how drop caps and initial caps came to be and how they are just decorative elements in today's world of digital media which has an unlimited scrolling. This article also tackles more robust ways to apply drop caps and best practices to ensure you have beautiful drop caps on your website. Have questions? Wanna comment? Good news, there's a comment box below. Go for it!


Popular Posts