Typography is the art or technique of arranging type. It’s a broad medium, covering areas such as typeface selection, line length, line spacing, kerning, tracking, and of course wider design features such as color, lighting etc…

Typography is a growing phenomenon amongst graphic designers, many of whom have gone beyond the basic placement of lettering, and turned typography pieces into their own works of art. Often typography designs feature elements of photo manipulation, light effects and even 3D elements. Today we bring you a collection of highly inspiring typography designs, showing just how far the medium can be pushed. These pieces are all works of art in their own right, and we encourage you to go and check out each artist’s portfolio.

The Type

Heartbreak
Heartbreak is a clever concept, whereby the word ‘heart’ is clearly visible, whilst the ‘break’ is implied through a graphical means. The text shatter effect is the basis for this complex, detailed typographic design, and the shattering shards help add great depth to the piece as they appear to be firing out towards the viewer. The colors have been carefully selected and the transitions between blue hues and reds is smooth and attractive.

Desire
A simple, yet effective typographic design. This type appears to have been handdrawn and then colored in Photoshop. The calligraphic nature of the letters gives the text an archaic feel, whilst the painted effect used to color the letters adds a nice touch of creativity. A subtle highlight is used on the top of each letter to add a subtle bevel effect, making the letters really pop against their darker background.

Splash Some Love
Splash Some Love is another visual representation of a concept. Whilst ‘love’ is displayed through the medium of words, the ‘splash’ concept is clearly shown in a graphical medium through the exploding letters. The splash effect is really engaging, as is the hot pink on black background color palette used. The piece screams creative freedom and exploration, as the color literally breaks through the boundaries of the original type.

You in White
A wonderful example of 3D typography. This piece has been rendered using 3D software and then imported into Photoshop for further lighting, coloring and texturing. By combining various mediums in this way the final result is much richer and has plenty of depth and detail. Notice how essential the background is in the success of this piece, as the clever ‘natural’ lighting helps push the letters out from the background, and provide further depth and framing.

Surge
A cool text effect which captures electricity really well. The combination of the old school neon light effect on the text and the waves of electric current and light make this a busy, but engaging piece. The wide variety of neon colors fit well with the concept, and light is effectively used to draw the eye.

Hope Rising
A very clever visual exploration of the concept of ‘hope’. The dove, a classic epitome of hope or freedom has been used as the foundation for the lettering in this piece. The result is a typography piece with a huge amount of detail, and a kind of double layering, whereby the piece can be viewed initially as a kind of custom font creation, and the upon closer inspection a rich illustration. The way that the birds break out from the constrains of the letter shapes helps to accentuate the concept of freedom and ‘rising’.

Shake Your Body
A good example of dripping typography, a trend which has become more and more popular in the graphic design industry. Something about dripping or melting typographic gives a great sense of physicality, and this example shows this perfectly. The neon green ooze in this piece drips effortlessly between letters and words and in doing so brings the typography together into a cohesive whole.

Colors
A bright and vibrant piece based around the notion of color. The rainbow lighting effect on this typography is really eye catching, and creates a visual harmony between the visual exploration of color and the lexicon ‘colors’. The lettering is given a hand painted effect, with plenty of splashes, splatters and intricate details. Light spots are used to draw the eye to specific areas of lettering and add further depth to the piece, isolating it from it’s dark background.

Epic Six
Epic Six uses a cool glossy effect to create good-enough-to-eat typography. The font is hand drawn and then colored in Photoshop, and you can tell a lot of work has gone into the lighting and shading on each letter. The glossy effect combined with shadowing on each letter makes them feel very 3D, and the type really pops against a much darker blue background. The final piece is really fluid as each letter links smoothly into the next. This is a benefit of designing your own font, as most standard fonts wouldn’t allow for this fluidity.

Slash
A stunning typographic portrait, ‘Slash’ constructs the face of the famous guitarist using words relevant to his music and life. This piece shows how malleable type can be, as words are transformed and contorted to provide structure and depth. The hair in this piece is particularly inspiring, as words spiral and tumble downwards in ribbon like fashion.

Ansilmi
This typographic piece offers the feel of a fantasy hollywood movie poster. The archaic type selection fits perfectly with the golden texturing and lighting, and the central beam of light almost feels like a portal into another world. I love how the central light beam casts light outwards on the surrounding letters. Overall a very cohesive, impressive piece.

Crush
Crush is a very heavy-duty, solid feeling piece. The bulky metallic lettering feels powerful and immovable, and the glowing lava-like outline adds to the intense, industrial visual. This piece is a great example of how effective typography can really capture or evoke a feeling or place. For me this piece feels like the typographic representation of an iron smelt – hot, dirty and intense!

Typo Attack
This piece certainly is a visual attack, as the 3D splashes and renders zooming in from the left of the composition actually knock away letters and partially destroy the composition. Love how the splatters weave through the letters as well as destroying them, and the letters themselves begin to splatter outwards and explode. The piece has a limited color palette, yet the black, gray and blues work perfectly together.

Process:Typeface
A sweet custom typeface that simply had to be included in this compilation. Each letter feels lovingly hand crafted and contains epic amounts of detail. Love the effect of combining the multi-colored shards to create an ultimately very legible typeface. The typeface evokes sharpness and precision, definitely not one for the softies out there!

Free at Last
This piece has a very retro feel, with the large rounded lettering and colored stripes constructing the background. The text is given a 3D appearance due to the glossy overlay, lighting, and beveled effect. The lettering both stands out from and blends in with the background. When you’re reading the words they are reasonably legible, but if you start to look at the piece as a whole the letters simply become part of a colorful, geometric, abstract design.

Haeckelbet A
An incredible custom lettering project, each letter has been carefully hand drawn. This is a perfect example of each letter being it’s own work of art. The artist appears to have sketched each letter using pencil, scanned it into Photoshop and then added a sepia overlay effect and some background lighting. All this Photoshop work only really serves to highlight the artistic merits of the piece, as the wood-like weaves which form the letter show enormous talent and artistic skill.

Candy Cane Typography
A really fun typography piece, and another example of taking an object and transforming it to typographic form. The color scheme works really well and the lively pink type really pops against the rich, deep purple background. The lettering is a custom job, and weaves creatively across the canvas to create a really unique final design. The lettering is given a subtle bevel effect, and fairly strong drop shadow to add depth and impact.

Yummy Typography
A very summery typography illustration. This design uses a sunny color palette of yellows and oranges to create a lively, warm mood. The type itself has been given a subtle 3D render effect, which is accentuated by floating shapes and objects intertwining with the letters.

This is Me
A great typographic illustration, this self portrait actually constructs the artist using a collection of words all highly personal to herself. The portrait is especially impressive as words have been positioned to be relevant (e.g.: near the ear are words relevant to the artist’s music taste, and near the ear drum ‘bass’ etc…). The dark watercolor style background perfectly frames the face, which is harshly lit to provide plenty of impact. The depth is incredible in this piece, as the letters are strongly lit from the profile.

Type Fluid Experiment
A really unique typographic experiment that used 3D render software to create a fluid effect. The team behind this project have crafted every letter of the alphabet, which aside from the staggering amounts of RAM required is a testament to their artistic abilities. The collapsing fluid gives each letter plenty of energy, and you can really get a sense of the rapid movement being captured in freeze frame.

Try Your Own Typographic Piece

We hope that this collection has inspired you to go and try your own typographic piece. However, if you’re a little unsure of how to create such awesome text effects then the following tutorials should help you:

Create an Atmospheric Under-Water Text Effect

Dramatic Text on Fire Effect in Photoshop

Transparent Glass Lettering in Photoshop

Designing a Typographic Concept Poster

Awesome Milk Typography Effect

The New Way to Create 3D Text

(rb)

  

With so many designer’s devotion to typography, we felt it was time to shine our spotlight on some of the more artistic typographical creations out there to inspire our readers. Typography is virtually everywhere these days, and the art scene is not lacking in these expressive designs.

In fact, it is teeming with finely crafted pieces that take this design element to an entirely new level. One where it plays a much more subtle communicative role, and is more in a decorative one. Just take a look at this showcase we have compiled of some extremely artistic typography to see what we mean.

The Art of Type

Typo Graphic by Marta Podkowinska

Some Fresh Stuff by Peter Tarka

Style Experiment by Dmitry Ske

Typographic Experiments by Kristian Kasi

Posters by Evgeny Zhelvakov

Soma Show by Andy Smith

You’re Not The Other by Bruno Santinho

Bright Type by Veaone

Peace by Piece Font by Scott Wheeler

El Súper Cartel by Alexander Wright

Pleasure P by endemo

Timeless is not Forever Poster Series by carlos ”hayes” abreu

Joy by IGziz

Out Door 09 by Carlos Bermúdez

Playful Tongue by EikoMoogles

The Sound Lab by Simanion

Letter “G” by Gurez

Biodiveristy by dreamchaotic

2012 Forever and Ever… by blindn

Time to Love by relplus

Urban Alphabet by sweetlittlekitty

Save_The_Cupcakes by xTwentyOnex

Get Over Here by dahype2

TRIAD Graffiti by alangbanyu

9 by N-3-k-Y

I Love Typography by yli

Live Long and Prosper by marron

Love by StrangeProgram

United We Stand by mathiole

Set the World on Fire by myaki-ru

When I Grow Up by leepro

Acquisition by debruehe

CMYK by NeedMoreArtZ

(rb)

  

Excellent typography looks attractive while at the same time remains completely functional. The beauty of typography lies in that it vividly communicates with the visitors and keeps them informed about what they have come to the website for. Although the graphics play a key role in any web design, properly implementing the typography can create effective results especially when it is not underestimated.

Together with vividly created images and graphics, typography can take a web design to the highest level of creativity and attractiveness. It is not necessary that typography in web design always match with the design. Sometimes, it can be loud; sometimes, it can be bold dominating the overall design.

This round up features big, loud and dominating typography examples that give websites an elegantly unique style and sense of precision. Enjoy!

BOLD Typography in Web Design

Denis Echandler
The website makes use of large and bold typography that goes well with the overall design. All the words are written in caps for more emphasis.

Ipolecat
Ipolecat employed large and bold typefaces not only for the main tagline but also to describe their key selling points and draw the reader’s eye.

Takeshape.it
Interesting typography is used with creative imagination that looks simply stunning.

Hull Digital Live
Excellent use of typography to bring this ordinary web design to life. See how the designer has emphasized the essential information with clear fonts.

Illusionist
The main focus is on the typography although there is an interesting graphic added to help support and carry the design, but still the typography stands out.

We Shoot Bottle
A visually compelling web design having the typography set as the main attraction of the site.

Fixie
A stunning web design with typography that is so well suited for the tone and feel of the design, that it looks like a perfect match.

Cupcake Creative Studio
What you can expect if you hire them is clearly represented in their web design that looks beautiful because of the effective typography that is employed here.

SUPERCHARGED
The typography employed in this web design truly charges the overall site giving it a very unique look.

Gerren Lamson
This website uses a very elegant typeface to give the overall design an extraordinary and visually appealing look.

Git Tower
Here, typography is used to breath life into the web design and to add a feeling of excitement.

Fore Father Group
A vintage look is created solely with the help of appropriate typography usage. A simple black color is used against a soft background to help complete the look.

Efingo
In this website, the first thing that gets noticed is the typeface which demonstrates the power of effectively employing typography.

Marie Catribs
Casual yet powerful is what comes to mind when taking in the typography used in this website design.

Carsonified
The site uses the bold typography here to grab the attention of its readers without any graphical aid. The typography used here clearly states the philosophy of this website.

Stephen Caver
Black bold typefaces are used here to give the site a strong visual impact.

Miiks
Simple and wonderfully effective, this is what defines the typography used in this website.

Visual Republic
Visual Republic communicates their core business values through their fantastic font choices.

Rothco
The typography is quite creatively employed in this web design, visually drawing in their visitors.

Kyle Steed
Free style typeface demonstrating the expertise of Kyle Steed. The typography looks hand drawn to add a personal touch to the web design.

Pob Chart Lab
Although the use of typography is somewhat sparse, it is still undoubtedly attention grabbing and compliments the design.

Jonbrousseau
This typography is comparatively ambiguous with its background although the font size is relatively large.

Charles Elena
Big, interactive and engaging font style used for the main tagline here, that not only grabs attention but serves as eye candy in the design.

Me In Motion
No more ambiguity, only simple and clear typography. All the letters are in caps to capture the user’s attention.

Rich Brown
Brown and white bold typefaces are used alternately to create a visually compelling impact.

Barney Funk
A relatively large font size coupled with the red color is enough to catch the attention of onlookers. Further details are provided in more medium sized fonts.

Gummisig
Again, the main content is displayed with relatively large and bold typeface to catch visitors’ attention while the rest of details appear in relatively small sized fonts indicating their more secondary role.

Ryan Keiserw
Here the extensive use of typography somewhat makes it difficult for the visitor to focus on one thing; however the overall result is quite satisfactory.

Finch
Here, the designer has used their creative imagination to make the web design stand out against the sea of similar websites.

Clectricpulp
Very few details are provided here, therefore, font selection is made quite precisely to communicate all the essential points effectively.

Notorious Design
Here the creative use of fonts helps with building an interest in the web design and also embodies the creativity of the web designer.

Visual Boxsite
This design exemplifies the adage that simplicity is what works best.

Brunet-Garcia
This web design employs a very sophisticated typeface that adds a simple beauty to the web design.

Fajnechlopaki
Vibrant colors and bold fonts are the main attraction for this web design.

Objectified
A very professional look is created with the sensible use of sharp typography to send the subtly spoken message of professionalism.

Polargold
Again, another example of simple beauty. In this web design typography fulfills the role of graphical elements.

Elysiumburns
Lots of different font sizes and different types of fonts are used to distinguish different areas of focus throughout this design.

Bills on Your Table
Here typography is very cleverly used with amazing graphics that gives this web design something of a face lift.

Gapmedics
Same typeface used in different colors for the purpose of differentiation. Visual elements are also used to give further details.

Merge
Two completely different fonts are merged very creatively to create a distinction within the design here.

Four 24
Two different colors are used for the amazingly soft and beautiful typography giving the design a sense of distinction.

I am Always Hungry
Black colored typography against the bright yellow background really makes this design stand out and boldly call out to readers.

Designfabrika
Vibrant typography makes this design look attractive and pleasing to the eyes.

JLern Design
The typography is presented from a totally different, unique perspective along with flash elements to create a nice, compact and typography loaded web design.

Hungry Man
A little bit of a retro style and look is created to give the website a really distinctive design.

Francesco Mugnai
Soothing web design with pleasing typography that not only catches visitors’ attention but adds beauty to the design as well.

Process Type Foundry — they make type
Loads of different fonts and varying sizes do work for grabbing the attention, but here they also make it difficult to decide where to focus first.

(rb)

  

In the first three parts of this series, we covered a lot of information about the anatomy of a typeface, and what kinds of things to look for when actually combining two fonts. Here, we’ll tie it all together.

Below are guidelines for combining fonts for paragraphs and headlines, as well as for other common type elements, like pull quotes and by-lines.

Headlines and Paragraphs

The headline and paragraph are two of the most basic building blocks of the typography of a design. In some cases, a heading and paragraph may be the only kinds of typographic information present in a design. Because of this, they’re often given great precedence in the design process.

So let’s start with these two elements, and we’ll expand from there. Here are some examples of effective typeface combinations, starting with the least difficult.

The absolute simplest way to create a headline/paragraph combination is to use the same typeface for both, but with different weights and sizes. Here, we’ve combined Adobe Caslon: Regular for the paragraph copy and Bold for the headline. It’s simple and formal, but can be a bit boring.

The next easiest is to select fonts from the same family. Here we have Fontin Bold for the headline and Fontin Sans for the paragraph copy. Again, change around the weight and size to get better contrast. There are a lot of typeface families that include both serif and sans serif typefaces, including Droid Sans and Droid Serif, and Museo and Museo Sans.

Probably the most common method of combining typefaces is to pair a serif with a sans-serif. In print design, serifs are generally used for the body copy, while sans-serifs are used as headlines. The opposite is more generally true online, though both can work in either setting. Here, we’ve combined Lucida Sans for the headline with Crimson Text for the paragraph copy.

Here we’ve combined Rockwell Bold for the headline and Gill Sans for the paragraph type. Both of these typefaces have a basis in geometric shapes, and therefore they work well together. If you look at the letter “o” especially, you’ll see that in both typefaces, it’s almost a perfect circle (the same is true for the bowls of the letters in both).

Both the typefaces here are clean and modern. The headline is SF New Republic SC and the paragraph is Hero Light.

Here’s another set with a similar mood and style, this time old-fashioned or antique. The headline is Tagettes and the paragraph copy is Goudy Bookletter 1911.

Mixing a strong typeface with a more neutral one can also be a great technique, especially on the web. Here, we have Dancing Script for the headline and Georgia for the paragraph copy.

The trickiest typeface combination technique is probably creating a combination from two radically different typefaces. It’s tricky because it’s so easy to go wrong. Just because two typefaces are radically different doesn’t mean they’ll automatically work together. And when one of those typefaces also needs to be legible as paragraph text, it makes things that much more difficult.

The example above combines Tallys for the paragraph copy with DayPosterBlack for the headline. Tallys is a decidedly traditional-looking typeface, with a fairly light stroke weight. DayPosterBlack, by contrast, is a strong, modern, almost sci-fi-looking typeface.

This is one of those techniques that’s best achieved through simple trial-and-error. Try out a bunch of different combinations and see which ones look good together. You may have to try out a dozen or more combinations before you find one that works well because of it’s contrast.

Beyond Headlines and Paragraphs

Headlines and paragraphs, while important, are only one small part of a lot of designs, especially blogs and news sites. Below are a few more types of typographic elements you may find yourself using.

Pull-Quotes

With pull quotes, there are a couple of different options. First, you can simply use the body copy typeface for your pull quotes, but in a larger size, and possibly a different weight:

It doesn’t look bad, but it’s also kind of boring having both the paragraph and pull quote in Times.

Another option is to use the headline typeface, in this case Dancing Script, for your pull quote. This is more interesting, and definitely draws more attention to the pull quote, but it’s not going to work in every situation. As a general rule, the more decorative your headline font, the worse it will work for pull quotes. You can get away with a script, but anything more decorative than that isn’t going to look right.

The other options with pull quotes is to use a typeface completely different from your headline and paragraph choices. In this case, we’ve used Anivers for the pull quote, Times for the paragraph, and Dancing Script for the headline. Consider the guidelines for combining paragraph and headline typefaces, and use the same general guidelines. In this case, since the paragraph text is a serif and the headline is a script, it made sense to use a sans-serif for the pull quote. Using a weight for the pull quote that’s roughly the same as the weight for the headline helps tie everything together.

Meta Information

Meta information is going to be found on virtually every blog or news site out there. This includes things like the category or tag information, the time the article was posted, and other similar information. Sometimes, it also includes the by-line of the author. Again, there are a couple of different ways to approach the typography for this kind of information.

The first thing you need to remember, though, is that meta information is usually displayed quite small, and sometimes in a lighter color. This rules out a large number of potential typeface choices, as you need something that’s legible at an 8 or 10 point size.

The first option is to use the same typeface you’ve used for your body copy, but in a slightly smaller size and/or a lighter color. Here, both the body copy and the meta information are Crimson.

Another option is to use a very neutral typeface, like Helvetica, for your meta copy. This choice is especially good if your body text isn’t highly legible at small sizes.

Captions

Photo captions should be treated much like meta information. Generally, the type used to caption images is small and sometimes in a lighter color than the body text. In a lot of cases, it’s included within the image border.

Again, you basically have two options for photo captions: you can use the same typeface as your body copy, or you can use a different face. If your captions are going to be very small, legibility may make the decision for you.

For example, look at the captions on the images above. Both are in 11pt, regular weight fonts. The top caption is in Tallys, a common typeface for body copy, which isn’t particularly legible in this instance unless you squint. The bottom caption, by contrast, is in Helvetica, and is significantly more legible.

Examples

Whether you’re combining two typefaces or eight, the same principles apply. You need to find typefaces with some kind of shared characteristics (except when using radical contrast) so that they work well together. Here are some examples of websites that have done just that.

Elysium Burns

Elysium Burns uses a combination of serif and sans serif typefaces, as well as a variety of styles (including all caps).

Good Magazine

Good Magazine also uses a combination of serif and sans serif typefaces, including Georgia for the body text and Arial for navigation and meta information.

Viget Inspire

The Viget Inspire blog uses a combination of sans serif and serif typefaces. Constantina (with Georgia as the primary alternate) is used for headings, while Georgia and Verdana are used for meta information. Body copy on the blog is Verdana.

The Morning News

The Morning News uses Georgia for their headlines and Arial for body copy. They use a variety of weights and styles (including italics and all caps) to set apart different kinds of copy.

The New Yorker

The New Yorker uses their own typeface for article headlines, and Times New Roman for body copy. Meta information and some navigation is set in Arial.

A List Apart

A List Apart uses Georgia for their headlines and navigation, and Verdana for body copy. For by-lines and meta information, they use a combination of Verdana and Times.

Design Wise

Design Wise uses various weights of a slab serif typeface for all of their typography.

Quipsologies

Quipsologies uses a variety of custom fonts for their headlines (p22-underground-pc-1 and coquette-1 most prominently). They also use custom fonts for body text (mostly p22-underground-1 and skolar-1). It’s a bold choice, made possible by web fonts.

sr28

sr28 uses Georgia for headlines and Arial for body text.

I Love Typography

I Love Typography uses web fonts from the same family for their typography, including ff-scala-sans-web-1 for their headlines and meta information, and ff-scala-web-1 for their body copy.

Burciaga

Laura Burciaga’s blog uses a combination of three primary typefaces: Dancing Script (for headlines), Droid Serif (for meta information), and Georgia (for most of the body copy). Combining two serifs is tricky, but it’s done really well here.

Black Harbor

Black Harbor uses Georgia for body copy and KnockoutHTF48-Featherweight for the headlines and navigation.

The Dollar Dreadful

The Dollar Dreadful uses a huge number of retro-styled typefaces for their headlines. Their body font is Georgia.

Matt Bango

Matt Bango uses a mix of Georgia and Helvetica, as well as another serif typeface (with Flash replacement).

Kari Jobe

Kari Jobe’s site uses a variety of typefaces, including Courier New for the body copy. Most of the typography on the site is done with images rather than web fonts.

Design Intellection

Design Intellection uses a variety of weights and styles of Proxima Nova, as well as a bit of Georgia (for block quotes).

The Old State

The bulk of the typography on The Old State is Georgia, though there’s a thin slab serif also used for the navigation and logo.

Poems Out Loud

Poems Out Loud uses Baskerville as their primary typeface for both headings and body copy (with Times as the secondary font). There’s also limited use of Helvetica Neue for navigation.

A Word on Web vs. Print

There’s a lot of conflict surrounding the best practices for typography on the Web when compared to print. In print, longstanding wisdom has pointed toward using serif typefaces for body copy and sans-serifs for headlines. On the web, the opposite is often touted as gospel: sans-serif body copy and serif headlines.

The truth of the matter is that both serif and sans serif typefaces can be perfectly readable both onscreen and in print. It’s all dependant on proper contrast and sizing. Some typefaces are designed to work well at small sizes (mostly by “hinting”), while others are not.

One general rule of thumb for optimal readability, though, is that slightly larger type works better onscreen. This is partly to do with resolution: printed materials are generally printed at 300 dots per inch and up. Screen resolution, though, is generally around 96 points per inch. Because fewer pixels/dots are used to make up the letterforms, they’re slightly less crisp onscreen than they are when printed. By making a type slightly larger, you’re using more pixels to represent the same forms, making the form sharper. The more detailed the letterforms (such as with serif typefaces), the more stark this difference becomes. This is why sans-serif typefaces are often preferred online, as their simpler shapes are better reproduced at smaller sizes.

Conclusion

Much of good typographic design has to do with being unafraid of trying new things and experimenting. Sometimes unlikely combinations work beautifully together, while at other times two typefaces that should look great together just don’t quite look right. The only way to learn what works and what doesn’t is to try new things.

Here are some very general guidelines for using typefaces for various parts of a typical design. Remember, these are just guidelines, and there will be exceptions to all of them.

• Small fonts are more readable if they’re less detailed to begin with. This is compounded when they’re being used online.
• Captions and meta information are generally a few points smaller than body copy, and should either be in the same typeface or a neutral alternative like Helvetica.
• Your typography should match the feel of your content. Formal documents should use formal type. Informal documents should use informal type. (In other words, don’t use something like Comic Sans for a corporate report, and likewise don’t use Times New Roman for a child’s birthday party invitation.)
• When in doubt, use Caslon.

More Resources

• Four Techniques for Combining Fonts
  A useful breakdown from Hoefler & Frere-Jones
• Mastering Font Combinations
  A short, basic article on combining typefaces.
• 19 Top Fonts in 19 Top Combinations
  A look at combining some of the most popular fonts used by designers.
• 10 Great Google Font Combinations You Can Copy
  Not only gives the ten combinations, but also the reasons behind combining them.
• Choosing Type Combinations
  An in-depth article from Layers Magazine.
• Best Practices of Combining Typefaces
  An article from our archives on basic rules for combining typefaces.

(rb)

  

When combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood. Effectively combining typefaces is a skill best learned through practice, and trial-and-error. Once you’ve mastered the principles covered here, you’ll have the tools you need to try out combinations while making educated guesses about what will and won’t work together.

Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines. In the next part, we’ll cover combining more than two typefaces for things like navigation, image captions, and more.

Contrast

Contrast is one of the most important concepts to understand when it comes to combining typefaces. Without proper contrast, typefaces tend to clash, creating a random, scattered look to your designs (and not in a good way). Creating proper contrast relies on a few principles, all of which are discussed below.

But first, what exactly is contrast? Contrast is the amount of difference between two typefaces. Typefaces that are too similar tend to clash. Your mind doesn’t instantly recognize that they’re different typefaces, and when it finally does, it’s jarring. Typefaces that are too dissimilar can appear haphazard and accidental, which can be just as jarring.

Weight

The weight of a typeface plays a huge role in its appearance. We often think of weight in terms of “light”, “regular”, “medium”, “bold”, etc. But different typefaces have varying weights to begin with. Combining typefaces based largely on weight is a fairly straight-forward way of creating typographic contrast.

You’ll want to look for typefaces that have noticeable difference in weight, without being too extreme. Very extreme differences in weight need to be made up for with similarities in other respects, particularly structure and style.

Style and Decoration

The style of a typeface has a huge impact on how it’s received. Generally, when working with styles, you’re going to be either using regular or italic styles. Underlines are also used, but in web design, they should only be used for links (otherwise, they’re confusing). Other decorations include things like outlines or drop shadows, both of which can be used to unify varying typefaces.

Style and decoration can also be used to create contrast within a type family or typeface. Combine regular and italic fonts, varying weights, and things like shadows or outlines to create variation within a font family and sufficient typographic contrast.

Scale and Hierarchy

The scale of typefaces, or their size relative to one another, is another important factor in combining typefaces. The hierarchy of different elements within the design is greatly influenced by the scale of the typefaces used. For example, your headings should obviously be larger than your paragraph copy. To the same end, your H1 headings should be larger than your H2 headings, and so forth.

As a general rule, your hierarchy should start with your H1 heading being the largest, and your meta information or captions should be the smallest. You need to balance the differences in scale with differences in weight and style, too, so that you don’t have too much variation in size between your largest and smallest fonts.

Classificiation

In general, when combining typefaces, you’ll want to choose ones that aren’t from the same classification. Combine a serif and a sans-serif, or a serif and a script, etc., and you’ll have a much easier time coming up with a combination that has proper contrast and doesn’t clash.

Combining typefaces within the same classification is sometimes possible, but there are some extra considerations. For one, you want to find typefaces that are different enough that they’re immediately recognizable as different typefaces, while also using typefaces that have similar moods, structures, and other factors that tie them together. To some extent, trial and error is your best bet for finding typefaces within the same classification that can work together.

One trick is to choose typefaces that are in the same general classification, but fall under different sub-classes (such as a slab serif and a modern serif, or a geometric sans serif with a grotesk). This provides more contrast right from the start.

Structure

The structure of a typeface plays a huge role in how it works with other typefaces. You either need to choose typefaces that have very, very similar structures, or very different structures. Letterforms that are only a bit similar are going to clash. Typefaces that are very different in other ways can be unified by their similar structures, though the reverse rarely works as well.

Look at the letterforms side-by-side and see if they share a similar shape or other factor (such as x-height). It’s better to go with wildly different structures than structure that’s almost the same but not quite.

Color and Texture

When you need to add visual contrast or unify disparate typefaces, the use of color and texture can do wonders. For example, when you need to add contrast among typefaces that are nearly identical (or within a single type family), changing the color of some elements instantly adds interest. Adding texture has the same effect.

Alternatively, if you have wildly different typefaces, color and texture and unify those typefaces, creating a harmonious look. The principles of color theory still apply to typography, so be sure you don’t go overboard combining colors.

Extreme Contrast

Extreme contrast can be a great option if you’re working with display or script typefaces. In these instances, it can be difficult to find typefaces with good contrast that aren’t too dissimilar. So rather than trying to do that, go for completely different typefaces. Try combining a rather simple typeface with something more elaborate for the best results, rather than two elaborate typefaces.

Mood

The mood of the typefaces you select is vital to the way they work together. Mood can be anything from formal to casual, fun to serious, modern to classic, or anything in between. This is where a lot of people run into trouble with combining typefaces. Selecting typefaces that not only have similar (or complementary) moods, but also have moods to match the project you’re designing is crucial.

Examples

Oak Street Bootmakers
Oak Street Bootmakers Uses a combination of Hoefler Text and Franklin Gothic, both of which are very classic typefaces. It creates an image that is steeped in tradition.

Pound & Grain
Pound & Grain combines two serif typefaces, as well as a sans serif on their home page. The two serifs work well together because they belong to different sub-classes.

Burciaga
Burciaga combines three distinct typefaces: Droid Serif, Georgia, and Dancing Script. Droid Serif and Georgia work surprisingly well together, and Dancing Script adds extra elegance.

Stuart Bicknell Photography
Stuart Bicknell Photography uses font size and style to create contrast on the site, depsite the fact that virtually all of the typography is Times New Roman (there are a few small touches of Arial).

Foundation Six
Foundation Six uses a mix of Clarendon and Helvetica Neue, which creates a modern but still conservative look.

CalebAcuity Americas
CalebAcuity Americas uses a combination of YanoneKaffeesatzBold and Lucida Sans. It’s a very modern look, and a great example of how to successfully combine sans serif typefaces.

Analog
Analog is a great example of a site that uses a single typeface, but uses styles, colors, and scale to create contrast.

Thor Datacenter
Thor Datacenter combines a few typefaces, including AllerDisplay, JournalRegular, and Arial. The addition of a script font like JournalRegular to the otherwise sans serif typography palette results in a much more casual and inviting feeling to the site.

47 Degrees
47 Degrees combines LeagueGothic with ChunkFive and Helvetica for a very modern, casual style. They also use Museo300 sparsely on their site, which adds more visual interest.

Logo Nest
Logo Nest combines a huge number of typefaces on their site to create a vintage look. They keep everything unified, though, through color (virtually all the type on the site is either black or white).

More Resources:

• Typographic Contrast and Flow
  From WebDesignerWall. Covers the basics of contrast in typography.
• Typographic Contrast and the Web
  A very comprehensive aritcle that covers the basics of typographic contrast as it pertains to web design.
• Focus on Typography, Part 1: Contrast
  From SitePoint, this article covers all the basics of contrast, fully illustrated.
• A Guide to Web Typography
  A fantastic, comprehensive article covering web typography from I Love Typography.
• 29 Principles for Making Great Font Combinations
  A list-style post that covers some excellent rules for combining typefaces.

(ik)

  

Those of us who work in creative fields tend to need to return to the wells of inspiration for a bit of a recharge for our imagination. In these times we turn to many, many different areas, looking for anything to spark those creative fires once again so that we can enthusiastically charge back into the proverbial fray. Hopefully with enough juice to punch through any of those roadblocks that may have been in our way when we went in search of inspiration.

In this post we are going to be focusing our inspirational radar in the typographical waters to help all of those enthusiasts and fanatics alike to get their fix of all kinds of font-related goodness. Here is an inspirational roundup we’ve collected to keep our readers busy for the weekend. We hope that you find enough typography inspiration in the sections below to keep your creativity flowing nicely for some time.

Typographical Based Artwork

The first stop along the way in this search for inspiration is in the various galleries of some talented designers who have created some imaginative artwork based around, or heavily featuring some typographical elements in the pieces. We have several artists with a handful of their designs in this first showcase, followed by a few random pieces from some other artists that we did not want to leave out. Some you may have seen before, some you may have not, but either way hopefully they will be that needed spark.

Áron Jancsó

Áron’s work is colorful and those featured are compromised of linework as the foundation for each piece. Used in completely different styles and weights, the work still shows a dynamic sense and versatility from the designer. Inspired and inspiring.

Lowercase G

From the Vector Graffiti Collection

Tokyork Logo

David Waters

First up beneath the spotlight is David Waters. David’s work ranges from both the grunge heavy to the sharp and crisp, but always present is an imaginative type work that accentuates the overall voice of the pieces they inhabit. With such inspired in his portfolio, this easy addition to the showcase should be rubbing off on you in no time.

The KDU Brochure

Ecosystems

Dichotomy

Adolfo Correa

Is a talented designer with some colorful examples in the showcase, where the type elements are the central element of each of the pieces. Below, Adolfo demonstrates that his skills lie outside the digital arena as well with the paper art tribute he created that we have featured.

A Tribute to Yulia Brodskaya

Steve Aoki

Enedi Collaboration 2

Alex Beltechi

As our showcase keeps on moving forward, we stop on the works of Alex Beltechi, a designer whose style and works are filled with a lighter, somewhat playful approach. His in-depth, layered styles lend well to the large typographical centerpieces of the pieces that we have showcased below.

Type Treat

Steampunk Typography

Changing Actions Wallpaper

Diego L. Rodriguez

The next designer that we find filling the wellsprings of inspiration with their amazing work is Diego L. Rodriguez. Diego’s designs are as big and as bold as the typographical elements that he crafts into his pieces. Once again, we see a range of styles skillfully employed in each piece as the work explodes from their digital canvases.

Solomon Tribute Album Cover

NAS – The Lost Tapes 1.5 Album Cover

Needles

Michal Sycz

Speaking of playful designs, our next artist up on the showcase is designer Michal Sycz, whose work is certainly no stranger to this fun loving nature as is proven in the first piece on feature. Though this whimsical approach is not in any way the standard for Michal’s work as we see the powerful voice of public commentary in the showcase as well.

Milk Sucks

Barcelona

slashTHREE / Order vs Chaos

Dan Beckemeyer’s Ampersand Food Groups

This next feature is all about the fun, with something of an unconventional look at typography. Well, at least one character of type that is. Dan Beckmeyer has created a series of Ampersands using two commonly combined foods to give the typographical character both form and a quirky, yet original series of pieces.

Wine & Cheese

Peanut Butter & Jelly

Coffee & Doughnuts

Cris Wicks

Cris Wicks is a designer whose works you have more than likely seen being featured around the webs as their breathtaking typographical portraits tend to catch the eye no matter their surroundings. Using a popular technique to create a portrait out of words, Cris has created some truly inspiring works that rank high in most folk’s favorites.

lyric portrait 2nd attempt

Beautiful Boogieman

Mr. Marley

Markie Darkie

Speaking of popular works that tend to make the rounds, you might have seen one or two of our next designer’s works. Markie Darkie has some vibrant and explosively colorful and bold typographical artwork that we just would not have felt right about excluding here from our inspirational showcase. For these works are proven useful inspirational tools.

CMYK

Fusion

GK

Steve Goodin

Our next showcase entries come from a talented designer who masterfully transports his typographical elements into a layered bed of classical grunge beauty. Steve Goodin delivers some simply stunning works that are sure to help kick-start your inspirational mojo machine into high gear.

Blackout

Open House

Signal

Dimo Trifonov

Next up along this road to inspiration, comes the work of designer Dimo Trifonov, who wonderfully submerges his typographical elements into his designs until they are nearly lost and merely art themselves. His interesting creations for a range of clients make a dynamic slice of his work which shows a versatility to his voice.

Trust the Mutation

Ashton Illustration

It’s all about the shoe

Neil Hanvey

Here our typographical journey for inspiration takes a turn for the whimsical and more playful side as we visit work from the portfolio of the talented Neil Hanvey. Neil’s designs are filled to the brim with exciting and colorful elements and sometimes characters. If fun tends to fan your flames of inspiration, then these next few pieces might be the dose you need.

Atomic Circus

Mecha Owl vs Steam Dragon

Hope for Haiti

Daniel J Diggle

The next designer that we are showcasing today is Daniel J. Diggle. Daniel uses intricately designed typographical drawings that heavily rely on various artistic elements to create and give form to the type, instead of the other way around as we have seen. Brilliant and beautiful work that certainly raises the proverbial bar.

Random Got Beautiful

The Roots

5125

Andreas Scheiger’s Evolution of Type

Next up, we find an original set of sculptures unlike other works you may have seen before from the Evolution of Type Exhibit by: Andreas Scheiger. This is a uniquely morbid, if not completely awesome idea for a set of typographical sculptures that looks beneath the surface, so to speak, of our type.

Exhibit Number 3

Exhibit Number 2

Exhibit Number 1

Tariq Yosef

As we are winding down in this section of the post, we have the final designer with multiple artistic typographical pieces from their gallery being featured here today and that is the imaginative works or Tariq Yosef. Tariq’s chaotic and explosive pieces are both rich and charged with emotion. Definitely an easy add to the showcase!

Numbers Man

typoGeo

its sad

Individual Artist Showcase

Now we have a handful of other designer artworks that not only caught our eye, but got the wheels of inspiration turning as we took them in, so naturally we couldn’t check out of this section without stopping in them first.

Nuzzles – Wooden Typographic Puzzles by: John Christenson are an extremely creative and fun break from the other works that we have been showcasing in the post. Once we laid eyes on them, we knew they had to get a spot on the list!

The Antidote by: Jared Nickerson is a simple retro design that uses typography to bring the whole meaning of the piece together and present it stylistically to the viewer.

Typefaces

How could we do a post focusing on typography inspiration and not actually deliver some typefaces that are sure to please and douse those creative embers with a little fuel? Short answer, we couldn’t. So feast your eyes and typeface appetites on the gatherings below and don’t forget that you need to still come up for air on occasion.

Slinkytype by: Paul Hollingworth

It may not walk down stairs or travel in pairs like its namesake, but the Slinkytype font is a stroke of creative genius. Taking the spiral, coiled visuals from this toy that has entertained countless kids across generations and distilling it into a highly unique typeface made this an easy addition to our showcase.

VAL – Free Font by: Fontfabric

VAL is a Fontfabric typeface whose weight and bubbly nature have made it a virtual splash among the community. The fact that it is free has not hurt either, but given its size and style you would expect it to be somewhat difficult to read, but that is not the case here. With a unique style for fitting the letters together, this font is certainly worth checking out. Click on the images to visit the page with the download link.

ROKE 1984 – Free Font by: Wete

ROKE 1984 is a typeface so refreshingly original that we could not exclude it from this post without feeling horribly guilty for shorting the readers. Wete, the designer, has delivered a font that really sets the bar high for others to follow, with several variations of the font to give your work just the look you were craving. Click on the images to visit the page with the download link.

Kalevi Typeface by: Ossi Gustafsson

Kalevi is another typeface whose elegance and sharp nature made it nearly impossible to pass up as we put this showcase together for our readers. Even with its somewhat boxy style, this font still comes across as classic and professional, and also has a stencil variation that takes it to more of a laid back place. So it works on numerous levels.

my Angle Type by: Andre Roquette

my Angle Type is another highly unique font that has evolved artistically into a funtional, wonderfully stylish typeface. The designer’s imaginative approach to the font’s creation has seemingly infused the work with an inspiring tone that is almost guaranteed to get those juices flowing.

Disorder Type by: Sig Vicious

Speaking of unique approaches to the font’s origins, our next typeface on the showcase shares this spotlight, and that is Disorder Type. Trying to encapsulate the symptoms and feelings associated with Dissociative Identity Disorder, the designer delivered upon a powerful, if not singular, typeface to the community at large.

Perforama – Free Font by: Alexey Frolov

Perforama is a fun font with a retro feel that takes a simple lined character, rounded corner approach to pulling together this typeface. Has the look and feel of an older seventies genre design, while still managing to keep it relevant and from feeling truly dated. Click on the images to visit the page with the download link.

Bardelin – Free Font by: Alexey Frolov

Bardelin is a bold and full typeface that still has somewhat of a lightness to it that most weightier fonts tend to be missing. The subtle waviness to the characters keeps the font from feeling constrictive and as concrete as most bolder fonts do as well. Click on the images to visit the page with the download link.

Dekar – Free Font by: Fontfabric

Dekar is another Fontfabric release, that is tight and crisp in all the ways a professional feeling typeface should be. With both a bold and a light variation of the font, this sharp type has a versatility to it that just might take you by surprise. Click on the images to visit the page with the download link.

Adec – Free Font by: Serge Shi

Adec is another uniquely crafted typeface that would make an inspirational addition to any designers virtual toolbox for sure. Taking somewhat of a split level approach, so to speak, the font combines character elements to give the type a slight sense of whimsy, while maintaining a sharp modern edge. Click on the images to visit the page with the download link.

Deibi v1.0 – Free Font by: Wete

Deibi is the second typeface by Wete that we have featured, though it has a completely different feel and tone to it. Though the font itself has the hand drawn, somewhat loose look, it still comes together in a tight-knit professional look that gives the font a unique personality of sorts. Click on the images to visit the page with the download link.

A Couple More For the Road

Before we go, we have a couple more places to turn when you are looking for typography inspiration that we thought we would drop into the virtual mix to cap things off. We hope that you have enjoyed the post and gotten some inspiration out of its holds.

Baseline Magazine is a magazine that is focused completely on typography. This is certainly a publication for every enthusiast and pro alike to look into to keep their fingers on the pulse of the typography in the design world.

Type Foundry Wiki is the Wikipedia entry for Type Foundries. Plain and simple. Want to know where to go to get all of your font fixes, then visit the foundry entry for lists of typeface sources to turn to!

Friends of Type helps you discover great fresh visual content. Four creative fellows are responsible for the project which features type artwork from artists around the world, yet mainly their personal work. The project values typographic design and serves as a sketchbook, archive as well as dialogue.

Consider Also Some of Our Previous Posts:

• The Beauty Of Typography: Writing Systems And Calligraphy Of The World is a post from the Smashing vaults that can also help out with the inspiration end by taking you through examples of scripts from around the world.
• Typographic Design Patterns and Best Practices is another post from the ghost of Smashing past that can help you once that inspiration gets rolling once again, and you begin your next typography focused design.

(ik)