Unicase Webfont

Unicase fonts are a bit special; they provide uppercase glyphs for lowercase characters, which means lowercase glyphs are rendered with glyphs which look just like uppercase glyphs. One should be careful using these fonts, but they have their place. If you want to create the same effect with any other font then there is the CSS property-value pair font-variant-caps: small-caps to the rescue 1.


.small-caps {
  font-variant-caps: small-caps;
}

This font-variant-caps: small-caps basically makes all lowercase characters appear in a smaller uppercase version, unlike text-transform: uppercase which scales the height of the glyphs up. It has to be mentioned though that this likely will only approach the look of a font with true small caps though. Because uppercase characters in a regular font often are a tiny bit thinner, they may look fragile when scaled down to small caps size compared with lowercase characters of the same size. One way to fight this is to choose a medium weight font to begin with; more on this later. Adding some letter-spacing also makes them look better in my eyes.

small-caps
This keyword forces the use of small capitals letters for lower case characters. It corresponds to the OpenType value smcp; if the font doesn't support them, it synthesizes the glyphs.

Note that following instructions on sub-setting webfonts are an additional option, not required at all to create these small-caps: one can try using just system fonts as well with font-variant-caps: small-caps applied.

It is possible to generate your own light-weight unicase webfont with the CSS property-value pair font-variant-caps: small-caps, combined with the sub-setting technique when generating a web-font.

Download a free font from FontSquirrel, in my experience medium weights work best, because scaled down uppercase characters tend to look too fragile. Go to the "generator"-tab, hit "upload fonts", choose the just downloaded .ttf font and check the option "expert".

  • Font-formats: only woff and woff2
  • Truetype Hinting: Keep Existing
  • Subsetting: Custom Subsetting
  • Character Type:
    • Uppercase
    • Numbers
    • Punctuation
  • CSS: when wanting to embed the font as a Base64 string in your stylesheet, check: Base64 Encode
  • Advanced Options:
    • Font Name Suffix: make field empty (no need for -webfont suffix)

Leave the rest of the options as default and check the Agreement checkbox.

Now you can download your own custom unicase font, only containing the glyphs for uppercase, numbers and punctuation, which also makes it very light-weight. Conveniently FontSquirrel generates additional CSS with the @fontface rule 2 applied.

Never use capital letters to accentuate words in running copy. They stick out far too much spoiling the look of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals. Erik Spiekermann

Examples


Ninety <span class="small-caps">JPG</span> files on <span class="small-caps">CD-ROM</span>.
<span class="small-caps">HTML</span>, <span class="small-caps">CSS</span> and javaScript.


@supports (font-variant-caps:  small-caps) {
  .small-caps {
    text-transform: lowercase;
    font-variant-caps: small-caps;
  }
}

Ninety JPG files on CD-ROM.

HTML, CSS and javaScript.

See the Pen RVwmpd by Bram de Haan (@atelierbram) on CodePen.

Notes

  1. There is font-variant: small-caps too: this is the shorthand for all ‘font-variant’ subproperties. Like other shorthands, using ‘font-variant’ resets unspecified ‘font-variant’ subproperties to their initial values.
  2. This will also solve any syntax issues with the @fontface rule, for it comes with a demo HTML - and CSS file with those rules applied. You can take those rules, maybe adept the url paths, and paste them into your CSS.

Resources

This article was also published on Codepen