July 21 2021

What the Font is Typography?

When working with a designer, you will hear the term typography thrown around and if you haven’t had any designer training, you may not in fact fully understand what exactly typography is and why it can be such an important element of your brand. Selecting brand fonts is a critical part of representing your brand, and using these fonts across print and web have many considerations. Let’s explore what you need to know about typography so you can impress your design friends at your next cocktail party.

Let’s Start with the Basics

The word typography itself, is the broad term used to describe the style and appearance of written language across various content types. But before we get into the good stuff, let’s look at some of the main buzz words:

  • Typeface: more commonly referred to as Font Family, is a family of letters and characters that are designed to work together to form words and numbers, i.e., Lato.

  • Font: font is made up of a specific set of distinct, stylized letters within a typeface, i.e., Lato, Bold, 24 pixels.

  • Font style: refers to the specific variant of a typeface’s appearance, such as Lato, Regular.

  • Font weights: the weight refers to the thickness of the letters i.e., Thin, Semibold, Bold, and Heavy.

  • Font width: the width refers to the width of each letter i.e., Condensed, Narrow, Extended, and Expanded.

image of font components
  • Font decoration: describes embellishments to lines of text such as underline and strikethrough text.

  • Font effect: describes common modifications such as outlines and shadows.

  • Serif font: serifs themselves are the small feet-like elements found on the ends of letters in serif font families. Typefaces that have serifs on the ends of all its letters are considered serif fonts. Some of the most polar serif fonts are Times New Roman and Garamond.

  • Sans-serif font: the opposite of serif fonts, these fonts do not have serifs. Some of the most popular sans-serif fonts are Arial, Proxima Nova and Avenir.
    serif vs san serif fonts
     

  • Letter Spacing: commonly referred to as tracking, refers to the space between the widest points of each character, often applied to the entire word.

  • Kerning: refers to the spacing between two letters or characters.

  • Leading: also commonly referred to as line height and line spacing; leading refers to the vertical space between lines of text. Interestingly, this term comes from the piece of lead that typesetters used to put between lines of text when hand setting type.

  • Line break: a line break ends one line of text and forces the beginning of the next line.

  • Paragraph break: creates extra visual space to clearly delineate the end of one paragraph and the beginning of the next.

​Now that we have down some of the basic lingo, let’s chat about how to get the most out of typography in your digital presence.

Paid vs. Open Source Fonts for Your Website

When deciding on a font for your website, it is important to balance how it is consistent with your marketing material, with ensuring it is a web safe font. Fonts that are not web safe will not render properly for your users on the many platforms and devices. This leaves two options: purchasing the web font package of your brand font, or using a free, web safe alternative.

Paid fonts must first be purchased through a verified font vendor and need to be embedded into the site’s code and stored on a server. When the page loads, the code pulls those fonts from the server and renders them on each user’s screen. In most cases, you need a special web font license which may charge on a per view basis depending on where you purchase the font. So, make sure to read the licensing carefully. Paid fonts give you a highly branded experience with a custom look to your website, but they come at a cost and in some cases, can slow the load time of a site.

There are a handful of fonts such as Arial, Times and Verdana that are universally available on all devices. However, these fonts tend to be used on so many websites and you may find they lack the custom feeling you are looking to achieve. On the other hand, Google Fonts provides a plethora of free, web safe options. With the help of a designer’s eye, you can find alternatives that very closely match your existing brand fonts.

Why We Love Google Fonts

We covered the fact that Google Fonts are all free and web safe. But they are also easy to use by designers and developers alike; not to mention, they are Open Source. When fonts are Open Source, there are no limitations on their usage. It means that you can use the fonts privately or commercially in print, digital and any other materials you can think of. Say goodbye to licensing and restrictions!
 
Google Fonts are also automatically optimized to decrease load time. As opposed to storing the fonts on a server, the Google Fonts API pulls the font files into the browser and performs a check to deliver fonts in the best optimized file format for the operating system and browser you’re using. So no matter what device you’re on, your desired fonts will always render quickly and consistently.
 
With over 1,000 free font families at your fingertips, it can be hard not to go wild – at least for us font-obsessed designers anyway. We recommend using one to two font families maximum – for example, one for headings and another for content. However, with the right use of font size, weight and color you may achieve the perfect look with just one font family. Restricting the use of font styles in your chosen typeface to 2-3 is highly recommended to keep page load times down.

If It’s Not Readable, It’s a Bust

You’ll want to make sure that your content is readable by all users. Here are some helpful steps you can take to ensure a smooth read:

  • Font Choice. Choose a typeface that is clear and legible.

  • Font Size. Depending on your typeface, 14 – 16 px are common effective sizes, but do us all a favor and never go smaller than 12px.

  • Line Length. Limit your line lengths to 45-75 characters – too long and it’s hard for the user’s eye to track to the next line.

  • Headings. Use headings to create hierarchy. Heading styles should stand out from body text by larger size, weight, style, and/or color.

  • Line Height. Choose a line height based on the size of your type that makes it easy for the eye to know where to fall next when the line breaks. A line height around 150% of the font size you’re using is a good rule of thumb.

  • Keep it Short. Avoid lengthy paragraphs or blocks of text. Users are more apt to read short, digestible chunks of content… like these bullets!

  • Color Contrast. Ensure the color of your text relative to its background is compliant with current WCAG 2.1 ADA standards and has a contrast ratio of at least 4.5:1 and 3:1 for large text. Large text is defined as 18.66px and bold or larger, or 24px.

fonts that are readable

Typography that Elevates Your Brand

When done well, typography can elevate your brand and set it apart from the crowd. There are innumerous creative solutions – hero fonts, bold, creative typefaces, fixed text with scrolling images, vice versa, and expressive typography just to name a few. Let’s look at a simple example. Well thought out use of thin and bold styles mixed in one sentence can work their magic to create emphasis and evoke personality.
fonts and emotion
Even though the words say exactly the same thing, the second uses typography to its advantage and effectively elicits emotion.
 
Don’t just limit type to plain old left-to-right reading either. When thinking outside the box, type can effectively be used as a design element. By mixing photography, graphic elements, and large typography, you begin to see how hierarchy can be built, brand recognition strengthened and visual interest conjured.

font eample

If you’re feeling jazzed up and want some help packing a typographical punch into your digital brand, give our design team a shout.
 

  • Branding
  • Website

posted by
Kristen Curren
Kristen Curren

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.