Enabling small capitals

Question

On MS Word we have a text feature called "Small Capitals". It turns all letters uppercase, but the lowercase letters turn smaller then uppercased. I need to know if it is possible in CSS.

Example:

Original: Hello World
Small Capitals: HELLO WORLD

Notes: SO Markdown does not support CSS font-size style in tags nether small, so I show as a hack. Well, the strong letters is bigger than normal letter in small capitals.

Is it possible in CSS? How I can do that?

Answer 1

It’s called “small capitals” or “small caps” in English. In typography, small capitals are separately designed (by font author) versions of letters. They have the shapes of capital letters, but their height is usually just a litter larger than the x-height (the height of the lowercase letter “x”) of the font. They may be implemented in a small caps font, but more often, they are glyph variants inside font.

In MS Word up to and including Word 2007, as well as in CSS implementations for font-variant: small-caps, the “small capitals” are really just reduced-size capital letters. (Word 2010 gives access to OpenType features and real small caps.) This typically means that their stroke widths are too small, and to avoid this effect from getting all too bad, the font size reduction is rather modest, so the fake “small caps” are not that much smaller than normal capitals.

For such reasons, “small caps” are mostly best avoided on web pages.

However, there is ongoing work in giving access to OpenType features in CSS. Currently, support exists in the form of browser-prefixed versions of the font-feature-settings property as proposed in CSS3 Fonts. Example:

<style>
body { 
  font-family: Calibri, sans-serif;
}
.sc { 
  -moz-font-feature-settings: 'smcp';
  -webkit-font-feature-settings: 'smcp';
  -ms-font-feature-settings: 'smcp';
  font-feature-settings: 'smcp';
}
</style>
<div class=sc>Hello world</div>
<div><span style="font-variant: small-caps">Hello world</span>
  (fake small caps)</div>

This works on supporting browsers (Chrome, Firefox, IE 10), provided that the font has small capitals (e.g., Calibri, Cambria, Candara, Constantia, Corbel, Palatino Linotype).