facebook google plus twitter
Webucator's Free Typography Tutorial

Lesson: Rules for Typography

Welcome to our free Typography tutorial. This tutorial is based on Webucator's Typography course.

Although each designer will put their unique creativity into a project, there are proper base rules that you should use in order to ensure readability and clarity of message.

Lesson Goals

  • To observe and implement the proper typeface.
  • About the importance of spacing and alignment.
  • To establish the proper font "feeling."
  • To be aware of white space in your designs.
  • To follow rules that exist in and out of the box.
  • To know when to ignore the rules.

Observe

Project Scope

Be aware of the scope and audience of the project. For example, if we are presenting only text on a website, then we must limit our fonts for body paragraphs to fonts that would be available to browsers based on available technology. If we are building a design for a roadside billboard, then we need to think of using scalable fonts that will catch the eye and be very readable at a quick glance.Website Layout Website layout shown above.

Billboard LayoutBillboard layout.

Doing Research

Each industry and discipline holds their own style traditions. By doing a bit of research on the Internet, you can determine what has already been done, what has been done right, and what new directions you may take those traditions, therefore, coming up with your own perfect layout. Please keep in mind copyright rules; just because we see a design/art element that we like, we cannot just "pluck" it out of the existing site and use it as our own. Use this research time to be inspired and build your own design/art elements making your project unique and not breaking copyright laws.

Google SearchGeneral search for a specific industry. Source: http://www.google.com

Getting Inspired

There are many sites to view other designers' work that they share with the public and design community. If you do not yet have a clear vision of what your project may turn out to be, you may want to spend some time looking at these type of sites to see what other designers are creating.

Many of these sites may offer more that just a look at the art side; they often share tips, advice, and code snips that they encourage you to take and make your own.

SiteInspire.comInspirational design site where designers share ideas! Source: http://www.siteinspire.com/

Spacing/Alignment

Page Readability

The spacing and alignment of the text can impact the readability just as much as the typeface. When faced with a text heavy layout, often multiple columns can make the paragraphs more inviting to read.

Text in a Single ColumnText in a single column.

Text in Two ColumnsText in two columns.

Font "Feelings"

Emotion of a Font

Use good judgement in placing the proper typeface. Each typeface and font has an emotion associated. Please be aware that each person, audience, and culture may have a different notion of what that feeling is. Because of this, it is very important to always keep the scope of project and audience type in mind.

The Word Logo in Six Different FontsThis image shows the phrase "Logo" using six different fonts, all 72 pt in size. Each one has a different vibe that it conveys. Take a look and think about what "feeling" each one gives you.

Being Aware of White Space

Use Empty Space to Fill the Page

Having a good sense of white space (empty space void of content, not necessarily tied to a color) is helpful when analyzing the text layout of a project.

There are a few traditional layouts that have stood the test of time and are still relevant today. There are many layout philosophies available; here are just a few.

  • Z Layout: top-left to top-right, then horizontal to the bottom-left to bottom-right (the eye follows the shape of a Z).Z Layout
  • F Layout: left to right progressing down the page and the eye tends to not travel as far right as it moves down the page.F Layout

Static vs. Dynamic Layouts

Static layouts are great for the print world where the designer is in control of exact placement of all objects down to the point. In the bulk of our onscreen experiences, however, we do not have complete control. Dynamic layouts are flexible and grow and shrink with the amount of data that is pulled into the layout. Dynamic layouts are the perfect option when we are faced with variables such a screen size, resolution, data-driven content, and accessibility adjustments.

Dynamic layouts can be a challenge to create, not only because of all of the variables, but also because we are incorporating code-driven technologies that will vary based on user preferences, software/hardware versions and design skills of the programmer. Although challenging to generate, they are well worth the trouble as they bring versatility to the site in which they reside.

Existing in and out of the Box

When to Break the Rules

Typography rules have been established to help set standards based on years of traditions. There is a saying "to think outside of the box," meaning to try to break free of traditional rules of thought. As new technologies that include text content arise, so do new rules and the need to push the boundaries of the existing rules. We need to "create out of the box" and push those boundaries. Current "safe" rules that still apply and should always be the basis of rules you rewrite are as follows:

  • Keep text blocks easy to read by using good color contrast with the background.
  • Keep the design simple by choosing just a few typefaces and use variations for effect.
  • Keep each type of typeface in mind when you are applying them. (More will be covered about types of typefaces later in the course.)

Knowing When to Ignore the Rules

Break the Rules

Once you have a good understanding of the beginning basics, then it is time to be creative and push your designs beyond the rules. Please make sure you always follow the core fundamentals that underlie every good design.

  • Simplicity
  • Clarity
  • Readability
  • Visual interest

The presentation that follows will talk more about how to ignore the rules.

Applying the Design Rules

Duration: 15 to 25 minutes.

In this exercise, you will apply the new rules you just learned, and also add a touch of your own creativity as well! Build a typography plan for three case studies listed below. Read each case study and fill out the form below answering questions for each case.

Case #1:

Round Rings Inc. LogoRound Rings Inc. is a wholesale company providing class rings for schools.

Case #2:

ABC Childcare LogoYou have received a request from an existing daycare facility named ABC Childcare. They are interested in promoting to gain new clients and keep existing clients as well. They have mini trips throughout the year that encourage education. Their needs are a public-facing website and a set of marketing materials (brochure, business cards, billing forms). They already have a logo to work with and have sent you a copy (located below). Build a color scheme that will help this client.

Case #3:

Lovely Lace LogoYou have received a request from a new high-end women's clothing store that specializes in vintage clothing. They will have a store front that will also need a look and feel. They have requested store front decor, public website, and business cards. They have provided their logo.

Questions: You may write this out or use a tool such as a word processor. (See sample form in Microsoft Word rules-for-typography\Exercises\PlanFile.docx

  1. Based on the company backgrounds and logos, what fonts would you choose for the following?
    1. Website:
      1. Headings -
      2. Body paragraphs -
      3. Special photo captions -
    2. Print:
      1. Headings -
      2. Body paragraphs -
      3. Special photo captions -
  2. Website layout: sketch a rough mockup of what you think the layout of the site should be.
  3. Print layout: sketch an idea of what the newspaper ads and marketing postcard may look like.

See scanned samples below for inspiration.

Case #1: Round Rings Inc.Round Rings Inc. Typography Plan

Case #2: ABC ChildcareABC Childcare Typography Plan

Case #3: Lovely LaceLovely Lace Typography Plan