Exploring Creativity with Versal Letters

Some time ago, Geoff Graham from CSS-Tricks gave us a refresher on the CSS `initial-letter` property. But how can you style drop and initial caps to align with a brand’s visual identity and enhance its storytelling?

Here’s my approach in CSS by combining `::first-letter` and `initial-letter` with other surprising properties like `border-image` and `clip-path`.

Patty Meltt is an emerging country music star.

**My brief:** Patty Meltt, an emerging country music star, needed a website for her new album launch. She wanted it to be unique and memorable, so she contacted Stuff & Nonsense. Patty’s fictional, but the challenges of designing and developing similar sites are real.

First, a drop cap recap. Chris Coyier discussed drop caps years ago. They are decorative letters at the start of a paragraph, often spanning multiple lines. A typographic flourish seen in illuminated manuscripts and traditional book design, it adds visual interest and guides the reader’s eye to the starting point.

Study manuscripts from the Middle Ages, and you’ll find hand-decorated illuminated capitals. The artists were called “illuminators.” These medieval versals not only indicated where to start reading; historiated letters also illustrated stories, useful since most people in the Middle Ages couldn’t read.

On the web, drop caps can enhance readability and reflect a brand’s visual identity.

### A brief refresher on properties and values

In CSS, drop caps are created using the `::first-letter` pseudo-element with `initial-letter`. `::first-letter` targets the first letter of a text block, allowing you to style it separately from the rest of the paragraph. The first number sets the letter’s height in lines, and the second controls its baseline alignment.

“`css
p::first-letter {
-webkit-initial-letter: 3 3;
initial-letter: 3 3;
}
“`

Due to varying browser support, include both the unprefixed and `-webkit-` prefixed properties for compatibility. It’s also wise to wrap the `initial-letter` property inside an `@supports` CSS at-rule to check for browser support and provide a fallback if needed:

“`css
@supports (initial-letter:2) or (-webkit-initial-letter:2) {
p::first-letter {
-webkit-initial-letter: 3 3;
initial-letter: 3 3;
}
}
“`

The `initial-letter` property automatically calculates the font size to match the number of lines a drop cap spans. On its own, this can make quite an impression. However, drop caps truly come to life when combined with other CSS properties.

**Tip**: Interactive examples from this article are [available in my lab](https://stuffandnonsense.co.uk/lab/caps.html).

### Shadows

When I want to lift a drop cap off the page, I add a single `text-shadow`. Shadows can be colorful and don’t have to be black. I created a [full live demo](https://stuffandnonsense.co.uk/lab/caps.html#demo-2) you can check out.

“`css
p::first-letter {
/* … */
text-shadow: 6px 6px 0 #e6d5b3;
}
“`

But why use just one shadow when two hard-edged shadows can turn a cap into a classic graphic typographic element?

“`css
p::first-letter {
/* … */
text-shadow:
-6px -6px 0 #7d6975,
6px 6px 0 #e6d5b3;
}
“`

### Strokes

The `text-stroke` property — shorthand for `text-stroke-width` and `text-stroke-color` — adds an outline to the center of the text shape. It’s a Baseline feature and is now widely available. I can make the cap text transparent or color it to match the page background.

“`css
p::first-letter {
/* … */
text-stroke: 5px #e6d5b3;
}
“`

### Backgrounds

Adding a background is a simple way to make a cap more decorative. I could start by adding a solid `background-color`.

“`css
p::first-letter {
/* … */
background-color: #97838f;
}
“`

To add a lighting effect, I could apply a conical, linear, or radial gradient background image (here’s a [demo](https://stuffandnonsense.co.uk/lab/caps.html#demo-6)):

“`css
p::first-letter {
/* … */
background-color: #e6d5b3;
background-image: linear-gradient(135deg,#c8b9c2 0%, #7d6975 50