Small Caps in Headings, Titles and Proper Nouns.

Image for Small Caps in Headings, Titles and Proper Nouns.

Figure 1

Image for Small Caps in Headings, Titles and Proper Nouns.

Figure 2

Image for Small Caps in Headings, Titles and Proper Nouns.

Figure 3

Image for Small Caps in Headings, Titles and Proper Nouns.

Figure 4

Image for Small Caps in Headings, Titles and Proper Nouns.

Figure 5

Forgive me for not posting here for a while!

I had an interesting debate with one of my students about using Small-Caps in titles and headings, and I thought I should follow this up, with some fruitful reading, searching and experimenting!

The question is this:

If you want to use small-caps as a style in headings, titles, or proper nouns, then should the first letter be a full capital or should it be only set in the small-caps style.

Is it better to see:

New York


new york



Small caps can look great inline where you want to emphasise a phrase. The letters are designed to have the same x-height as the lowercase in the same font. But as you can see here, the small-caps variant of this font is not great!

So, yes, it does depend on the typeface. But...

As you can see from the New York example above, version 1 doesn't look so good. The contrast between the first letter and the remaining ones, in the word, is really too much. Ugly even.

Style is One Thing, Content is Another

So here's the rub. In the New York example above, the second version is achieved by using all lowercase letters - new york! Crikes, that's not so good, because, if we change our minds about the style of our headings or proper nouns, then we are well and truly stuck, from an editorial point of view, because we have to key in the Title Case versions!

So, we really want the actual content in proper Title Case - New York. OK. Then we can can apply the style.

Is there a way to create a more elegant version of uppercase and small caps combined? How can we do this for:

  1. Print and ebooks
  2. The Web

Let's check out a way with InDesign.

The first thing is we need a paragraph syle that gives us the small-caps. see Figure 1. And result is in figure 2.

How can we modify the style of the first character in each of the words? Now we need a character style that modifies the style. In this instance we just want to reduce the size of the capital letter. With some experimenting we get figure 3.

How can we apply this character style to each first letter?

GREP to the rescue

In the paragraph style we need add a GREP style. We are looking for the beginning of a word, the first uppercase letter. Here's the GREP:


This GREP style will then apply the character style to the first letter in the word. Figure 4.

The result is figure 5. We get all small-caps, although the first letters are (in reality, faux small-caps). Adjust the character style to suite.

What about the WEB?

We want beautiful typography in our web sites, and if we are tempted to use small-caps here, then we have to resort to a different solution.

With CSS we can use the pseudo selector: ::first-letter. That could have worked but no. The first-letter selector only targets the first letter in the block. We could get the letter N in New York, but not the the letter Y. Think again!

OK, I got it. We need to transform the letters into lowercase first and then, we can apply the font variant. Like this:

So here might be our CSS rule for the titles on a web page:

.titles {
text-transform: lowercase;
font-variant: small-caps;

We type in New York and apply the style rule and we get::

New York

This way, we do not need to re-type the text into lowercase.

But what about eBooks?

Well, now — InDesign does an OK job at exporting to ePub and we get some CSS wrapped up in the ePub package. It works with a span tag wrapping around the first character in each word. But, you know you can edit the CSS, and if you wanted to go to the trouble, you could put the CSS in that comes from the web method described above.

Posted on 12 Dec around 12pm


Commenting is not available in this channel entry.