Small caps have been a source of concern for ebook designers for a long time. They are an essential part of the typographical lexicon, but due to system constraints, small caps may fail to display properly—so we have to work a little harder to display the font variation consistently.
Usually when we display small caps in a web browser, we can use a simple declaration in the style sheet:
font-variant:small-caps. This will automatically be interpreted by the system to mean “Use the small caps version of the font for this section of text.” This mirrors what is done in print, when the typographer selects a special font variation (rather than just a smaller size of the font) to use for small caps.
Of course, ereaders are built with a limited number of fonts. If you or the reader happen to choose a font that does not have a small caps version, the ereader will display lower case letters. This isn’t too much of a problem if you’re using them for time (am/pm vs. am/pm) but if you’re using them for centuries (bc/ad vs. bc/ad) or acronyms (aids vs. aids) the lack of small caps causes grammar and clarity issues. In ebook production, we have several ways to address this:
Option 1: Embed fonts with small caps
We can embed fonts into the reading system to ensure that there is a small caps variant available. To ensure this works even for systems that may not display the
font-variant:small-caps declaration, adding an explicit call to the small caps font (
font-family: ‘Small Caps Font’) will indicate the correct version to be used.
This will work well for the majority of newer reading systems, but the minute someone tries to crack open the book on a device that doesn’t support embedded fonts or any system (coughcoughNookcoughcough) or that overrides publisher CSS by default, we start reading about the “global aids epidemic of 1985 ad.” No matter who you are, you have to admit that having an overabundance of helpful assistants (in a commercial?) during the 1980s is far less frightening than the wide spread outbreak of Auto Immune Deficiency Syndrome in 1985 ad and greatly alters the intention of the author.
The next two solutions will work despite the inability to embed fonts or use the
Option 2: Shrink regular caps for smallcaps
This solution may ease the mind of grammarians, but will send typographers to the loony bin: use faux small caps. Set all of the lowercase letters in the small-caps section to a smaller size so that the cap height is roughly equivalent to the x-height of the surrounding font selection. Convert these lowercase letters to uppercase while leaving the normally uppercase letters at the standard height. The result is normal caps for the capital letters and normal capitals shrunk to, for example, 70% of normal size for the lower case letters.
This can be troubling for editors and publishers who are used to seeing small caps in print because proper small caps are not just scaled-down versions of the font in question; they’re specially designed. Depending on the ereader, scaled-down regular capitals can appear too small, strangely kerned, or mismatched with the rest of the font. If a reading system ignores the publisher’s styles, the text will be rendered in all caps, which is (arguably) better than nothing—at least it gets the point across, if not as gracefully as smallcaps.
There’s a better way, though—you can have your cake (proper small caps) and eat it too (provide a fallback that at least gets the point across)!
Option 3: Use proper smallcaps with a fallback to all caps
From the testing that we have done, it appears that devices that ignore the
small-caps variant (Adobe Digital Editions, Sony Reader, and Nook to name a few) also ignore the
text-transform:lowercase declaration. But those that do display
small-caps (Kobo, KF8 devices [Kindle Fire, Paperwhite, etc], iBooks, Sigil, Calibre, Azardi) also display
lowercase declarations. You see where I’m going here, don’t you? For instances of small caps where using an all caps version would work (so not as initial paragraph styling), you can make the small caps section all caps, then use CSS to declare both
text-transform:lowercase. Then you have a graceful degradation to uppercase for older or stubborn devices (sorry ADE) and properly created small caps for the standards compliant (did I just accuse Adobe of non-compliance to standards? gasp).
You’re still left with the wonky hack of faux small caps for decorative purposes, and you’ll need to pay attention to small caps sections with uppercase letters in them (put them outside the small caps span), so it may be best to find another way to enhance decorative typographical sections of text, but I have hope that won’t last and that we are heading toward a standards compliant utopia just like we have with web browsers today. Wink.