Condensed fonts: The good, the bad, the ugly

Condensed fonts can be tricky use and should be avoided for blocks of type, although they can work well when used sparingly.

No one likes that too tight feeling of riding the metro or train with too many people at once. But that’s the same feeling you get when using a family of condensed or ultra-thin fonts on your website. (And that’s why you don’t see them all that commonly used.)

Condensed variations of most fonts should be used sparingly or avoided altogether in most design projects with blocks of text. Although there are a wide-range of excuses to use them there is a simple reason why you should not: Condensed fonts can be very hard to read.

What is a condensed font?

The letters of a condensed font have set-widths that are narrower than in the standard typeface from the same family. The term condensed font can also apply to fonts where each variation is much taller than it is wide. Often such fonts may have the words “condensed,” “narrow” or “compressed” in their names, although some fonts use numbers to represent character widths.

Some common condensed fonts include Bernard Condensed, Franklin Gothic Demi Condensed, Gill Sans Condensed and Liberation Sans Narrow.

Why would you use condensed fonts?

The primary reason many people choose a condensed font is to save space. Depending on the typeface, up to twice as much copy can be put in the same space using a narrower typeface.

Designers can also use a larger point size when working with condensed fonts but the larger size can be misleading. Letters will be taller but the difference between 10 and 12 points for a condensed font does not dramatically increase readability.

Condensed fonts also have a look and style of their own. Some narrower fonts may have a more modern or funky feel to them and might serve as a complementary design element. Used sparingly and for large type, such as a header, condensed fonts can be quite effective design tools.

Why condensed fonts should be avoided

As a general rule, condensed fonts do not lend themselves to readability. Back to that packed train, letters and line spacing are tight thus making blocks of text intimidating to look at and even harder to comprehend. Sites that have large blocks of text and rely on text blocks should not use a condensed font as the primary typeface because readability will be a concern.

Narrow fonts can also be hard to pair with other typefaces if not done carefully. A super-thin font next to a wide typeface can be jarring to read and can make a thin font appear even more condensed than it is.

Also think about the color scheme of your site. Many sites with scrolling text use black text on a white (or light colored) background. The contrast between dark and light can be difficult to read when working with closely spaced letters and thin line strokes. The contrast can even cause letters to blur when reading blocks of text or scrolling through multiple lines.

Condensed fonts also cause problems when it comes to color, especially in condensed fonts with thin strokes. Colors can take on a hue of their own and bleed from surrounding colors, appearing different in the type than in other elements on the page, such as colored boxes or images. The resulting effect can be jarring or force you to diverge from your overall color palette.

A few places where condensed fonts work

Although condensed fonts can be difficult to use effectively, they can work for certain elements of design.

A condensed font can add a lot of pop as a banner or when used with a few words in headers. This site and Designing Monsters featured above, for example, use a condensed typeface for headlines and headers. Note that few words are used in the condensed typeface and it is not used for the main copy on either site.

A narrow typeface also can make a great art element. When used less as a tool for reading and more for emphasis, narrow letters can provide impact and an element of sophistication. You also don’t need to worry about matching font families when working with words as art. Use the condensed typeface to create an image and choose typefaces for your site that stand on their own.

Finally, condensed fonts can be useful in tables and charts. Typically both use few words in each block of information. Using a condensed font may allow you to optimize space and keep your table or chart neat and organized. Keep in mind this works best for items with only a few words and you may consider using a larger point size to increase readability.

Alternatives to condensed fonts

Sometimes all you need to get away from a condensed font is a new way of looking at other typefaces.

If space is the reason you have turned to a condensed font, consider these alternatives: Typefaces with short descenders and ascenders or oval, rather than round, characters. Fonts with short g’s and h’s ill allow more lines of text in the same vertical space, keeping all other type specifications the same. Characters with a more ovular shape tend to be less wide than their circular counterparts and will allow for more letters per line.

Also think about letters with thinner strokes if you are looking for a lighter typeface. If you are using a condensed font with a heavy feel, such as a slab, try a typeface with a bolder, thicker stroke.

A few fonts to consider: Serifs Georgia, ITC Fenice Regular or Weidemann Book and sans serifs Trebuchet, Myriad, Helvetica or Berlin Sans.

Image Credits:
Abstract Vector Image By

Tagged with:

Carrie Cousins

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 6

Comments are closed.
  1. Great article Carrie, I’m completely clueless with type, we’ll maybe not completely, but I do need serious help and your article seems to be the ticket on my way to recovery! Thank you for posting this.

  2. On print works, specially on press, condensed fonts are “space savings”, that’s why they are used mostly in this context. On screen display is different, because “space” is a distinct concept. So I agree about the majority of your statements, and I’m glad somebody, at last, dare to speak about an important part of a typeface.
    On-screen designers are obsessed by “bold”, “italic”, but are mostly cluless when you come to “weight”. I think it will be, in my humble opinion, a good start for a future post.
    Thanks for this one. Take care.

  3. also nice topic for web typography srticle could be: columns and justification
    1 – why wide columns are not the best idea
    2 – forced justification (god dammed there is no hyphenation can’t you see people how messy it looks…)

  4. good article; just wanted to point out that you probably meant “elliptical” (like an ellipse) rather than “ovular” (like an egg) 🙂