As discussed in other videos, the main two kinds of fonts are serif and sans serif. Remember serif fonts have small finishing strokes or flourishes at the end of the letters, whereas sans serif fonts do not have these small finishing strokes. So with those differences in mind, what are the best ways to pair these fonts? Let's take some time to look at a few options. The option on the left mixes a serif font, but it's a bit more decorative type. Then the body text is a sans serif font, but it too seems a bit more decorative. Between these two options, and if they were the only choices we had, the one on the right might be the better choice. Mainly because the sans-serif body font is more readable, but I'm still not sure it is all that legible or really a font that anyone won't want to read for too long. As for these two options, we pick the same serif font ChunkFive for the header of both. The body copy on the left is a serif font mixed with a serif header, and it's not that mixing two serif fonts is bad, it's just that the decorative flourishes or feet can play against each other and just offer well, to much flourish. The body copy on the right is set in a sans serif font with a serif header. This is a bit better but as a general guideline, serif fonts are a better option for long blocks of copy because they are more anchored to that imaginary baseline. In both of these examples we have opted for quando or Helvetica. This is a go-to font when it comes to picking a sans serif option. There's even a documentary film for this font. Touting the love of this clean, well-used, and much loved sans serif typeface. But in the left option the header is a bit smaller to stand out in comparison to the body copy point size used in this example. Headers are supposed to break a copy or draw attention to something, which is done better in the right side option where the header is set in 36 points. Once again, the sans serif font Helvetica has been used as a header in both of these examples, this time in the same point size. The one on the left is used with a sans serif font for the body copy while the one on the right uses a serif font. The right one is a good combination of Helvetica and Georgia, or a sans serif font for the header and a serif font for the body text. The reason a serif font is usually a better choice for body copy is because while the baseline is invisible, the serifs in a font like Georgia have the illusion of a baseline, anchoring those flourishes to the text on that imaginary line making it more readable. All those font pairings to say, if in doubt, use a sans serif font for headers, and a serif font for body copy. This is not a rule because graphic design is an art in which rules are often broken. But it is a safe bet guideline to follow when looking for ideas on fonts to pair. Let's look at a few more go-to font pairings. You'll notice in the next few slides these examples use a sans serif font for the header, and a serif font for the body copy. Putting Helvetica and Garamond together is mixing a mid-century modern typeface, with the century's old typeface. Helvetica is used in this headline. It was developed in the 1950's and it has been very popular ever since. It is appreciated for its simplicity, yet sleek and balanced lines, and primarily balanced vertical and horizontal strokes. There are many font variations to Helvetica, from light to compress, to bold and oblique. No matter the variation or language this font is designed with, Helvetica holds up well and has proven time and time again to be both legible and readable. Garamond on the other hand has been around since the 16th century, making it a timeless centuries old serif font. It is thought of as elegant and classy, but without being overly ornate or showy, the thin and delicate lines of Garamond make it look similar to handwriting. With soft rounded serifs that anchor it to the baseline, and also curve back into the letters, features that add to being both legible and readable. Another option Futura, is a versatile typeface that is almost as popular as Helvetica. It is a geometric sans serif font based entirely on forms such as triangles, squares, and near circles. The stroke weight is almost even throughout each letter, and Futura is also known for its long ascenders such as the d and l, noted in the headline of this font pairing. In this example, the serif font used in this pairing for the body copy is Times. Starting in the 1930's, this font was designed to be used in the Times of London newspaper, thus giving the typeface this name. It was designed to be a text for reading making it safe font to pick when in doubt. Times was and still is a popular font among commercial printers, and has always been a font included on programs ever since personal computers were first introduced. Franklin Gothic has been around since the Industrial Revolution, and was one of the first fonts for the international typeface corporation to design for use with personal computers at the very beginning of the digital revolution. This versatile sans serif fonts comes in medium, demi, and heavy as well as condensed ways. Baskerville has been tested over and over and found to be a trustworthy serif font, but it comes and goes in popularity. It was designed way back in 1757 by John Baskerville, a professional writer who wanted to make a more legible typeface for reading books. Baskerville uses both thin and thick strokes, with sharp high-contrast formation of letters. These varied examples of font pairing leads us to discuss the font hierarchy. Hierarchical uses of typography, is an organizational tool or even a roadmap that guides the reader through a well-designed piece. It is also a special element for designers to consider, keeping in mind the flow of type and touch to the level of importance in a piece. For instance, the far left column has no hierarchy, making it hard to know the difference between the form information being presented. The second option has limited hierarchy but at least making the header all caps and subhead, varies it up a little bit. The third option is getting better but the font is all set in the same point size. The last option is much better in using various sizes and weights of fonts to guide the reader through the story. Here's an example of a three level hierarchy used in a newspaper. Generally Level 1 typography will be the most important content or information that the reader wants to read. This should be the most immediately visible typographical element in your design. Level 2 elements usually help organize your design into sections or groups of related information. They shouldn't stand out as much as your level 1 type, but should clearly direct readers to the different parts of the design and help them navigate it easily. For the text-heavy layout such as news stories, newsletters, or blogs, the third level of type is generally the meat of the design. This is where the copy or the actual story lives. It could be long or short, a whole article, a short message, a brief description, but the primary concern for this level is that it's easy to read since the font size will likely be somewhat small to accommodate large paragraphs of text. Here's another example of a three-level hierarchy that uses two different kinds of font. The level 1 here is a large main headline. This could be in all caps or title case such as this example, where the first letter of each word is capitalized, except for certain small words such as article and shorts prepositions. Level 2 is a smaller secondary headline. Keep in mind you could have two-level hierarchy and skip this level. But the first or second levels are used by readers to skim and determine what stories they want to be fully read. The final level contains the block of copy, or the actual article, or longer story being told. All of these font pairings in hierarchy pertain to printed items. Back in the day a type or font foundry was a company that designed and then distributed typefaces in metal casings. Luckily today, commercial printers and even online sources have more streamline methods of printing words and images on paper without the metal casing of letter forms. But that is paper printing. What about translating print and fonts to web fonts? What happens to pairing in hierarchy when the computer screen is involved? Let's take one font for example. A centuries old reliable Garamond. That's Claude Garamond man himself on the right who created the self name font back in the 16th century. As we've covered earlier, Garamond is an elegant, classy font, with thin and delicate lines and soft grounded serifs that curve back into letters. All of these characteristics make it readable and legible font, but for printing. As the printing process developed, so did Garamond with a few tweaks throughout the centuries by various type foundries and typographic design companies, to keep up with printing and then computer needs. But what happens to some font such as Garamond when we go from the printed page to web uses? Unfortunately for some fonts that are great for printed materials, it's the same elegant and classy characteristics that make Garamond less user-friendly and less readable as a web font. For instance, the eye of the lowercase e is already smaller in Garamond than a font such as Georgia, and the x-height is also lower. So when trying to be consistent and font choices and pairing, Garamond just falls apart on the web. It is a great print font but becomes illegible when used on some webpages with the counterspaces between some letters. Luckily we have some sources to research when picking fonts for print or fonts for online news. One of those is Google Fonts. Their tagline is making the web more beautiful, fast, and open through great typography. All the fonts available online through Google Fonts are both print and web safe, making them both legible and readable. Users can isolate serif and sans serif fonts, as well as variations on thickness, width, or height of the available typefaces. Font families from Google Fonts can be downloaded to your computer to use in mockups, documents, and websites. If you are an Adobe Creative Suite user, Adobe Font formally Typekit is a subscription-based online service that offers access to a library of Adobe friendly fonts. Adobe products already come with tons of fonts loaded in there design, but Adobe Fonts offers access to even more fonts that can be downloaded and accessed throughout all your Adobe programs. So whether it be print fonts or web fonts, remember, graphic design is telling a story by both using images and text. Therefore, there's much more to determine fonts to use from discovering what fonts pair best and designing a font hierarchy that will be both legible and readable.
