Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Superhero Superfamilies

on Tuesday 24th of September 2013

Just like The Incredibles, Ninja Turtles and Mario & Luigi, Dan Eden presents 6 typeface families whose members unite to make a formidable impact.

With the heap of fonts available on the web and the overwhelming amount of choice at our fingertips, it’s easy to forget that, sometimes, one font family is all we need. After all, using a single, multipurpose family is the most foolproof way to pair type, as the faces are sure to complement each other, even when used for contrast. That’s pretty handy, for newcomers to typography as well as old pros.

What is a superfamily?

Superfamilies are typically defined as being super-sized. They’re a single family of typefaces that share the same basic look, feel, and personality but belong to different classes and have different finishing details. The most basic family comprises a Serif and a Sans Serif typeface, while a superfamily might also include Condensed, Script, Slab, Text, Display, Rounded (and many more) versions. But some superfamilies are more super than others. So for this month’s post, I wanted to find you some families that aren’t just supersized, but also have superdepth and superflexibility – big font families with lots of weights and styles plus the versatility to perform as well at display sizes as they do set small. 

My live demo, featuring each superfamily

To help choose the fonts, I designed an example blog article with the following seven elements: a title, date, introductory paragraph, regular paragraphs, pull quote, and image caption. Plenty of ground covered there, so let’s dig in.

Freight

The Freight family offers a pretty staggering number of variants. Freight Big, Display, Text, Sans, and Micro give you all the sizes you could ever need. On the screen, Freight Big is a little thin at anything smaller than about 100px, so Freight Display can be used for the title. Freight Text makes a nice paragraph font, with sharp italics that really bring some emphasis. A thin Freight Sans works nicely for our pull quote, and Freight Micro was designed specifically for captions and small text.


Freight Display for headines, paired with Freight Text, which you can try now in Typecast.

Proxima Nova

Proxima Nova’s sheer number of weights and variants makes it an incredibly diverse family, with a grand total of 130 weights and styles across the family (14 weights in Normal, Condensed, and Extra Condensed, each with an alternate character set). 130 options gives us plenty to play with, wouldn’t you say? Proxima Nova Extra Condensed works nicely for large titles and headings, and Proxima Nova Medium for our main content looks great even at 16px. As we creep down to caption sizes, we can bump up to semibold to make our small text a little more readable.

Museo

I’ve always had a bit of a disliking for Museo, but I can’t deny how diverse it is. With five weights in Serif, Slab, Sans, and Rounded, there are plenty of options for setting a complete hierarchy. Museo Serif has sturdy serifs, great for use at a large size as a title but still readable enough to manage the task of body copy, too. A semibold Museo Sans reads well in captions, and the family’s variants are great for experimenting with – try mixing and matching the Serif, Slab, and Sans typefaces for different elements.

PT Sans/Serif

ParaType released a set of self-titled fonts to “give possibility to the peoples of Russia to read and write on their native languages.” It seems they not only achieved this, but made a beautiful job of it, too. Although it doesn’t offer a huge number of variants (only PT Sans, Sans Caption, Sans Narrow, Serif, and Serif Caption with two weights each), the fonts are designed well enough to look great even at display sizes. Soft italics and a tall x-height make PT Serif a hyper-readable body font, and a generous x-height in PT Sans makes it ideal for caption sizes.

Abril

This family of three (Abril Display, Fatface, and Text) offers up to five weights in each. Abril Display’s Didot-like hairline strokes are gorgeous in titles.

Abril Fatface has a big, bold personality, great for striking pull quotes, and Abril Text’s semibold weight helps beef up the font for use at small sizes.

Something else worth noting is Abril’s discretionary ligatures, like those seen on “ct” and “st” – while difficult to make out at small sizes, they look great in a mildly inflated intro paragraph. You can see this below, where I’ve set Abril Text at 96px, 20px, and 14px. See how we lose the beauty of the ligature stroke detail at 14px?

Abril Text with ligatures at 96px, 20px and 14px

Calluna

Finally, we have a family not too dissimilar from the Freight family: Calluna. Available in up to 10 weights and styles in serif and sans serif, Calluna may be my personal favourite out of this selection. Okay, so it’s not strictly a superfamily, but the depth of weights available with each face gives us the flexibility we’re looking for. Its light Serif weight is perfect for titles, with a balanced mix of delicate strokes and thick stems. Slightly thicker italics add subtle emphasis in body text, and Calluna Sans features an equally impressive diversity, from light strokes that are perfect for big pull quotes to semibold weights for smaller sizes. Both Calluna Serif and Sans share very similar reading rhythms, complementing each other perfectly.

See? Sometimes, just one family is enough. A wide number of variants and weights in one family can provide plenty of options for all your type system needs, and as demonstrated by ParaType’s self-titled fonts, you don’t even need a huge number of weights to get versatility. For more type powerhouses, try Fontdeck’s list of 85 superfamilies and Typekit’s 16 recommendations of typefaces that work well as paragraphs and headings. Happy typesetting!

For more web font recommendations, check out our Type on Screen collection. And we’d like to extend a big thank you to our guest author Dan Eden for writing today’s post. Guest authors are paid for their contribution, and all opinions are their own.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus

Upcoming Seminar

Featuring Jordan Moore

Featuring Jordan Moore

Mobile-first type & layout

Come see what you can do to make mobile look magnificent and load like lightning.

Find out more

Register your place