Serifs are the projecting lines that come off of fonts. Serif fonts are generally used for emphasis and are thus more likely to be used for posters, titles or headlines. Sans serif fonts have a rounder look and are often considered to flow more easily, making them popular in larger bodies of text, on websites or in print which is going to be smaller. With smaller print, serif fonts can look distorted, as the serifs do not show up properly or may disappear altogether in some places.

Different types of typography can be used effectively together to make a design piece stand out or to create a slightly unique slant to large bodies of text. For those interested in layouts and spreads for newspapers, booklets or magazines, it is worthwhile knowing which sans serif and serif fonts go well together in order to have more options when it comes to designing the layout from the typography up. An example of a company that uses serif and sans serif fonts well in their design is Elanders. On their main content pages, they use a range of bold and thin sans serif fonts for different headlines and serif for their content – paragraphs, lists etc.

It is important to bear in mind, when combining fonts, that they can have as much to do with how your work is perceived as the images you put in. Fonts have personalities and create a certain feeling in the viewer just as images do. Crowding too many fonts, or fonts which look too dissimilar onto a page will look messy and amateurish. At the same time, playing it safe and sticking to just one font family can make a design look safe and thus a little boring. Try to stick to two fonts for plainer layouts, whilst you can be a little more adventurous with more playful designs.

If you are going to mix serif and sans serif fonts then you need to be clear on each font’s purpose before you begin. This will mainly depend on the work you are using the fonts for, but the rules remain the same once you have chosen a purpose for each font. If you have chosen a font for the main body text then stick to it throughout the entire layout or design. You can then use different fonts for headings and sub-headings, but for subsequent sub-headings you will have to use your original sub-heading font again.

When you are choosing your fonts you are looking for fonts which share similar qualities for a more structured look, or fonts which contrast for something a little more artistic. Bear in mind that if you are going for fonts which look similar you will need to avoid going for fonts which look too similar, as this undermines the point in combining fonts in the first place. If you mis serif and sans serif then you will find differences, but just ensure that these are notable enough to create an interesting look that will compliment your piece.

Here are some of the best combinations of sans serif and serif fonts I have found within the Google Web Fonts database and Typekit.

Myriad / Minion

font1

font2

Caslon / Franklin Gothic

font3

font4

Garamond / Nimbus Sans

font5

font6

Rosewood Std Fill / Letter Gothic Std

font7

font8

Futura / Minion

font9

font10

Liberation Sans / Garamond

font11

font12