Fancy initial letter
I was browsing The Folio Society’s website yesterday, as I am wont to do. Don’t worry for me—I’m not at great risk of spending money because those books are just too dang expensive. But, man, do I want some (read: all) of them.
Among the many books that caught my eye—a LotR boxed set (and accompanying books), a Dune collection (because I really need another one of those), and all the books of Earthsea—I spotted their two-volume edition of The Book of the New Sun. Seeing the layout within its pages sent me on a typographic journey. I had to know: What is that big letter at the beginning of a chapter called? And, more importantly, how do I have that on my website?
Mm, look at that initial.
It turns out, its called an initial (or an initia, if we’re talking about illuminated manuscripts, apparently). An initial is a letter at the beginning of a paragraph that’s larger than the rest of the text. And I think the particular style of initial in question is a drop cap illustrated initial.
Delamotte, F.: “Ornamental Alphabets, Ancient and Mediæval” (1879)
There are a variety of ways to add initials to website text. I read a few articles and followed a couple tutorials1, messing around with some of the more modern ways, but deciding to go with the most compatible route in the end. (Mostly because my site’s current HTML and CSS is a mess, and because initial-letter isn’t supported by my preferred browser.)
Here is the HTML I’ve added to my blog post template:
<span class="firstletter">X</span><span class="firstwords">xxxx xxxxx xxxxx xxxxx xxxxx</span>And here is the CSS:
.firstletter {
color: rgb(209, 77, 65);
float: left;
font-family: 'Typographer Woodcut Initials';
font-size: 75px;
line-height: 1;
padding-top: 4px;
padding-right: 8px;
}
.firstwords {
font-variant: small-caps;
}I have no doubt smarter folks than me could come up with better ways of doing this, but I’m pretty happy with what I managed to accomplish. (At least, until I get the website redesign itch again—it’s coming!)