Making Initial Letters Part I: Raised Initials

Jason Tselentis in Learning on October 28, 2015

Initial letters, such as raised initials and dropped initials, aren’t just for styling typography in print. Initial letters on the Web can help break up the monotony of a one-size-fits all layout, where instead of having type look the same from start to finish, you add some upsized typography to your palette. It’s the little things—or in this case, the big things, the capital letters—that can impress your readers, and make them want to come back again and again.

Initial Letters Then and Now

Scribes used large initials in manuscripts they wrote by hand, some dating as far back as the 5th century. Ornamental initials continued to be used from the 8th century up to the 15th century, when moveable type allowed for the mass-production of text. Whether written or printed, the letters stood large on their own, and at the forefront of the body of text, but other times the letters were accompanied by illustrative drawings that wrapped around them, depicting people, places, and things relevant to the religious or historical words they introduced.

Raised initials and dropped initials are still in use today, and can be found in newsletters, magazines, and books, as well as in digital typography on the Web or in apps. You might even see them in advertisements and signage. Raised initials, sometimes called stick-up initials, sit on the same baseline as the rest of the text that follows. Dropped initials, sometimes called drop caps, sit beneath the baseline, sometimes layered behind the rest of the body text, or with the rest of the body text wrapped around it.

This first installment about initial letters on the Web looks at raised initials, which are the easiest to set because they reside on a common baseline, and ordinarily don’t float outside margins—issues that require a lot more fine tuning that will be easier to grasp once you understand the basics of raised initials.

Using Classes

As with everything on the Web, there’s more than one way to skin a cat, or in this case, to skin a capital letter. Designers who already have a grasp of CSS elements, selectors, and classes, will know that they can create a separate class that acts as an initial cap designator.
Your CSS with a paragraph element and initial-cap class would appear as…

p { font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;} .myinitialcaps {font-size:48px; font-family: Didot;}

And your HTML would appear as…

My initial cap is much bigger here and set in the Didot typeface.

Giving you…

Seem easy? It is, to a degree. You’ll have to make adjustments depending on the raised letters that you have, since every capital letter requires specialized kerning. Once you’ve established your typographic choices, in this case the Didot® typeface for raised initials and the Georgia® typeface for body text, you’ll want to create separate classes for each raised initial. In the CSS below, the .myinitialcapsi class has a negative margin on its right, to close up a gap between the I and n.

.myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}

In this case, there’s some extra space between the “I” and “n.” Including a new class with a negative margin pulls it closer.

Web Typography Essentials

Depending on the screen resolution where users will see your site, the example above may have the I and n appearing as if they’re bleeding together because of the I’s serif jutting into the n. So conduct some testing across devices, from mobile to tablet to desktop to see how things look before you make your CSS final.

Quotes and Other Details

And it’s not just letters that you can make large. You can create another class to have a large quotation mark lead the charge. In this case, the quotation mark class is sized to neither 48-pixels nor 20-pixels the way we have our raised initial and body text respectively sized, but rather, a size in between the two: 30-pixels. The quote mark has even been pushed down by 4-pixels, to optically align with the I and balance the layout.

.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}

“Including” a new class with a negative margin pulls it closer.

You’ll need to use discretion when setting each and every initial cap in your backend along with your quotation marks—meaning you’ll have to adjust every letter optically in order to make sure its kerned and aligned to the surroundings, such as your margins. For instance, the letter T will need to float towards the left, sitting outside of the margin, so its crossbar sits optically in the layout. Round letters such as C, G, O, and Q will also need a similar treatment. And even though the 20, 30, and 48 sizes were used in this case, you’ll need to create sizes based on the typefaces you choose, your layout, and the screen-sizes and screen-resolutions your site will be accessed on. Remember: When in doubt, test it.

Pseudo-Elements and Pseudo-Classes

With a CSS pseudo-element, you can easily create a raised initial by adding ::first-letter, in this case adding it to a paragraph element. Use :first-letter (with one colon) if you’re developing for older, legacy browsers.

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;}

p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

.initialb {margin-right:-0.1em;}

.initialn {margin-right:-0.15em;}

The HTML, which has CSS classes accounting for kerning on the letters N and B, would look like so…

An inital letter, with the first letter being a capital letter. With a line break, the next line has no initial cap.

notice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?

But with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph? Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?

Even with the benefit of a pseudo-element, a lot of little details went into making the above happen, including separate styles to handle kerning issues, and added padding so each new paragraph with its raised Monotype Bernard Condensed® typeface has extra air in between. But this method makes the first letter of every new paragraph uppercase. Some may see this method as necessary, or merely the result of how the code works. But too much of a good thing can be bad, and in this case, over-capitalization is overkill.

Combining Pseudo-Classes and Pseudo-Elements for Smarter Layout

Adding a :first-child pseudo-class helps solve the over-capitalization issue, by making the first letter, and the first letter alone, uppercase.

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;}
p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

Putting it altogether with HTML…

An inital letter, which is also designated as a first-child, is the only letter that gets the raised initial treatment in this layout.

Because just the first-child gets capitalized, notice how my subsequent first letters have to be capitalized now, which is different from how the prior layout handled the typographic assignment of first-letters. Finally with a hard return, and a new paragraph started, we are back to having just the first letter of the layout capitalized, which looks more elegant than having every single letter of a new paragraph capitalized. Do you agree?

The beauty of using pseudo-classes and combining them, is the simplicity and case-by-case handling they offer. What about the negatives? There are so many different kinds of pseudo-classes, and you can combine them in an infinite amount of ways, that it can seem dizzying. For example, the :first-child and :first-of-type pseudo-classes could give you the same results. And not only can you attach the pseudo-class to your paragraph element, but you can also attach it to a <section> or a <div> element as shown below with a raised initial set in the Didot typeface at the start of a section. Note how a generous margin attribute has been added to the right of the capital A, which would otherwise bump into the s at the start of section.

section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;}

section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}

And with the HTML…

<section> a section gets a raised capital letter applied to the first letter.

And a new paragraph… </section>

Having fun yet? If you’re really feeling adventurous, head out to developers’ websites and research different methods in addition to :first-child and :first-of-type such as :nth-of-type or :nth-of-child to see how those other types of pseudo-classes could be used for raised initials. Or you can stick with the basics shown here, and put them to work on your own site. Whether you go beyond the basics, or go deeper into CSS, once you have a handle on how to use pseudo-classes, and learn about :first-child, :first-of-type, and :first-letter for your CSS, it’s just a matter of applying it all correctly to your HTML.

Capping It Off

Using separate classes along with pseudo-classes to account for different letters, as well as punctuation such as quotation marks, takes trial and error and the calculation of positive and negative space. And it also takes a lot of patience. Letters such as F, G, O, P, Q, T, W, V, and Y, among others will require separately kerned classes due to the negative space found at the bottom-right of those characters.

But the fun really begins when you introduce Web fonts into the mix, and create raised initials that go above and beyond the ordinary, to get your readers’ attention and make your site stand out from the crowd. Mind the details to make it all look good, and your readers will appreciate the panache you’ve added to your site. Be on the lookout for dropped initials, aka drop caps, coming soon in Part II.

Thanks to Peter Mann for identifying a typographic error.

Jason Tselentis is a designer, writer, and educator. As Associate Professor at Winthrop University’s Department of Design, he teaches visual communication design, brand strategy and development, Web design, and typography. His writings about design and visual culture have appeared in Arcade, Eye, mental_floss, Open Manifesto, Print, and HOW magazines. Mr. Tselentis also has four books to his credit on design, typography, and design history.