Skip to Main Content

Designing an Infographic: Typography: All About Fonts

Typography & Types of Fonts

One thing you want to reduce when designing an infographic is text. Besides, using too much text defeats the intent. Titles, headings, and a few concise captions are a good formula but besides that, remove as much text as possible. People don’t read infographics expecting to read an article.

Typography can make or break a design of any type, though–infographics included–so it’s important to touch on it. Remember the rule of three that is used in design? It is recommended to use three fonts in your design:

    One for your title/header, one for your body, and a third for flavor/accents.

The title is the ideal spot to use an interesting font that serves as a visual metaphor for your data. Be careful it doesn’t distract from the information it’s trying to highlight. Next is your body font, which should be both minimal and legible. Decorative fonts are for headers only, if used at all. Finally, the accent font, if used, is for captions and subheadings. Your accent font should be somewhere between your title and body font. You don’t want a completely decorative font, but you don’t want one too simple either.

If your infographic will be online and in print, you will want to check how your fonts look on both the computer screen and printed out on paper because sometimes what looks impressive onscreen doesn’t render as well to print documents and vice versa.

The three main types of fonts are serif, sans serif, and script.  Each type of font has its uses, and it is important to consider what your theme is and what message you are trying to send when designing your piece. Think of your theme when using multiple fonts or font families as well, you want everything to coordinate. 

When designing your infographic consider which sections are the most important and what you want to highlight. Essentially you will be establishing a hierarchy with your fonts for your viewers to be able to easily interpret your infographic.

  1. The headline will be your largest font.
  2. The subtitle should be in the same font but in a smaller point size.
  3. The body text should be a simple, readable font in a modest size–somewhere in the teens is good for most situations depending on the size of your piece.
  4. Chart labels can be the same size as the body text, but the same font is optional. You may want to use a different one to make your design more visually interesting.
  5. Notes and sources will be your smallest font. A lot of the time, it’s better to put this after the infographic itself so you can directly link to your sources. However, for the sake of providing proof to people who will only read it via social shares, it often takes the form of small text, with complete URLs, placed in the bottom right-hand corner.

Guest. "7 Essential Rules to Create Infographics." Venngage, 14 Nov. 2024, https://venngage.com/blog/ 

Serif Fonts

Serif

      -Originally used in bodies of text, but not as accessible as sans serif fonts

           -Now typically used for headlines

       -Examples of serif fonts: Times New Roman, Georgia, Baskerville Old Face, and Rockwell

Serif fonts are named for the little extending sections on the letters. These little design ornaments tend to give the fonts a look as if they have feet.  These fonts were originally used in bodies of text, but now are typically used for headlines because of their power and presence.  Some common examples of serif fonts are Times New Roman, Georgia, Baskerville Old Face and Rockwell.

Serif vs. Sans Serif

Besides the difference of feet, serif and sans serif fonts portray different emotional cues as well. Serif fonts give off the feeling of being stable, responsible and dependable.  Where as, sans serif fonts feel more modern, relatable and easygoing. The differences in their personalities affect your design. The same qualities that viewers use for your fonts subconsciously continues to the rest of your design piece.  Making it very important to choose your fonts carefully.

Velarde, Orana. "Serif vs. Sans Serif: How Are These Fonts Different?" Visme, 18 Aug. 2022, https://visme.co/blog/

San Serif Fonts

Sans Serif

     -Used for bodies of text and captions

      -Examples of sans serif fonts: Arial, Calibri, Century Gothic and Tahoma

Sans Serif fonts are named essentially “no” serif, since they do not have serifs on the letters.  These fonts are typically used for bodies of text and captions because of their high legibility and accessibility. Some common sans serif fonts are Arial, Calibri, Century Gothic, and Tahoma.

Importance of Choosing the Right Font

Your strategy should start with thinking about the purpose and emotional aspects of your research and the audience. With that information, you can create an identity of your visual brand to build a design identity. Colors and textures are a part of that identity, with typography taking up a large portion.

We've discussed the variations between serif and sans serif, but the personality attributes apply to all styles of typography. The visual and subliminal stories that fonts express are the spirit of a brand.

When choosing the font for your next design project, deciding between serif and sans serif is imperative. To select the correct one, contemplate each font style and how it correlates to your design. Choose a couple of options in each style using the brand name or content in the project.

Just as colors and shapes affect the story and message in a piece of content, so does the font you pick for a design.

Velarde, Orana. "Serif vs. Sans Serif: How Are These Fonts Different?" Visme, 18 Aug. 2022, https://visme.co/blog/

10 Commandments of Typography

Script Fonts

Script

     -Used for wedding invitations or for formal functions to show elegance

        -Examples of script fonts: Edwardian Script, Bradley Hand, Lucida Calligraphy and Freestyle Script

Script fonts are typically used for wedding invitations or for formal functions to show elegance.  Some common script fonts are Edwardian Script, Bradley Hand, Lucida Calligraphy, and Freestyle Script.

Script Font Example

It is not wise to use script fonts for bodies of text or throughout an entire design.  The old adage “less is more” applies here in more ways than one.  Common misconceptions of script fonts are they give a design elegance or the designer wants the flyer to "look pretty." 

But if you use these fonts in bodies of text it actually makes it much more difficult for the viewer to read, it can make the design look too busy, and can frustrate some viewers, especially those who might have visual problems. Let’s look at an example. 

Here we have two Instagram posts. The example on top uses a flowy script for the quote and the tagline.  The quote is difficult but mostly legible, the tagline is almost illegible.  In our example on the bottom though, there is only a script font on the quote in a heavier script which makes it much easier to read, and the tagline is script-free, making it easier to read as well.

                        

Font Families

Font Families

     -A font with multiple type styles

      -Create variety, but maintain unity

      -Examples:

>Arial: Black, Narrow, etc.

>Franklin GothicDemi, Medium, etc.
>Gill Sans: Condensed, Ultra Bold, etc.
>LucidaSans, Handwriting, etc.

Font families are when a font has multiple type styles within it.

Using font families is a good way to have variety in your design, yet maintain a cohesive piece.

Some examples of font families are Arial, Franklin Gothic, Gill Sans and Lucida.

 

Font Families Example

For our example of font families, we have two flyers, one is successful and one is not.  The flyer on top is not a successful flyer.  It is not accessible, and uses multiple fonts unsuccessfully. The flyer on the bottom uses the font family Gluten, using Gluten Medium, Gluten SemiBold, and Gluten Bold.  This creates a more cohesive flyer that is more accessible and easier to read.

Multiple Fonts

Common misconceptions…

     -More fonts=more interest

     -Variety is the spice of life

Multiple fonts can be used…

     -Sparingly

     -When using different typefaces within a family

Using multiple fonts is usually not a good thing.  Common misconceptions about using multiple fonts is that with the more fonts you use, the more interest you create in your design.  Others follow the adage that variety is the spice of life.  While have a little spice is good, too much can be overwhelming.

Multiple fonts should only be used sparingly.  Most of the time when you use multiple fonts it will be when you are using different typefaces within a font family.

Multiple Fonts Example

Here we have two business card designs using multiple fonts. In the top design, you can see it uses different fonts for each section of text.  The fonts chosen do not go together, are not accessible, and because of these factors make the card hard to read.  There is also color issues at play here. The design on the bottom uses three fonts, (magic number), for the design as well, but the difference is the choice of the fonts.  In the bottom business card, the fonts chosen are accessible, easy to read and flow well together.  The color issues have also been corrected in the bottom card.

 

Font Palettes

Here is an article from Canva on selecting the perfect font palette for your design.

Fonts can cause a design to be eye-catching, explain a brand precisely, and get the theme to spring out of the design, especially when utilized with purpose, style and attention. Design success is not achieved without the understanding of the art of fonts.

How to Select and Pair Fonts in Your Design

Font Psychology

Font psychology is the study of how typography can change the mind, persuading decision-making and emotional cues. The word font in “font psychology” is a resolution for ease; the correct encompassing word is typography. In formal terms, a font is only the collection of letters in a certain weight, bold or italic. The entire assembly in all weights and variations is called a typeface.

Describing the effects of font psychology is best done visually. Look at the image below.

The wording “You’ll always be mine” has a different connotation when written in a script font versus in a bloody, handwritten one.

Memes like this one have traveled the net for a while, giving designers a laugh. They're also great examples of how two fonts can carry different meanings, even if the wording is the same.

Velarde, Orana. "The Ultimate Guide to Font Psychology." Visme, 13 Jan. 2022, https://www.visme.co/blog.

References

Images designed by April K. Miller, Access & Outreach Services Librarian