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)

  

Typography obviously belongs to the cohort of the fine arts, where even the smallest details and elements are meaningful and can influence the overall perception of the final creation, whether it is a picture or a text, printed with a particular typeface. In terms of fonts design, serifs are those tiny elements, which add a particular character to a typeface, contributing to the unique feel and look every font is characterized with.

By definition, serifs are the small lines or strokes at the ends of the main strokes of the letters in a particular font. Sometimes, serifs are also descriptively explained as “hooks” or “little feet” at the ends of the vertical and horizontal strokes of a letter. Consequently, fonts with serifs are usually mentioned as Serif fonts, for example, Times Roman, Garamond, Souvenir, etc. On the other hand, fonts, where letters are not supplied with such embellishing elements, are called Sans Serif fonts (“sans” means “without” in French).

It is interesting to note that along with purely decorative function serifs are believed to play a role in the text perception mechanism by the human eyes, making the printed text easier to read. This is why Serif fonts have always been among the primary choices for printing books, newspapers, and magazines. However, in electronic media, due to the specificity of perceiving a text on the computer screen, it is preferred to use Sans Serif rather than Serif fonts, because reading letters without serifs is considered to be easier on the screen.

Stemming out of the ancient Roman alphabet with the letters carved into stone, Serif fonts have passed a long way of development and evolution. As the result, now we have several types of Serif fonts, each with its own peculiarities and specific features.

Old Style Serif Fonts

Dating back to the middle of the 15th century, old style serif fonts are considered to be based on the humanist calligraphy. The key features of the old style serif fonts are low line contrast (when there is only a slight difference between thick and thin lines forming a letter) and diagonal stress (the thinnest parts of the letters are those at the angles). It is believed that the combination of diagonal stress and bracketed serifs in old style serif fonts creates a special positive word picture, which is especially favorable for the ease of reading and perception.

Free old style serif fonts

Commercial old style serif fonts

Transitional Serif Fonts

Everyone knows Times New Roman font, which is commonly used as the default font in computer text editors. This font, created in 1932, is the most vivid representative of the transitional serif fonts, which first appeared in the middle of the 18th century and now stands between old style and modern serifs in the typical font classification. Unlike old style serifs, transitional serif fonts feature higher line contrast with more distinctive difference between thick and thin lines. Transitional serif fonts are sometimes called “baroque fonts”.

Free transitional serif fonts

Commercial transitional serif fonts

Modern Serif Fonts

Modern serif fonts first appeared at the end of the 18th century. Also known as Didone serif typefaces, the family of modern serifs fonts has vivid differences from the old style serif fonts. These are the extreme high line contrast, vertical stress instead of diagonal, and long and fine serifs. Vertical lines of the modern serif fonts are usually very heavy, which, in combination with thin and light serifs, makes a text, printed in modern serif font, less readable.

Free modern serif fonts

Commercial modern serif fonts

Slab Serif Fonts

The first slab serif font was presented in the early 19th century by Vincent Figgins under the name Antique. However, in view of public craze in Europe for everything Egyptian at those times, the slab serif fonts were commonly called Egyptian. Virtually no difference between thick and thin lines of the letters is the key feature of slab serifs. With the bold and rectangular shapes, slab serif fonts often have fixed width, which means that every letter occupies the same horizontal space.

Free slab serif fonts

Commercial slab serif fonts

Clarendon Serif Fonts

Clarendon serif font is sometimes classified as the subtype of slab serif fonts. However, unlike traditional slab serifs, Clarendon font has some brackets at the junction of a stem and serifs. Also, Clarendon fonts usually feature heavy and square-cut serifs. This font group was widely used in the Old West in “wanted” posters and later on traffic signs in the USA. Now Clarendon font can be found on the logotypes of many companies with Sony among them.

Free Clarendon serif fonts

Commercial Clarendon serif fonts

Freeform Serif Fonts

Along with the serif fonts, designed in accordance with particular typography rules or tradition, such as old style serif fonts or modern serifs, there are also many freeform serif fonts, developed these days. Designers, inspired by a rich legacy of serif fonts and modern trends in typography, use all their imagination to present serif fonts in a fresh and sometimes completely unexpected way.

Free freeform serif fonts

Commercial freeform serif fonts

  

By Paul Viluda

The word “calligraphy” is derived from two Greek words, denoting “beautiful writing”. Calligraphy or the art of writing has thousands of years in its history and development, and indeed calligraphy fonts, which we often use these days on our PCs to create a postcard or a wedding invitation card, are absolutely about aesthetics, refinement, creativity, and pure beauty.

Below is the selection of a dozen of calligraphy free fonts, you can easily download from the Internet and use for your own uniquely beautiful projects.

Young Love ES

Fine, tender, and delicate, this Young Love ES calligraphy free font is the demonstration of calligraphy in its traditional meaning. The font has vivid features of a handwriting script, so it will suit perfectly for personal messages, invitations, or greetings. Besides, it can be used for some art logo designs. The font is supplied with the impressive set of character maps supported, thus making this free font a very flexible tool, allowing the use of multiple specific language characters and symbols.

The King & Queen

The King & Queen is another Calligraphy font, available for free download online. This font has some traces of gothic or alternative style due to its grungy background. Besides, font designer used different line widths, which makes the font look more “manual” or “hand-written”. Some thorny lines and edges add specific chic to this free Calligraphy font; so, it is definitely recommended for designers, who like to experiment with fonts and are not afraid of mixing classic design with alternative shades.

Cygnet

Clear, reserved, and appropriate – I would use those adjectives to describe Cygnet calligraphy font, which is also available for free download. The font looks pretty rounded but without those fancy curls, as we can see in other calligraphy fonts. Both lowercase and upper Roman characters are included in the Cygnet character map. Besides, it also contains a vast variety of additional characters, allowing the use of this font in alphabets with accented letters.

Liberate Wide Normal

Designed by Bay Animation Inc., this script font features medium weight and expanded proportion. The font is supplied with different character maps to suit the needs of the most exacting designers, who want to use some peculiar characters and signs. Along with the Basic Latin character map, you will also receive Latin Supplement, Latin Extended, General Punctuation, and even Letterlike Symbols in one box.

ChopinScript

Chopin font is one of the most favorite free fonts in calligraphy category. It has already become a number one choice for many millions of designers, searching for a nice-looking, appealing, and neat calligraphy font. Uppercase letters look pretty fancy; however, this never prevents easy reading of a text; besides, the lowercase characters are designed in a traditional calligraphy manner. The font consists of 129 characters, including special symbols.

CalligraphyFLF

With 227 characters included in the character map, Calligraphy FLF free font is a very good option for those creative applications, where strict and reserved calligraphy is expected. No fancy curls, all the attention is paid to content rather than to form. I would say this free font has a definite English scent of punctuality, demureness, and reliability. Calligraphy FLF was designed by Richard A. Ware, one of the representatives of the old school of font designers.

NK39pc_D

Peculiarity of this free calligraphy font is that along with basic Latin characters, it also contains Cyrillic and Greek symbols, which makes it a great choice when working with the alphabets other than Roman A-Z alphabet. Besides, the font contains mathematical operators and punctuation marks. The font has a classic calligraphy look with Roman alphabet, though with Cyrillic letters it is really curly, which makes it resemble some hand-writing art. The only thing I noted is that this font looks pretty small in regard to the font size chosen, however this can hardly be a drawback of this very nice and professional calligraphy font, friendly to Cyrillic and Greek letters.

Champignon

There are two variants of this free font as shown on the samples above. The classic Champignon looks very pretty and appropriate in terms of classic calligraphy principles. Champignon Alt Swash looks differently and creates the feeling of sprawling handwriting.

Windsong

Windsong is another free calligraphy font, featuring clear and light design. Light as the wind and smooth as a classic song, this font by Bright Ideas represents a traditional handwriting calligraphy. Both uppercase and lowercase letters look very close to the letters from school books. Numbers, as well as punctuation marks, are also present in the character map (247 characters in total). The font is characterized as semi-light in weight and medium (normal) in width. Windsong will be a good choice for projects, where classic calligraphy with handwriting look is expected.

Lainie Day

Lainie Day with its delicate shapes of characters (Roman alphabet only), classic, but not boring lines, is definitely a must have calligraphy font for every designer. It looks like a golden middle between strict and reserved traditional calligraphy and modern fancy handwriting with many twirlings. Again, using this font you will stay focused on the message expressed by letters, and not on the form of those letters. Anyway, Lainie Day just like any other calligraphy font is the combination of content and pure aesthetics.

  

By Graham Smith

In another free font exclusive on Noupe, we present Rubber Font, a neat display font created by Yiorgos Yiacos. Rubber Font is a working but limited version containing roman capitals, numerals and some of the points of punctuation. Rubber Font is available as a free download for personal use only below.

Designer Profile

My name is Yiorgos Yiacos. I’m an illustrator and graphic designer. I’m 31 years old. I live and work in Athens, Greece. I am also quite a nice guy, when you get to know me.

I am a co-founder and former member of the PoorDesigners creative studio in Athens. At the present I work as an Art Director at Cream Advertising company in Athens, Greece and also freelance under the alias TwelveTimesTwo.

Yiorgos Yiacos

About the Font

The font started as the solution to a problem. It was for a poster that needed all letters perfectly aligned in both horizontal and vertical axis. The poster got rejected but the few letters I designed then, evolved to a full font which I named rubber as for me it is as flexible as this material.

All capitals except (i) have the same dimensions and work best when all spaces between letters (horizontally & vertically) are equal. I recommend 31pt line width when using the font at 72pt. The values should be changed proportionally.

This sample version contains only Roman capitals, numerals and some of the points of punctuation. I have already designed the full version which I intend to later make available for sale. It contains lower case (naturally), but also the Greek and Cyrillic alphabets, full punctuation, ligatures, etc.

Anyone interested in it, please contact me at hi_there [at] twelvetimestwo [dot] com

Connect with Yiorgos

Website: http://twelvetimestwo.com

You can find my work at my site/portfolio and also at design communities such as Deviant Art, Behance Network, Dripbook, under the alias SirPrimate.

Font Licencing

All rights reserved by Yiorgos Yiacos aka SirPrimate aka TwelveTimesTwo. You may use the free limited version of Rubber Font (which was made by Yiorgos Yiacos available as an exclusive to Noupe) for non-commercial and personal purposes. You must contact Yiorgos Yiacos for use in all commercial purposes.

Font Distribution

Yiorgos Yiacos has made this font available as an exclusive to Noupe and as such, you are not permitted to re distribute this font, to supply it on CD or distribute it directly in other electronic form.

If you wish to link to this font in other ‘free font’ blog posts then please do so. Do not supply a direct download link, please direct your readers to this post only.

Download Rubber Font from Noupe

• Rubber Font

  

Searching for new fonts, whether they be serif, sans-serif or script fonts can take a ridiculously long time – time that should probably be spent working. This round-up showcases a great selection of script fonts to use in your latest design projects. Most of the fonts are premium fonts from as low as 8.95 USD, although there are a few free fonts among the pack.

We are proud to present to you fonts such as Memoriam (from 19.95 USD), Bello (from 60.00 USD) and ILS Script (free for personal and commercial use) as well as many, many others.

Excellent Script Fonts

Free Fonts

Moody Boys (Free for Personal Use – Contact Author for Commercial Use)

Honey Script (Free for Personal and Commercial Use)

Learning Curve Pro (Free for Personal and Commercial Use)

Quilline Script Thin (Free for Personal and Commercial Use)

SedonaScript (Free for Personal and Commercial Use)

The King and Queen Font (Free for Personal Use)

Jane Austen (Free for Personal Use)

Porcelain (Free for Personal and Commercial Use)

ILS Script (Free for Personal and Commercial Use)

Quill (Free for Personal and Commercial Use)

LDS Script (Free for Personal and Commercial Use)

Creampuff (Free for Personal and Commercial Use)

Jellyka – Estrya’s Handwriting (Free for Personal Use)

Ballpark (Free for Personal and Commercial Use)

CAC Champagne (Free for Personal and Commercial Use)

Saginaw (Free for Personal and Commercial Use)

Commercial Fonts

Liza Pro (From 60.00 USD)

Memoriam (From 19.95 USD)

PF Bodoni Script Pro (From 75.00 EUR)

PF Champion Script Pro (From 125.00 USD)

Whomp (From 99.00 USD)

Buttermilk (From 49.00 USD)

Aphrodite Pro (From 15.00 USD)

Blanchard (From 19.95 USD)

Saloonkeeper (From 20.00 USD)

Alpine Script (From 37.80 USD)

Bello (From 60.00 USD)

Cocktail Shaker (From 39.00 USD)

Candy Script (From 69.00 GBP)

Kinescope (From 29.00 USD)

Billabong (From 12.95 USD)

Dolce (From 49.00 USD)

PF DaVinci Script Pro (From 65.00 EUR)

Natalya (From 21.99 USD)

RadioTime (From 49.00 USD)

Xesy (From 19.95 USD)

Liebfraumilch (From 25.00 USD)

La Carte (From 29.00 USD)

La Macchina (From 20.00 USD)

Buffet Script (From 99.00 USD)

Cutiful (From 8.95 USD)

Almond Script (From 79.00 USD)

HT Maison (From 20.00 USD)

Suave Script Pro (From 49.00 USD)

Aquafina Script (From 59.00 USD)

Enamel Brush (From 8.95 USD)

Mousse Script (From 49.00 USD)

Further Resources…

• Beautiful New Free Fonts For Your Designs
• Beautiful Hand Drawn Typography
• Showcase of Beautiful Vintage and Retro Signage
• Typographic Design Patterns and Best Practices
• Guide to CSS Font Stacks: Techniques and Resources
• Rich Typography on the Web: Techniques and Tools
• The Ails of Typographic Anti-Aliasing
• 20 New High Quality Free Fonts

  

By Graham Smith

In another free font exclusive on Noupe, we present Tribbon, a tasty layered ‘ribbon’ style font created by Dominic Le-Hair. It has taken a few weeks of communications with Dominic to finally arrive with a interesting concept in font design. Tribbon is a working ‘ribbon’ style font, that consists of several layers and is available as a free download below. Tribbon is available in both TTF and OTF font formats.

Dominic also designed the popular ‘Clipper‘ font.

Tribbon Layer 1

Tribbon Layer 2

Tribbon Layer 3

Tribbon Layer 4 – Complete

Designer’s Profile

Dominic Le-Hair

I am a 32 year old Graphic Designer living and working in Peterborough, UK. I left Teesside University in 2001 with a BA Honours in Graphic Design.

I like to work on personal projects in my spare time as there are less restrictions than with most of the client briefs in my job. I try to be as original as possible with my work and like to occasionally combine hands-on media with digital techniques. I am inspired by designers who experiment with type, such as Craig Ward, Autobahn and Handmade Font.

How To Use The Font

The Tribbon font started as an experiment in Illustrator working with a simple custom brush I created. I used Myriad Pro Black as a loose basis for each character. The shadows were then added using a gradient overlay.

I was contacted by Graham who asked if I would be interested in creating a working font from my original work called Ribbon Alphabet on my Behance portfolio. I knew it would be a challenge to simplify it without losing too much detail. My solution was to break it up into three separate fonts (Tribbon A, Tribbon B and Tribbon C). These can be layered on top of one another to maintain the depth of the original. The fonts can be used this way in Photoshop, Illustrator, Indesign and QuarkXPress. Tribbon B can also be used on it’s own for a more simplified, 2D version of the original.

I named the font Tribbon as there are three fonts that resemble ribbons when combined (Tri + Ribbon).

Dominic has also kindly created a brief video on how to best use the Tribbon font. ‘How to use the Tribbon Font‘

Font Licencing and Distribution

All rights are reserved by Dominic Le-Hair. You may use Tribbon freely for non-commercial and personal purposes, such as creating a logo for a personal web site, free web design materials, goods or banners.

Please contact Dominic Le-Hair before using the fonts for commercial purposes, such as for commercial products, stores or companies logos, TV, books and magazines, or CDs.

Dominic Le-Hair has made this font available as an exclusive to Noupe and as such, you are not permitted to re distribute this font, to supply it on CD or distribute it directly in other electronic form. If you wish to link to this font in other ‘free font’ blog posts then please do so. Do not supply a direct download link, please direct your readers to this post only.

Download the font!

You can download Tribbon from our servers.