8/6/2019 Selecting and Combining Typefaces

1/5

Selecting and Combining TypefacesSusan G. Miller

One of the most often asked question about type is:Which typefaces work well together? Finding the right combination of typefaces can make the difference betweena good design and a great one. But with so many faces tochoose from, how do you decide which ones will look best together? Although typeface selection is a very personalsubjective decision, this paper will address severalstrategies that will help narrow down the search and ultimately help make the most effective type combinations.

INTRODUCTION

One of the document designers most important tools istype. Type is everywhere and most of us take it for grated,yet paradoxically, successful type design is one thatdoes not distract the reader. Type should work to make iteasier for the reader to access information, as opposed todistracting them with either the design of the typeface orthe combination of typefaces (1).

Type is the basic building block of any printed page or website. In almost all cases it is imperative to design with morethan one typeface. But how do you know which typefaceswork effectively together? When combining typefaces, thereis usually more than one element on a page even withstandard technical document that consist of plain body textthat typically includes headlines, subheads, captions,figures, and page numbers. Within these dynamics on thepage, a relationship is established that is either concordant,conflicting, or contrasting (2).

A concordant relationship occurs when only one type familyis used and allows the page to remain harmonious. The useof only one typeface may be all that is necessary for somedesigns that require a formal, quiet appearance without

much variety in style, size, and weight. Secondly, aconflicting relationship occurs when typefaces are combinedthat are similar in style, size, and weight. The similaritiesare disturbing because the visual attractions are not the sameas with concordant, but neither are they contrasting, so theyconflict or most of the time it looks like a mistake. Concordis a solid and useful concept but conflict should be avoided.The final relationship of contrast occurs when separatetypefaces are combined that are clearly distinct from eachother. The combinations of typefaces that achieve this level

of contrast are more visually appealing and attract moreattention than with a concordant relationship.

Type Characteristics It is important to gain an understanding of the characteristicsand terminology related to typography to be able to combineand mix typefaces together. To be able to understand thedifferences between typefaces, it is important to be able tosee the differences. Many typefaces will look similar to theunskilled eye at first glance, but in time it is easy to seehow they differ, but also understand how those differencesare important to the effectiveness and appeal of a particular job (3). Listed below are some common terms andcharacteristics to become familiar with before beginning

to select and combine type.

Font. A set of characters in the same size comprising all theletters of the alphabet in both upper- and lowercaseincluding all the figures and symbols of punctuation.

Typeface. An alphabet designed with consistent visualcharacteristics.

Type family. All the variations of a specific typeface design,such as italic, bold, extra bold, condensed, etc.

Stroke. The main line of a character. This line can appeareither straight or curved.

Thick and thin. The contrast in the thickness of the curvedstrokes.

x-heights. The height of lowercase letters. Specifically thelowercase x, not including ascenders and descenders. It isthe x-height that creates the impression of the fonts size.

Text Type (or body text). Type used for continuous reading,usually set between 9 and 12 points, depending on the x-height, column width, and other factors.

Display Type. Type used for non-continuous reading(headings, subheadings), usually set at 14 points and above.

Typeface Categories There are several thousand digital typefaces available andmany more being designed every day. Most typefaces canbe divided into the following seven categories: oldstyle,modern, slab serif, sans serif, fringe, script, and decorative(4). Figure 1 illustrates an example of each of the sevendifferent typeface categories. It is important to become

8/6/2019 Selecting and Combining Typefaces

2/5

aware of the similarities between broad groups of typedesigns, because it is the similarities that causes theconflicts in type combinations. This is why it is importantto understand the different typeface categories so whenselecting two or more typefaces for a specific use they areselected from more than one of the following differenttypeface categories.

Oldstyle. The oldstyle typeface category has a warm andgraceful appearance and is the best choice for settingreadable, lengthy bodies of text. The main body text of thispaper is set in an oldstyle typeface called Times NewRoman. Oldstyle typefaces always have serifs. The serifs of the lowercase letters slant and the serif connect to the mainstokes with a slight curve. Furthermore, the strokes of theletterforms make an overall gentle transition from thick tothin.

Modern. The modern typeface category is not very readableand is not the best choice for lengthy body text. Althoughmodern typefaces can have a sparkle and an elegant feel tothem, they also tend to have a harsher and colder appearancethan the oldstyle typefaces. Like oldstyle, modern faceshave serifs, but the serifs on all characters are horizontal andvery thin, with little or no curve where the serif meets thestroke. The strokes that create the letterforms changeradically from thick to thin.

Slab Serif. The slab serif typeface category also has serifs,and the serifs are thick, fat, horizontal slabs. The stokes thatcreate the letterforms may make a very slight transition fromthick to thin, or there may be no transition at all in somefaces. In addition, slab serif typefaces have a more

regimented and heavier appearance than do oldstyles.

San Serif. The san serif typeface category has no serifs atall. The strokes that create the letterforms have almost novisible transition from thick to thin. Furthermore, the sanserifs tend to have very large x-heights that create quite apresence on the page.

Fringe. The fringe typeface category is typically typefacesthat are distorted, deliberately trashed, and often difficult toread. But on the other hand they are very identifiable andfun to use. They are often referred to as grunge typefaces.

Script. The script typeface category is very easy to identifybecause it emulates handlettering in many varieties. Someof the most common varieties of script typefaces arecalligraphic as seen in wedding invitations and drafting as inarchitects drawings. It is not uncommon for some scripttypefaces to connect and for some to not connect. Similar tofringe typefaces it is important to remember not to overusescript typefaces.

Decorative. The decorative typeface category is typefacesthat create a definite look and emphasize the content.Similar to fringe and script typefaces, decorative typefacescan destroy a design if overused.

Oldstyle: Garamond

Modern: Modern

Slab Serif: Century Schoolbook San Serif: Arial Black

Fringe: Chiller Script: Edwardian Script

Decorative: Broadway Figure 1 Examples of typeface categories.

Combining Typefaces Some typography experts say that no design should usemore than two typefaces or families, but one should not feellimited by such an arbitrary rule. There are times when onetype family is sufficient and times when more than twotypefaces can be useful. When deciding how many faces touse, remember that the point of using different faces is toachieve some differentiation between them, for example,body text and headlines. If a design has very little text, thenthe variety of more than one typeface might not be needed,and the choice may be to work with just one type family. Onthe other hand, if a design has a lot of text or needs toproject more than one character, then the use of more thantwo typefaces may be more appropriate (5).

When working with one typeface it is important to considerselecting it from a type family with a lot of flexibility. Thisallows for variety without being concerned whether thetypefaces go well together. This variety and flexibility isfound in typeface families that offer several weights of thesame typeface. The use of typeface weights will be

discussed later in this paper as a solution for contrastingtype. Furthermore, the selection of two or more typefacesrequires a little more attention to make sure they are reallydifferent. Using two typefaces that look very much alikewill not allow the reader to tell them apart and will morethan likely look like a mistake. Since the point of using twoor more different faces is to draw some distinction betweendifferent type elements, using look-alike faces defeats thepurpose.

8/6/2019 Selecting and Combining Typefaces

3/5

Contrasting Type When combing one, two, or more typefaces or typefacefamilies together the designer must provide the reader witha clear differentiation between all the elements of type.This is achieved by creating contrast through the relativerelationships of size, weight, structure, form, direction, andcolor. A reader should never have to try to figure out what ishappening on the page. The focus, the organization of material, the purpose, the flow of information all should berecognized instantly with a single glance. The followingrelationships describe various ways type can be contrasted.

Size. A contrast in size is fairly obvious by utilizing a largepoint size with a small point size. As shown in figure 2 thecontrast in size of the top solution that combines 38-pointtype and 10-point type would be more effective than thebottom solution that combines 38-point type and 20-pointtype. To make size work effectively is important to create anobvious difference in type size.

TypefaceC A T E G O R I E S

TypefaceC A T E G O R I E S

Figure 2 Using type size to create contrast.

Weights. The weight of a typeface refers to the thickness of the strokes. The most common weights are light, normal orbook, semi-bold, bold, extra bold, and heavy. The differentweights available for the Franklin Gothic typeface familyare illustrated in Figure 3. When combining typefaceweights it is important to remember to avoid contrasting aregular weight with a bold weight. This combination isnever strong enough and a more effective contrast is alwaysachieved by combining a regular weight with a heavy

weight. An example of achieving the strongest contrastwould be to combine Franklin Gothic Book with FranklinGothic Heavy as opposed to combing Franklin Gothic Book with Franklin Gothic Medium or Demi. It is important toremember that contrast of weight not only makes pagesmore attractive; it is one of the most effective ways of organizing information.

Fra nklin G o thic Book

Franklin Gothic MediumFranklin Gothic Demi

F r a n k l i n G o t h i c H e a v y

Figure 3 Examples of varying weights available in thetypeface family Franklin Gothic.

Structure. The structure of a typeface refers to how it isbuilt. Some faces are built very mono weight, with almostno discernible weight shift in the strokes, like with most sanserif faces. Others have a great emphasis on the thick andthin transitions, like with most modern faces. And other arebuilt in-between. This why it is important to combine typefaces from two distinctly different categories as described

earlier because typefaces within the same category havevery similar structures that would not visually create enoughcontrast.

As shown in figure 4, the contrast in structure in the topsolution combines typefaces from two different categoriesthat would be more effective than the bottom combinationof typefaces from the same category. The first combinationmixes together the typefaces Times and Arial Black whichrepresent the categories of oldstyle and san serif respectively. The other combination mixes the typefacesTimes and Garamond which both fall into the oldstylecategory. Although they are different typefaces they have

very similar structures, which is why the combination of using typefaces from the same typeface category should beavoided. An easy way to choose contrasting structures is toselect one serif font and one sans serif font. Serif fontsgenerally have a thick/thin contrast in their structureswhereas san serif fonts are mono weight.

Typeface Categories

Typeface CategoriesFigure 4 Using type structure to create contrast. Form. The form of a letter refers to its shape. Typefacesmay have the same structure but they can contrast in form.An easy way to think of contrast of form is to think of capsversus lowercase and roman versus italic. When workingwith the combination of caps versus lowercase it isimportant to remember that words are recognized not only

8/6/2019 Selecting and Combining Typefaces

4/5

by their letters, but also by their forms, the shapes of theentire words. All words that are set in capital letters have asimilar rectangular form and are forced to read the wordsletter by letter which is why all caps is more difficult to readthan lowercase letters. Figure 5 illustrates the use of formwhen used in both uppercase and lowercase. The type in alluppercase has the same rectangular form as opposed to thetype in upper and lowercase. It should also be noted thatsize is the only other contrast added in this example.

TYPEFACECATEGORIES

OldstyleModern

Slab Serif San Serif

Fringe Script

Decorative

Figure 5 Using form to create contrast with type.

Direction. The obvious interpretation of using direction tocreate contrast with type is to rotate type vertically or on anangle. It is also important to keep in mind the aesthetics orcommunication of the piece when utilizing direction of type.Another way to create direction on the page is illustratedbelow in figure 6. The words Typeface Categories createsa line of type that has a horizontal direction and iscontrasted with the vertical direction of the listing of typeface categories in a thin, tall column. The verticaldirection is emphasized even more through the additionalline spacing. The contrast of size and structure are alsoutilized along with direction in this example.

Oldstyle

Modern

Slab Serif

T Y P E F A C E C A T E G O R I E S

San Serif

Fringe Script

Decorative

Figure 6 Using direction to create contrast with type.

Color. Typographers have always referred to black-and-white type on a page as having color. Color is created bysuch variances as the weight of the letterforms, the structure,the space inside the letters, the space between the letters, thespace between the lines, the size of the type or the size of the x-height (4). Color in black-and-white on the page notonly serves the purpose of contrast but also helps organizethe information. Typically, bodytext on the page gives theappearance of a gray color, which contrast with theheadlines and subheads that are given a stronger weighttypeface that creates a darker appearance. As shown infigure 7, the contrast in color is applied to the list of typeface categories through the varying weights of theletterforms. The type on the left creates the impression of alighter or grayer color as opposed to the darker black colorto the right.

Oldstyle O l d s t y l e

Modern M o d e r n

Slab Serif S l a b S e r i f

T Y P E F A C E C A T E G O R I E S

San Serif S a n S e r i f

Fringe F r i n g e Script S c r i p t

Decorative D e c o r a t i v e

Figure 7 Using color to create contrast with type.

SUMMARY

It is most important to become aware of the big picturetaking into account all the possible text elements that youmay need to use (body text, captions, headings, etc.) Belowis list of step to consider when combining typefaces forthese specific text elements.

Look for typefaces that look good together and try mixingserif and sans serif faces that relate to each other (similarfeel, good transitions).

Check to make sure all the members of the type familyare present and dont use the computers version of italic;use the type designers version and check to see that allthe characters and symbols you will need are present inthe font character set.

See how the document looks with various elements suchas the longest and shortest paragraphs, captions, headings,etc. and then try these elements in combinations.

8/6/2019 Selecting and Combining Typefaces

5/5

Most importantly, look for typefaces that are readable andfit the tone of the document.

A good rule of thumb is to never use more than threetypefaces on any page, and preferably to stick to only one ortwo. In selecting two fonts to use, its a good practice toselect one serif and the other from the sans serif family. Thisallows for a nice contrast, and so long as a few other basicguidelines are followed this will ensure that the page isattractive and easy to read. As a final point, some typefacesare so versatile that they can be used over and over for avariety of applications. Becoming familiar with these facesand knowing how to manipulate them for a range of effectsallows for handling almost any type problem.

REFERENCES

(1) Bastoky, G., Fundamentals of Document Design , WebSite: www.bastoky.com /, 2001.

(2) Williams, R., The Non-Designers Design Book,Berkeley, California: Peach Pit Press, 1994.

(3) Stizver, I., Type Rules: The Designers Guide toProfessional Typography , Cincinnati, Ohio: North LightBooks, 2001.

(4) Williams, R., The Non-Designers Type Book , Berkeley,California: Peach Pit Press, 1998.

(5) Brady, P., Using Type Right , Cincinnati, Ohio: NorthLight Books, 1988.

Susan G. Miller

Assistant ProfessorPurdue UniversityDepartment of Computer Graphics Technology1419 Knoy Hall, Room 331West Lafayette, Indiana 47907-1419765-496-1709sgmiller@tech.purdue.edu

Susan Miller received her Master of Science from PurdueUniversity and her Bachelor of Science in Industrial Designfrom The Ohio State University. Prior to joining the faculty atPurdue, she worked as a professional graphic designer for

eight years. While at Purdue she has won several local andnational awards including a bronze medal for Designer of theYear by the National Council for the Advancement andSupport of Education (CASE). Her work has also beenfeatured in Fresh Ideas in Brochure Design and Fresh Ideas in Letterhead Design published by North Light Books.