Blog - Page 2 of 2 - Design for Hackers

Design for Hackers: Learn Web Design

A book that helps developers & programmers learn web design. It’s a best-seller (#18 on all of Amazon). by @kadavy

Small Caps: Use “Real” Small Caps (instead of “Fake” Small Caps)

September 04, 2014

Small caps can be a useful tool for that extra bit of typographic expression, but if you don’t use them right, your plan will backfire. You’ll make your typography look sloppy, and unprofessional.

“Fake” small caps can be seen everywhere these days. Many desktop publishing programs have “small caps” buttons that simply scale the capital letters down to make small caps.

But isn’t that what small caps are? NO! I explain in this video, or just keep reading:

“Fake” small caps vs. “Real” small caps

“Real” small caps are drawn separately from the standard capital letters in a font. The strokes of the letters are made fatter, to account for the fact that they will look too thin if the letters are just scaled down.

Notice the difference between “real” and “fake” small caps in the image below.

If you don’t learn the difference, you’ll likely be using fake small caps for the rest of your life, and design pros will gather in dark chambers to privately poke fun at your work.

How to avoid using “fake” small caps

One way to avoid using fake small caps is to just not use small caps! You could always just use all-caps instead. Nobody will ever say “hey, did you notice that weirdo never uses small caps?” You’d be fine, and you could express yourself typographically numerous other ways.

There are two different ways that real small caps can be used: you can use a special small caps version of your font, or you can access custom small caps through OpenType.

If there’s a dedicated small caps version of your font, can see this in your font picker. Here’s Adobe Garamond in InDesign.

Sometimes you can choose a small caps font from a font picker.

Sometimes you can choose a small caps font from a font picker.

However, this isn’t a foolproof way to ensure you have real small caps available. Some OpenType fonts have small caps alternates built-in. When you select “small caps” from the Character Palette in InDesign, for example, you’ll get real small caps if you’re using one of these kinds of OpenType fonts. If there isn’t a dedicated alternate small caps version, you’ll get fake small caps!

Some OpenType fonts have small caps built-in.

Some OpenType fonts have small caps built-in.

It’s very confusing, and kind of scary. It seems there’s no way to guarantee you’re using real small caps.

The best method is to just learn to spot the difference between real and fake small caps. It may seem tricky at first, but once you figure it out, you’ll never miss it.

Don’t be fooled! Using “real” small caps in CSS

If you use CSS’s font-variant: small-caps property you might think you’re getting real small caps – especially if there is a “real” version of small caps available for the font you’re using. Don’t be fooled! With the state of browsers today, font-variant: small-caps still gets you fake small caps.

The trick is to make a small caps version available using CSS’s @font-face rule. Then, you can use it like you would any font.

@font-face {
font-family: “Adobe Garamond SC”;
src: local(“Adobe Garamond SC”);

Here it is being used as an abbreviation.

p abbr {
font-family: “Adobe Garamond SC”;
text-transform: lowercase;

If you’re using an OpenType font, and know there’s a small caps variation of your font available, you can try using CSS’s “font-feature-settings” property, which has pretty decent browser support, to summon those small caps.

Choose your small caps poison

Now you know the difference between real and fake small caps, so do with that knowledge what you see fit. Stop using small caps altogether, learn to spot difference (and act accordingly), or just go on using fake small caps (while leading a life of eternal typographic alienation and suffering).

Justify text with HTML/CSS? Don’t do it!

August 14, 2014

It’s 3 in the morning, and you’re putting the final touches on your layout. It looks clean, with everything in its place – lined up on the grid. You squint from afar. “The edges of these type blocks look uneven,” you say to yourself. You hop into Sublime, and type text-align: justify. keep on reading »

My TEDx Talk: The New Literacy of Design

May 14, 2013

I wrote Design for Hackers to teach hackers about design. But that wasn’t the hokey pokey of it.

That wasn’t what it was “all about.” keep on reading »

Designing with White Space: Why 1+1=3

September 01, 2011

One of the most often overlooked factors of design – by beginning and even professional designers – is that of the delicate use of white space. By really considering the way that white space works, you can communicate more elegantly, and create design that has a more “clean” look. By really considering the way white space works, you’ll be less likely to use extraneous ornamentation such as rule lines, and you’ll be less likely to change fonts and colors just to differentiate pieces of information in your design.

keep on reading »

Why You Hate Comic Sans

January 25, 2011

Everyone loves to hate Comic Sans. The child-like handwriting font is so infamous, there is a movement to try to ban it. Mention its name to the common layman (aside from a preschool teacher), and you will likely get a chuckle, mention it to a trained designer, and you’ll get a look of disgust. In my free design course, I teach you how to battle font anxiety, but I can tell you right now Comic Sans is usually not a good choice. What exactly makes Comic Sans so horrible?

keep on reading »

Why Monet Never Used Black, & Why You Shouldn’t Either

September 28, 2010

Monet’s paintings evoke a sense of energy and life, they leap off the canvas with color and contrast, but Monet somehow managed to avoid using the color black for nearly his entire painting career. By avoiding black in your own designs, you can replicate some of this dynamism. keep on reading »

Why You Don’t Use Garamond on The Web

August 12, 2010

Amongst designers – especially print designers – Garamond is considered one of the best fonts in existence. It’s timeless, and very readable. But, because of the limitations of current display technologies, it’s not a good font to use in web copy – even with the advent of font embedding methodologies such as TypeKit and Google Font API. keep on reading »

« Newer Posts

5 Essential Type Tips

What you must know to design like a pro

I reject this free offer