a crash course in typography: principles for …sheltonography.com/resources/articles/a crash course...

6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

A Crash Course in Typography:Principles for Combining TypefacesCameron Chapman

When combining typefaces, there are a couple of important principles you’llneed to keep in mind, namely contrast and mood. Effectively combiningtypefaces is a skill best learned through practice, and trial-and-error. Onceyou’ve mastered the principles covered here, you’ll have the tools you need totry out combinations while making educated guesses about what will andwon’t work together.[fblike]Here, we’re mostly covering combining two typefaces, as you would for bodycopy and headlines. In the next part, we’ll cover combining more than twotypefaces for things like navigation, image captions, and more.

Contrast



Contrast is one of the most important concepts to understand when itcomes to combining typefaces. Without proper contrast, typefaces tend toclash, creating a random, scattered look to your designs (and not in a goodway). Creating proper contrast relies on a few principles, all of which arediscussed below.

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

Weight

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



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



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 italicstyles. Underlines are also used, but in web design, they should only be usedfor links (otherwise, they’re confusing). Other decorations include things likeoutlines or drop shadows, both of which can be used to unify varyingtypefaces.



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



Scale and Hierarchy

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



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



Classificiation

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



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



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



Structure

The structure of a typeface plays a huge role in how it works with othertypefaces. You either need to choose typefaces that have very, very similarstructures, or very different structures. Letterforms that are only a bit similarare going to clash. Typefaces that are very different in other ways can beunified 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 orother factor (such as x-height). It’s better to go with wildly differentstructures 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 ofcolor and texture can do wonders. For example, when you need to addcontrast among typefaces that are nearly identical (or within a single typefamily), changing the color of some elements instantly adds interest. Addingtexture has the same effect.



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

Extreme Contrast

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



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 toclassic, or anything in between. This is where a lot of people run into troublewith combining typefaces. Selecting typefaces that not only have similar (orcomplementary) moods, but also have moods to match the project you’redesigning is crucial.



Examples

Oak Street BootmakersOak Street Bootmakers Uses a combination of Hoefler Text and FranklinGothic, both of which are very classic typefaces. It creates an image that issteeped in tradition.



Pound & GrainPound & Grain combines two serif typefaces, as well as a sans serif on theirhome page. The two serifs work well together because they belong to differentsub-classes.



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



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



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



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



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



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



47 Degrees47 Degrees combines LeagueGothic with ChunkFive and Helvetica for a verymodern, casual style. They also use Museo300 sparsely on their site, whichadds more visual interest.



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



More Resources:

Typographic Contrast and FlowFrom WebDesignerWall. Covers the basics of contrast in typography.Typographic Contrast and the WebA very comprehensive aritcle that covers the basics of typographiccontrast as it pertains to web design.Focus on Typography, Part 1: ContrastFrom SitePoint, this article covers all the basics of contrast, fullyillustrated.



A Guide to Web TypographyA fantastic, comprehensive article covering web typography from I LoveTypography.29 Principles for Making Great Font CombinationsA list-style post that covers some excellent rules for combining typefaces.

(ik)[fblike]

Subscribe To Our Newsletter

It's full of all our latest tips and tricks

Join our monthly newsletter by signing up below an get more interestingcontent like this one.

Fonts / Typographytypography

a crash course in typography: principles for …sheltonography.com/resources/articles/a crash course...

Documents