When and How to Mix Serif and Sans Serif

Draw the limit at two typefaces. Use either one sans and one sans serif, two serifs, or two sans. Using more than two typefaces can be distracting and draw attention from your actual text.

Use either one sans and one sans serif, two serifs, or two sans. Using more than two typefaces can be distracting and draw attention from your actual text. Choose typefaces that complement each other. Try not to bring unnecessary attention to the typefaces – you want readers to care more about your copy. The best way to do this is to choose faces that convey the same mood, while only choosing one that tends to grab attention.

Try not to bring unnecessary attention to the typefaces – you want readers to care more about your copy. The best way to do this is to choose faces that convey the same mood, while only choosing one that tends to grab attention. When choosing two of the same type, make sure they contrast with one another. If you want to use a fancier typeface, use that for the headline while leaving the body copy neutral. If you use a condensed, narrow font for the headline, use something more readable for body copy.

Appropriate Uses and the “Serif for Print, Sans for Screen” Generalization

Classifications

Serif

Old Style

Slanted crossbar on lowercase “e” Small x-height Little variation in stroke width (low contrast between thick and thin strokes) Dark color in relation to the color of the page

Transitional

Vertical or almost vertical axis Greater contrast between thick and thin strokes Abrupt, flat serifs where diagonal strokes meet Larger x height

Modern

Dramatic contrast between thick and thin strokes Vertical axis of curved strokes “Ball” shaped stroke terminals Abrupt, thin serifs Horizontal stress

Slab Serif

Heavy Thick serifs Low contrast between thick and thin

Sans Serif

Humanist Sans

Variation between thick and thin lines Calligraphic features such as extra weight in the curves Small x-height

Transitional

Vertical or almost vertical axis Limited stroke contrast Straight terminal strokes

Geometric Sans

Perfectly circular “o” Triangular peaks Simple construction Very little stroke contrast

Serif and sans serif stand off against one another in the argument over readability, legibility and relevance – but the truth is that each has its time and place. Further exploring the terminology and history of serif and sans serif can help you better understand their differences, similarities and how to pair them for your projects.The most commonly accepted uses in print include using serif for body text and sans serif for short bursts of copy like headings or captions. Sans can also be used for small text, because it doesn’t smear as badly. Serif is typically avoided for large signs or anything that requires large copy, because the extra emphasis is not needed with oversized text.Mixing serif and sans serif is chaotic and tricky in some cases, but following these key guidelines can help you get a feel for using them together to create stunning copy:Refer to Best Practices of Combining Typefaces for a more in-depth look on how playing around with serif and sans serif fonts.For decades, serif faces were considered all-around better choices for body text than the controversial sans serif. The characteristic details of serif faces are thought to cause each character to stand out more – therefore, they appear to be ideal for all body text. Theoretically, the eye can more easily discern each and every letter while gliding across the page. This is thought to contribute to legibility, which is defined as how easily each character can be recognized, and readability, which means the ease with which a reader can visually consume the overall text.With the advent of digital content, the tried and true rule about only using serif for dense text was somewhat overthrown. The logic is that screens are lower resolution than print, which means they cannot properly render the details of serif typefaces, and therefore make them less readable.Conclusive research proving differences in legibility and readability between these two types have yet to be established, even after decades of research. Even so, the traditional guidelines are still widely accepted. For consistency purposes, it may be advisable to continue following the guidelines. Familiarity contributes to legibility, and most people are now accustomed to seeing serif typefaces in print and sans serif typefaces onscreen.At the end of the day, serif for print and sans for screen is a decent, high level rule of thumb. This helpful infographic from Urban Fonts clearly lays out the most accepted uses and the logic behind them. Look here for more information on current practices.Typography is an art genre with its own rich, far-reaching history. The growing number of unique typefaces eventually called for a basic classification system. Since the 19th century, various classification systems have been devised, both formal and informal. However, the different types of serif can be more or less grouped into four primary categories: Old Style, Transitional, Modern and Slab. Sans serifs can be grouped into three primary categories: Humanist sans, Transitional sans and Geometric sans.Within each classification, the typefaces share characteristics such as stroke contrast and the shapes of certain characters. For an overview of classifications, check out this helpful type classification chart The defining characteristics of Old Style typefaces include:Old Style was developed in the 15th and 16th centuries, when printers began moving away from the heavy, barely legible Blackletter of the Middle Ages to something easier on the eyes. Old Style is an umbrella term often used to describe the subcategories of Humanist/Venetian and Garalde Humanist typefaces drew their inspiration from calligraphy, down to incorporating the angle and inconsistent strokes of handwritten letters. Garalde left the quirks of handwriting behind, but retained the other calligraphic qualities of the Humanist style, such as the tilted axis.Old Style typefaces are heavily used in printed material such as newspapers, books and magazines. They are often considered the best typefaces for large bodies of printed text, because each character is distinctive but not distracting.Examples of Old Style typefaces include Garamond, Centaur, ITC Legacy Serif, Caslon and Palatino.The defining characteristics of Transitional typefaces include: The Transitional style was established during the Enlightenment in the mid-18th century. It evolved from Old Style, and was no longer influenced by handwriting, but was instead developed to be neat and uniform.Typographer John Baskerville created a typeface that used finer strokes, which were more easily produced thanks to printing technology he helped create. His thin strokes were so fine that a critic said he was “blinding the nation.” While he faced heavy criticism, Baskerville also had prominent proponents of his work, including Benjamin Franklin.By moving away from the idiosyncrasies of human handwriting, Transitional style reflects the philosophies of the Enlightenment, during which scientific reason and discovery were valued above art and emotional experiences.Examples of Transitional, typefaces include Baskerville, Bookman, Times New Roman and Perpetua.The defining characteristics of Modern typefaces include:The first Modern typeface was developed by Frenchman Firmin Didiot in the late 18th century. Giambattista Bodoni, an Italian printer and type designer, then developed Didone, an iconic Modern typeface. Prolific in his time, Bodoni continues to be a prominent figure among those knowledgeable about typography.Also known as Didone, the Modern style takes the contrast between strokes even further than Baskerville. Moderns are now viewed as elegant and professional, but are not necessarily suited for large bodies of text because they do not lead the eye horizontally across the page.Examples of Modern typefaces include Bodoni Classic, ITC Fenice, Didot and Moderno.The defining characteristics of Slab typefaces include:During the Industrial Revolution, the Slab serif rose to popularity. Advertising became more common as companies were able to mass-produce products, and the Slab faces were created to be noticed.Slab serifs, also known as Egyptian serifs, were typically used for large copy in small bursts. Slab serifs can include modified typefaces of different categories, if the original face is given extra weight and thickness and made into a sort of attention-grabbing parody of itself.Today, Slab serifs are not exclusive to advertising as they once were. They include many typefaces of various weights, some of which are even acceptable for printing dense text.Examples of Slab serifs include Egyptian Slate, Rockwell and Clarendon.The defining characteristics of Humanist sans typefaces include:In the 20th century, Eric Gill adapted qualities from the Old Style/Humanist serif to develop a complete typographic family. Sans serifs had been used sparingly before the 20th century, but were still viewed as exotic when Gill crafted his typeface. He borrowed traits from Old Style, namely the resemblance to calligraphy.The large apertures (open spaces within letters such as “o,” “e,” and “c”) of Humanist sans typefaces allow the eye to easily move horizontally. Because of this, they are suitable for small sized copy and, depending on the format, large amounts of body text. Humanist sans typefaces usually allow for an easier read than the other classes of sans.Examples of Humanist sans include Gill Sans, Calluna, Myriad and Calibri.The defining characteristics of Transitional sans typefaces include:Also known as Anonymous sans and Neo-Grotesque, this style was first notably used by Max Miedinger, who developed Helvetica in 1957. These straightforward, uniform typefaces are the most commonly used sans serif faces.Examples of Transitional sans typefaces include Bell Centennial, Helvetica and Arial The defining characteristics of Geometric sans typefaces include:A far cry from the calligraphy-inspired Humanist sans, the Geometric sans typefaces are crafted using geometric shapes. Developed by Paul Renner in 1928, the Futura typeface is often considered the launching pad for sans serif use.Geometric sans typefaces are utilitarian and consistent, and have a very modern look. However, they lack the warmth and legibility of the Humanist sans, and are not ideal for body text.Examples of geometric fonts include Futura, Erbar and Century Gothic.