Tips for Creating Big Stature With Small Caps

Wdd Logo.
July 06, 2010

using small capitals in typographyWhen a web page demands respect from readers, few type treatments give it dignity like “small capitals.”

This treatment makes all letters in a line of text uppercase, but retains hierarchy by making the initial letters of important words noticeably larger.

When used properly, small caps make things look stable and reliable. They can appear official or solemn; stately text is never rushed.

Small caps march to their own deliberate beat. Small caps almost guarantee that text won’t look cheap.

Like any technique, though, this one can be abused or used improperly. Read on for some tips on how to integrate the power of small caps in your designs...

Stroke Weight

Using small caps to set text isn’t as simple as it may sound. Large letters must both denote the importance of words and draw attention to the letters themselves. It’s a subtle problem, but if the rhythm breaks, then the reader gets distracted. The most common culprit is varying stroke weight: varying size creates inconsistent thickness in letters.

example of how making text smaller adds inconsistencies

Adobe Garamond, the font, comes in regular, semi-bold and bold weights. Although the first example above technically uses the same weight throughout, it appears to have different weights because of changes in text size. The solution is to use a semi-bold weight for all small letters. Thickening the strokes is a nod to consistency; unfortunately, it’s not a guaranteed solution.

example of how making text smaller adds inconsistencies

Myriad Pro comes in many variations. Its regular weight is too heavy for the large letters above, but its light version is too light. Working with both is possible, though:

combinations of regular and light myriad pro

Combining light and regular works for certain sizes. Because the small letters are almost half the height of the large letters, regular with regular (A) looks like a cheat, but light with regular (B) almost works. If varying weights isn’t an option, then the best solution is to make the small letters as large as possible. Slightly larger caps (C) look good at the same weight, and you can still distinguish the important initial letters. When the sizes are similar (D), mixing weights is unnecessary.

Matching weights is not a challenge overcome just by pushing buttons.

Choosing Typefaces

Certain kinds of typefaces work better than others for small caps. The degree of flow through a line of text varies with every typeface. For example:

demonstrating how serifs encourage text to flow horizontally

The straight bars and serifs in Garamond cooperate to maintain a horizontal flow. These built-in rules make the typeface ideal for steady, determined small caps—the words practically form straight lines.

example of gaps in a sans-serif font

Above, Futura’s geometry creates eye-snagging counters, so attention is drawn to each large letter. The words flow less because the larger small caps give us less of a horizontal line, but it still works.

scripts and small caps work as well as scripts and all caps, which is not at all

Script and handwriting typefaces rarely work with all caps or small caps. Calligraphy, formal scripts and handwriting are optimized for internal flow and rely on swoops rather than ruler-straight lines. If your goal is a serious voice and your technique small caps, then a handwritten typeface would work against that.

monospaced fonts do not make for good small caps

Monospaced typefaces, by definition, work best at even sizes. Setting Courier in small caps (as above) creates unnaturally weak small letters. That’s acceptable if the goal is to emphasize the large letters: they look almost like acronyms. Otherwise, uniform typefaces generally don’t look good in mixed sizes.

Some fonts—including Garamond, Didot, Gill Sans, Palatino, Trajan and Minion—contain typefaces designed specifically for small caps. Use them if they’re available; they’re better than the fake small caps generated by layout or illustration software.

Rhythm With Tracking

Rhythm is conveyed not by the letters themselves but by the space around them. Adding space between characters can emphasize their natural rhythm. Increased tracking—the spacing between characters in a range—can draw out a phrase by slowing its “pace.”

example of visual rhythm with tracking and kerning

The first line in the text above runs well with normal tracking. The words are easy to read—maybe too easy: readers have no reason to take notice. The second line sets the letters in staccato. Readers slow down. Dignity does not hurry.

Extra tracking should be used in moderation. How much is too much? Two rules of thumb dictate when tracking has gone too far. First, too much space turns words into isolated letters:

how different amounts of tracking affects small caps

These few examples show how different amounts of tracking affect a line of type. The ideal range is between 100% and 200%. When characters are too far apart, the line of text ceases to look like a single unit. When characters are set more than one character-width apart, people notice the letters more than the words—especially if the text has more tracking than leading.

The second sign that tracking has gone too far is that it overpowers the leading (the space between lines):

examples of leading and tracking together

The examples above show how lines of text are affected by leading. English is written in horizontal lines from left to right, so distinguishing between lines is more of an issue than distinguishing between words. When it comes to readability, leading trumps tracking.

Choosing Words

Which words should have larger initials? It depends on which, if any, are the most important.

variations on certain capitalized words

In A, all letters are the same size. So, all words are of equal importance.

In B, all letters have a large initial. So, all words are still of equal importance.

In C, proper nouns and titles are enlarged. Short verbs (such as “is,” “are” and “be”) and conjunctions (such as “or,” “and,” “not” and “but”) are usually left small.

By recognizing that large letters designate importance, we can help readers prioritize the words.

more variations on certain capitalized words

In D, the chairman is less important than the department.

In E, human services is more important than health.

In the case of F, where only the first word has a larger initial, we have some ambiguity: the chairman might be more important, or the initial might be larger just because it belongs to the first word.

In general, the fewer the occurrences of large initials, the more important those words seem. When every word has a large initial—as in line B—none stand out. When a few words have large initials—as in line E—readers assume it’s for a reason (even if they don’t know what it is).

Small caps are universally recognized as carrying a serious tone:

life is full of Misery, Loneliness and Suffering, and it’s all over much too soon. Woody Allen

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance writer and web designer who solves communication problems with better design.

How do you use small caps in your designs and where do they work best?

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…