There are several ways to implement small caps (small capitals) or fake small caps on web pages, all with limitations and problems. The methods are summarized in the following table. The sample text in the second column may or may not look appropriate, depending on support to the method in your browser. The sample text should contain uppercase “H”, small-caps “ello”, and a lowercase “o” for comparison.
| Method | Sample | Code example |
|---|---|---|
| OpenType settings | Helloo |
|
| Simple CSS | Helloo | |
| Small caps font | Helloo | |
| Small caps characters | Hᴇʟʟᴏo | |
| Reduced-size uppercase | HELLOo |
The code samples intentionally use the font
element, because this is really about fonts. Those who favor
“semantic” markup can use span elements
instead; they are semantically empty.
Small caps are glyphs for lowercase letters with shapes similar to uppercase letters but with height equal to or little larger than the x-height of the font. The x-height is the height of lowercase glyphs without ascenders or descenders, such as those for x, a, and s. Small caps are used for various stylistic purposes.
Fake small caps, also known as synthetic small caps, are uppercase letters in reduced font size.
True small caps have been designed by a typographer to fit the characteristics of the font. In particular, their stroke widths are similar to those in other glyphs. Fake small caps have thinner strokes, since font size reduction affects stroke width, too. The effect varies from minor to considerable, depending on the font, on the size, and on the rendering mechanism.
True small caps may be available in three ways:
The OpenType specification allows a font to contain both normal and small-caps glyphs for lowercase letters in a manner that lets programs select between them. To make use of this in an HTML document, you need
font-feature-settings
property, at
least when a suitable vendor-prefixed version of it is included;
this means e.g.
any reasonably new version of Firefox or Chrome or version 10 or newer of IE
In the table at the start of this page, short CSS code was presented. In practice, to maximize browser coverage, you should use code like the following:
.smcp {
-moz-font-feature-settings: 'smcp';
-webkit-font-feature-settings: 'smcp';
-o-font-feature-settings: 'smcp';
font-feature-settings: 'smcp';
}You would then of course use code like
<font class=smcp>Hello</font>. The style affects
lowercase letters only; uppercase letters are unaffected.
If you use the value 'c2sc' (caps to small caps)
instead of 'smcp', capital letters will be rendered
using small caps. This can be useful for uppercase initialisms, like
WWW, when you wish to show them in small caps if possible.
Among fonts commonly available in modern Windows systems, the following have small-caps glyphs in OpenType format: Calibri, Cambria, Candara, Constantia, Corbel. The following example uses, under the given conditions, small caps of Cambria for the proper name
Jukka Korpela has...
Some fonts that can be used as downloadable fonts (web fonts)
via @font-face contain small caps
in OpenType format. However, the common techniques for using them,
like the Google Web Fonts service and the FontSquirrel
@font-face creator, seem to remove information
needed for using small caps. You may thus need to do extra work
if you want to use their small caps. It can be easier to
use a small-caps font as explained later in this document.
The setting font-variant: small-caps has been
in CSS from the beginning.
Despite the way this has been defined in CSS specifications, it has not produced small capitals in the typographic sense. Instead, it has produced capital letters in reduced size. This means that a typographer looks at them with disgust, and they really don’t look good, even though most people cannot say exactly what is wrong with them. One of the main flaws is that reducing size means reducing stroke width, so the fake small caps look thinner and odd.
Another problem is that the amount of font size reduction varies by browser. Chrome uses uppercase letters strongly reduced, about down to the x-height of the font, making stroke width seriously too small. IE uses uppercase letters reduced just a little, so that the stroke width looks almost OK, but the size contrast with uppercase letters is too small—making the fake small-caps look like uppercase letters accidentally set in a font size a point or two smaller than they should.
However, Firefox, at least from version 32,
implements font-variant: small-caps
using real small caps when available, i.e. when the font used
is an OpenType font with small-caps glyphs. We can expect other
browsers to move into this direction, but it is difficult to say
how fast.
The following shows a name using this attempt at getting small caps. As explained, the rendering will vary: in most situations, fake small caps appear.
Jukka Korpela has...
The most cross-browser way to use (real) small caps in HTML is to use downloadable fonts, such as Google Fonts, selecting a pair of a normal font and a small-caps font of the same design, presenting them technically as two font families. The following code uses the Google Font Alegreya Sans and its small-caps variant Alegreya Sans SC.
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC'
rel='stylesheet'>
<style>
* { font-family: Alegreya Sans }
.sc { font-family: Alegreya Sans SC }
</style>
<font class=sc>Jukka Korpela</font> has...Result:
Jukka Korpela has...
Small-caps characters are included in Unicode due to their use phonetic notations, especially in the International Phonetic Alphabet. The Unicode Standard, ch. 7, says: “Typographic Variants. IPA includes typographic variants of certain Latin and Greek letters that would ordinarily be considered variations of font style rather than of character identity, such as small capital letterforms.” So this is a matter of specifying small caps at the character level. Every glyph for such a character is expected to be a small-caps glyph.
For example, the character
LATIN LETTER SMALL CAPITAL A
U+1D00 is a small-caps “a“, and it can be written in HTML
as ᴀ. For more information on techniques
and potential problems, see my
Guide to using special characters in HTML.
Small-caps characters are included in surprisingly many fonts; see font support information at Fileformat.info. Note that for a font that contains small-caps glyphs for lowercase letters, they are not necessarily identical with glyphs of corresponding small-caps characters! In some fonts, the latter are actually better.
A major drawback is that small-caps characters exist only for basic Latin letters a–z and a few basic letters in some other alphabets, not for any letters with diacritics like é and ü, and even q and x are missing, because small-caps q and small-caps x are not used in phonetic notations.
There are various tools, like a Smallcaps generator, that may help you write small-caps characters.
When using suitable tools, you can normally include small-caps letters as such as characters. When this is not possible and you use character references, the code looks rather messy, as the following example illustrates.
Jᴜᴋᴋᴀ
Kᴏʀᴘᴇʟᴀ
has...The result is:
Jᴜᴋᴋᴀ Kᴏʀᴘᴇʟᴀ has...
If you want to use something that resembles small caps but cannot or do not want to use techniques for getting real small caps, then the best approach is usually to use uppercase letters and reduce their size. Doing so, you can select the reduction factor, so that the results will be reasonably consistent across browsers. The following illustrates the approach:
<style>
small { font-size: 75%; }
</style>
<p>J<small>UKKA</small> K<small>ORPELA</small> has...<p>The following shows the results when using the values
70%,
75%, and
80%. This demonstrates how you need to try to
make some compromise: if you reduce the size enough to make fake small caps
to be of roughly correct size, the strokes tend to get very thin.
The optimal factor depends on your judgment and on the font,
but it is probably typically around
75%.
JUKKA KORPELA has...
JUKKA KORPELA has...
JUKKA KORPELA has...