Tips for Creating Big Stature With Small Caps

When 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?

0 shares
  • http://www.parkandcube.com Shini

    This is so useful, thank you. I feel that typography is one thing that really needs attention in the web nowadays.

  • http://www.design3edge.com/ sada

    Great Tips!!!!

  • http://faviconservice.com FaviconService

    “Woody Allen” typography is wrong in the end of the post. “W” & “A” is much bolder from how they should be.

  • as

    Nice article.

    But does the sentence “Some fonts—including Garamond, Didot, Gill Sans, Palatino, Trajan and Minion—contain typefaces designed specifically for small caps” have the terms “font” and “typeface” reversed?

    • Gremillion

      I meant to imply an entire collection of faces. It should have read “typefaces” or “font families.”

  • http://lekevicius.com Jonas

    Fantastic post — more like this, please!

  • http://www.2dforever.com Tom

    A nice description of Small caps! I prefer to play it safe though – when using small caps, only use typefaces that have the extra small-cap characters pre-made!

  • http://www.jordanwalker.net Jordan Walker

    Excellent tips for diversifying your design’s using fonts.

  • http://www.creativeindividual.co.uk Laura

    Lovely read. Its always great to retouch on some typographic skills. Thanks.

  • http://www.webdevtuts.net Marcell Purham | Webdevtuts

    Great post. Typography is king!

  • http://knowledgecity.com Jae Xavier

    >>How do you use small caps in your designs

    I rarely use small caps

    >>and where do they work best?

    I use them in business cards, specifically legal professions

    and…

    specific business types, depending on company culture

  • http://bonfx.com Douglas Bonneville

    Killer post!

    I like your idea of making the small letters as big as possible, if you are using a normal sized cap in the word or phrase. But, if you are using the the small caps in the context of a paragraph with normal-sized text, that won’t work, because you want the x-heights of the small caps and the x-heights of the normal text to match visually. In that case, you are kind of stuck if your typeface doesn’t have a medium weight to switch to.

    I think it’s best not to use small caps if you don’t have the right size font to create the right weight between the caps and the surrounding normal text, if any.

    I’m working on a resource book for font combinations with lots of type examples and I ended up removing many of the small cap examples on the sans font pages. The worst offender I came across was Futura! It started me on the path of getting rid of all the other weak small cap examples I was creating from a base template.

    There is a commercial on TV everyday I see at lunch. It plays on both CNN and FoxNews in the cafeteria. The company is called Tax Masters, and it looks like they just took Times Roman Bold and small-capped the words after the first letter:

    http://www.txmstr.com/

    They even added a drop shadow and a bevel and a swoosh to “help”. I’m sure they are great at what they do, but they sure could use a little proper small cap love.

    Thanks for such a great post.

  • http://www.logoblog.org Marie Christine

    Hello … This collection of tips are truly amazing , all of them are very useful .. Keep up the good work … !

  • http://www.crearedesign.co.uk/ Web Design Jarkko

    Great article. Matching those weights can be a pain if the font doesn’t bend the way you want. But when made correctly, small caps looks great. I’ve been quite hesitant using them myself unless the font had the small caps version included.

    Some of the examples in word prioritizing section (Choosing words) look a bit odd to me. I understand the idea behind it and it’s all correct language because all the letters are capitalized, but especially example E doesn’t look right to me with it’s small ‘department’ and ‘health’.

  • Rawdon

    The article addresses “When a web page demands respect from readers, few type treatments give it dignity like ‘small capitals’ ” yet examples deal with non-web friendly fonts. Why not address Arial, Times, Helvetica etc.? That would make more relevant reading for web designers concerned with content copy rather that image content.

    • http://benthinkin.net Ben Gremillion

      That’s a good point. I chose the typefaces in these examples for several reasons. First, the small caps technique was easier to present accurately with images. In spite of CSS3’s support for SC and font services like Typekit, I could only achieve the precision required in a graphic.

      Also, while I did mention the web (and this is a web blog), I decided the technique was more important than the technology. If someone wants to make it happen, he or she can apply these principles anywhere.

      Finally, I couldn’t get Arial and Helvetica to look decent in HTML/CSS. Arial regular/bold doesn’t have enough finesse and not everyone has the appropriate weights of Helvetica.

      Having said that, if you can make it work without images, please post a link. I’d like to see your technique.

      • Rawdon

        Not a chance Ben. I leave the clever stuff to guys like you. Just wanted to draw your attention to said point. To clarify, your article is most helpful and appreciated by all – my observations should not, in any way, be seen as to detract from that.

  • http://benthinkin.net Ben Gremillion

    One point I didn’t emphasize was knowing when to not use small caps. I agree with your idea of small caps not working in a paragraph for two reasons. First, as you said, body copy-sized capitals are too small to display well. Second, imho, SC is overkill for whole paragraphs. The more it’s used, the less special it is.

    I haven’t tried Futura. Let me check… Woah, that ain’t right.

  • http://www.pscyhed.be/wordpress Darkened Soul

    shows I still have to read up on typography, thanks for the post

  • http://fullforcewebdesign.com Froy

    Mastering typography is a challenge there is so much to learn, but as a professional designer both for print and on line knowing how to use typography well is a must.

    Great article…

  • http://www.las-vegas-printing.com Las Vegas Printing Companies

    Great in-depth review on typography. It seems a lot of people struggle with proper weights and rhythm, which can really throw-off an otherwise nicely designed piece. I agree with Froy!

  • http://www.khwebdesign.net Kent

    Those are definitely some good looking examples.

  • http://www.pixelrockit.com Bartosz Oczujda

    Great post, but I feel there is something missing.

    You didn’t mention that some fonts have small caps characters pre-made. And that some typefaces are intended to be used exclusively as small caps (like Trajan).

  • http://www.designtank.ws ChrisR

    Personally, I’ve never liked using small caps in title case (meaning, initial letters are larger small caps); to me, it looks really horse-y to have initial caps of small caps words.

  • http://www.berthold-barth.de Berthold

    Thank you for these insights.

    I’d just like to disagree with your initial statement about small caps guaranteeing a classy look. Indeed, improper use of small caps is one of the fastest ways down the drain I have ever witnessed. I have an example right here, which looks jarring with its uneven weight, close tracking and excessive leading. Makes me want to grind my teeth just by looking at it.

    Obey these rules people, I beg you!