Northern California’s Results-Driven Web Design, Web Development Digital Marketing Firm

EvenVision | A Northern California Creative Web Agency

Our passion is putting the web to work for you.
Feature Image for EvenVision's Blog post on Type

Intro to Typography

  • Josh Nelson profile picture
    Marketing & UI Designer
    Josh is a native Northern Californian UI Designer with a knack for creating beautifully clean designs and brand...

Typography has the power to clarify messages, and make them more effective in communicating ideas.

 

What is typography?


Often in the web and graphic design worlds, typography is used as a catch phrase - a buzz word, but most people have no idea what it means, or why they should care. Consider this a beginner’s guide to Typography, why it matters and how it can help.

Typography is a subject people can spend years studying, but we will boil it down to this definition: “typography is the expression of a letterform or word and its accompanying arrangement.” Take a look at the example below: 

Example 1 - different typefaces for the same two words

The two different words “joy” and “fear” acquire different connation’s and different meanings based solely on the different typeface that it appears in? Interesting right? But let’s make no assumptions, let’s define typefaces and some of our basic typeface classifications so we can move from the same basic foundation:

 

Let’s Define Typefaces:


"A Typeface is a particular design of type."


There are seven main classifications of typefaces and around fourteen different sub-classifications. For brevity, we will cover the main four typically seen.

  • Serif: A typeface characterized by having “feet” attached to a letterform designed to help distinguish individual letters from each other.
  • Sans-Serif: A typeface similar to a serif but without feet and commonly defined as “Neutral” (see Rabbit Trail #1).
  • Script: A typeface designed to emulate a pen stroke, or brush stroke akin to handwritten letters.
  • Decorative:  This classification often introduces flourish elements to other classifications of typefaces to differentiate them, while visually interesting, these typefaces are often very project specific. Example: A designated permanent drop shadow.

 

This example demonstrates the four different categories: 

Picture which displays the different types of fonts


Rabbit Trail #1 – Neutral Typefaces

What is a Neutral Typeface, and why should we care? Looking back at Example #1, we see the “Kristen ITC” typeface imbues the word “joy” with a childlike innocence, in addition to making the word “fear” appear happy and jovial. In comparison, the typeface “chiller” provides a real sensation of fear and anxiety to the word “fear,” and seems inappropriate for the word “joy.” These two typefaces (Kristen ITC and Chiller) are perfect examples of typefaces containing stylistic cues designed to help a reader engage with the message and content of the text.

In contrast, a Neutral Typeface like “Proxima Nova” (Arial or Helvetica) are purposely designed to be absent of stylistic cues, and thus attempt to remove associations attributed to the words by the shape of the letter or font. In Example #1, when the word “fear” appears in “Proxima Nova,” it doesn’t imply freight or terror in the same way that “joy” doesn’t imply happiness and giddy delight. Both words must be accompanied by more words to bring details which provide information as to their true connotation.  For this reason, many Government’s official fonts and most books are printed in a Neutral Typeface, because it allows words themselves to become power, not the shape and form of the words.

end of rabbit trail #1

 

Here are the basic elements of Typography:

It’s important to remember typeface selection (or the shape/style of the letters) is only one part of good typography. Consider the following example: 

Picture of how Headers help make information more legible

Notice the right column with different size headers is incredibly easier to skim and understand in a quick glance. Size, or more specifically, contrasting difference between the body and header text (which establishes a hierarchy), is an important part of typography and our ability to understand a message efficiently. But there are numerous other elements:

  • Size: The actual size of the text.
  • Contrast: The contrast between words, signifying importance and hierarchy
  • Color: Making use of color to highlight key elements
  • Leading: Distance between baselines of each line of text
  • Kerning: Distance between two letters
  • Tracking: Adjustment of space between letters throughout an entire word

These six do a good job of covering the basics and the following example demonstrates their importance: 

Examples of good and bad typeface mechanics

Why should we care?


Most businesses messages are made of words which collectively have a very basic function, to be read and understood; much like letters which are destined to be utilized together and not individually. Therefore, clarity of a message and correct use of typography is important:Example demonstrating how stop sizes are created  

All three of the stop signs say “STOP,” but only one of them does so in a manner that is clear, distinct from various distances, and can be seen by looking out of your window and down the street. The first stop signs typeface “Blackoak STD” would appear like a white bar from a great distance, whereas the stop sign to the right, making use of “Ravie,” appears as if it’s a joking or just kidding around.  The middle sign, however, provides the right balance of absolute clarity, and capability of being viewed at greater distances without disappearing into a white bar. In this example, the typography is simple but fills an important position.

Typography is important because it helps to tell our messages. It helps to define who we are as a business or even as a person. Still not totally convinced? Just take a look at the following example:

 Picture of the same logo but with two different typefaces

 

How does typography apply to websites specifically?

Why is typography important on the web? That’s a good question because at EvenVision we focus on web development. Typography is critical for a good website because a website's primary function is to distribute a message, whatever they maybe.

Around 90% of all websites are made up of words designed for a person to read and consume. What would this look like if the leading was poor, or there was no contrast? What if every word on a website was written in our lovely typeface Chiller? The message told to a visitor looking at the website would be totally different! Just look at this example below of the EvenVision homepage message:

example of EvenVisions call to action with two different typefaces

Okay, there is good typography, and there is bad typography. If you want to get your businesses message out to the right people and have it tell the right story, then it’s of utmost importance that typography is considered in the process. 


Rabbit hole #2

When it comes to typography on the web, there is a new element to consider that’s been gaining a lot of traction; owing to the simple fact that words are being viewed not only on 19-inch monitors, but 4-inch phones, and 1-inch watch displays. In Typography this is called “Scalable typefaces” (not to be confused with web-optimized typefaces which will be discussed in a separate post).

  • Scalable Typeface: A typeface designed to resizable without compromising the legibility of the text.

Typically, these typefaces are Sans-Serif’s owing to the width of the letter form. From Example #2 we can clearly see that the Script typeface has a varying thickness in the letter “k;” even the serif typeface “Kepler STD” has a good deal of varying contrast which can make parts of the letter disappear at small sizes. Yet the sans-serif, which has an equal thickness and contrast throughout the entirety of the letterform, can be shrunk down very small and retain legibility.

Consider the following example:

Example of scale-able text at different sizes

Letters become much harder to read for “Times New Roman” as they scale down. Whereas for “Nimbus Sans” the letters do not disappear as much when they decrease from 8pt to 6pt. Think this an isolated issue? Google themselves recently rebranded their logo because it had rendering and scaling issues on different devices. Check out this link if you’re interested in finding more out: FastCoDesign

end of rabbit trail #2

Okay, by now you’ve got it. Typography is more than just a buzz word. It’s crucial in sending out messages. It can define, shape, and inform your audience of your message before they even read the words you’ve written. Now that you’re been armed with the tools required to optimize your message, get out there, tell it to the world! 

  • Interested in Tyopgraphy?

    Let's get together and chat. Typefaces are powerful tools for impacting people's impression of a brand or a website, and we use the best around.

Keep in Touch

Get periodic notifications - no spam, we promise!

X
^