Introduction to Typography

A typeface is commonly called a Font, which what you'll see at BeFunky. Technically, typefaces are a collection of fonts, where the overall design is the same but vary in styling. Times New Roman or Papyrus, for example, are typefaces. Times New Roman, Bold, Size 12, would be a font.

Intro.png

Despite this technicality, outside of the professional graphic design world font is used as a universal term for the name of a typeface. In BeFunky when we refer to adding your own fonts, we're referring to the addition of a typeface into your collection.

Typographic Classifications

There are three main kinds of typefaces you'll see used: serif, sans-serif, and script (or decorative).

Serif_Font.png Serif typefaces are named after the extensions at the end of a character line, which are called serifs. Times New Roman is the most well-known example of a serif typeface.

Sans-Serif Typefaces

Sans_Serif.png

Sans-serif typefaces lack the serif extensions. Sans-serif has quickly become one of the most popular styles of typefaces to use, based on its minimalist qualities and readability. 

Script.png

Script typefaces often emulate the look of hand-written text, imitating varying thickness and fluidity.

Their appearance is more casual and informal, often giving the feel of something hand-crafted and personal. Scripts are typically decorative and should not be used for longer paragraphs of text.

Pro Tip: Design theory recommends using a maximum of three fonts in a project, but preferably two. More than this and your design will be cluttered and hard to read.

Pairing Different Styles of Text

A good rule of thumb when pairing typefaces is to use one style for header and one for the body. For example, try a sans-serif header with a serif body, or a script header with a sans-serif body. Scripts or decorative styles work well for a header font, but should not be used in the body text. 

Pairing Different Styles of FontsText Hierarchy

Similar to pairing different typographies, you'll generally want to keep your text styles following the same patterns depending on where they are in the text. For example, all headers are bold and size 16  and body text is size 11, with no additional styling. This creates a streamlined look in your design that makes it easy to follow.

Letter Spacing and Line Height

Letter spacing, not surprisingly, refers to the distance between the letters in your text box. This term is also called kerning in the professional design world.

Line height is the space between lines of text. 

Letter_Spacing.png

In BeFunky, you can control both of these by clicking on your text, then in the Text Properties menu click on the Spacing icon next to the color selector. You'll see adjustment sliders for both Letter Spacing and Line Height. Move them around until you get the results you're looking for. 

Takeaways

Understanding typography allows you to take your designs to the next level. By learning the basics you can be free to express yourself (or your brand) while following some simple rules to keep it looking clean and professional. While designing your text, keep the following priorities in mind:

  • How readable is my text?
  • Is my text styling consistent?
  • Do my text styles complement each other?

Learn more about using the Text tool and text customization options and get started with your next creations!

Looking for more inspiration? Check out another tutorial:

2 out of 2 found this helpful