Lesson 7 :

An Introduction to Typography & "getting a feel for type"

This lesson introduces the student to the power and magic of type.

Typography is the study, design and application of type. As a Web Designer it's important to understand how to use type. You need to know what sort of typeface to use where and how to use the typeface. This lesson formalises what you probably already know about using type. Intuitively you might know not to use Comic Sans for a wedding invitation but in this lesson we let you explore the reasons why some typefaces fit a specific situation better than others.

What's Typography?
Check out this video from GCFLearnFree (6mins) which does a great job of explaining what typography is and does as well as defining terminology.

After you've watched this, find examples of "kinetic typography". Here's a few of the better ones. Note how the type shape, scale, colour, texture and position gives the type its personality.

If you're interested in how these are made, the majority of these use Adobe After Effects and it takes a lot of pre-production and planning and are typically a result of a higher-ed ull-semester project. As for the technical skills required, here's a tutorial that shows how it's done in Adobe Illustrator and After Effects.


stop stealing sheep bookThis lesson is only a brief introduction to typography. It's a highly specialised skill that draws from Design Principles, language and popular culture and to cover all aspects is beyond the scope of this delivery. Design courses at Universities offer degrees in the field of Typography. You can even get a PhD in Typography!

If you're after a textbook to better help you understand the nature of typography, try "Stop Stealing Sheep and find out how type works | Erik Spiekermann & E.M Ginger, 3rd ed. Peachpit Press.

If you're after a more comprehensive reference, the "Letter Fountain The Anatomy of Type" covers the evolution of type and symbols in "forensic" detail. $105AUD RRP

What's a typeface and what's a font?
A typeface is a "family" of type such as Franklin Gothic whose family members consist of :

A font is an example from a typeface family, set at a particular size, and style ie: Franklin Gothic Condensed Italic 14pt is a font.

At least that's the correct terminology. However, it seems like everyone uses the word font to represent both so it's up to you which one you want to use.

Learning Task: Typeface Panel (1-2 hrs)

Find a typeface you like and represent it using sizes and styles in a manner similar to the Franklin Gothic Medium panel above. Publish it to your blog and submit your blog's URL via email for feedback.

  • Put your name in there somewhere
  • Caption it by describing the character of this typeface and where might you use it
  • Describe its designer and history
  • Use any application you like (MSWord / Photoshop / Illustrator)


The anatomy of type

Just like human anatomy, typefaces have "body parts" and corresponding terminology.

anatomy of typeShown opposite is a diagram illustrating the "anatomy" of type, it's not the complete anatomy, just enough for you to work with for now. The GFCLearnFree video above described some of this anatomy.

Not all typefaces have the same anatomy as shown; ARIAL doesn't have any "ears" for example.

To further your understanding of anatomy of type, watch this video tutorial from "Lynda.com" on YouTube.

Getting a feel for type
Shown below are examples (courtesy Rowen Hill, L'ton-based Graphic Designer) of how a typeface can be matched to the identity of the product:

This example is acceptable for a conservative financial company

This example isn't. The choice of typefaces is poor; the letterforms are frivolous (a bullseye for the letter "o" ?!?), and the multiple typefaces do not work together in harmony; they introduce "awkward" shapes and tension points (the gap between R and e in Report). The letters all look "jumbled" and "upset".

It doesn't do the job, does it?

Is the use of type in this image (shown left) more suited to a snowboard manufacturer? Why might that be?

Typeface Identity

You might ask; "How can a typeface have character ?"wiggles cartoon logo

A typeface can have character partly due to the shapes and strokes that are used to make the letters and partly due to the spatial relationships to each other. There's also colour / texture to add further character.

A good example of this is seen in typefaces that use letters that look a little like human features; the lower case "e" can carry a lot of character for that typeface; if the e looks like it's a smiling face then the typeface looks "friendly". If the serifs (the "pointy bits" at the end of letters) are sharp like daggers then the typeface may suggest an "evil, menacing" personality.

The "Wiggles" entertainers use a logotype that uses several type treatments to represent a sense of their kid friendly identity; baseline shift (the letters are shifted up or down), colour, angle, letter distortion (like jelly) and kerning the two "g"s closely to suggest they're banging heads together or whispering a secret message or just good pals.

A typeface can also reflect cultural associations we have assigned to it.

mesquite used rivetsA good example is the "boiler-plate" typefaces closely associated with railroad engineering; engineers had to attach signage to their metal monsters that could be durable and withstand steam, heat and vibration.

One solution was to apply rivets to hold the letters on. Letters would be fastened using rivets at the top and bottom and middle. The rivet in the middle was a necessary evil and typographers worked it into the typefaces used.

These typefaces now have a cutural/ spiritual association that suggests they need to be used to convey a sense of "industry" or "wild-west". The typeface "Mesquite" shown above has this "personality".

Another good example of how typefaces evolved can be found in typefaces with serifs; the serif evolved thanks to the mold metal-casting process and the accuracy of their tools; they found it next to impossible to get their letters out of the mold without using a notch at the ends of the letters to help lever them out.

Contemporary research also suggests that the serifs actually help the eye travel from letter to letter and word to word. For the web, the jury is still out IMHO on whether sans-serif is better than serif in terms of legibility.

Learning Task : Match shoes to type (1 hr)

This task requires you to match six typefaces to six shoes. It places emphasis on the "cultural influences" that determine how a typeface makes you feel.

The shoe's appearance suggests something about the character of the owner and this, in turn, should provide a clue to which typeface to match it with.

Right-click here and "save target as" to get the Photoshop file that you need to use (900KB) .

Open the file in Photoshop, then drag the right font to the right shoe. Once you think you have it solved, save for web as a .jpg and then submit it via the Assignment Tool for feedback.

Don't know how to drag Photoshop layers around or save the image? Grab this short tutorial (1.6MB .swf ), you'll need Flash Movie Player (PC) or Flash Player (mac) to view it.

Submission Guide
In Photoshop, use File/ Save for Web as a 50 quality jpg, save it and submit it via email for feedback (don't publish to you blog).



Learning Task: Good and bad type (3-6 hrs)

This task requires you to grab your digital camera and find five examples of what you feel is representative of good type use in logos, signage, print layouts, graffiti, car graphics, t-shirts etc. and five examples of what you feel is bad typeface use.

Generally, you might expect to find "bad" typeface use in flyers, regional papers, community group newsletters or signs, mechanic workshop signage, school newsletters etc.

Save your pics and publish them to your blog with captions explaining why you think it looked bad or good and submit your blog URL via email.



white foam type The shape of letters can convey meaning; shown opposite.

This is a fun activity on-campus where students need to think of a four-letter word and represent it with letter forms that match the word's meaning and personality.

Learning Task : Poster Design

Manipulating type to add further meaning, feelings and emotions. (3-6hrs)

imagination is more important than knowledge quote

Think of a quote you like and portray it in a layout. Use any tool you like; Photoshop, MS Word, InDesign etc.

  • Size is A4 - landscape. Just type only - no illustrations. Use any typeface families and any colours.
  • Experiment with different sizes of type. Experiment with spacing between letters and words. Use different typefaces where appropriate.
  • Break the quote down into words and emphasise the words that need it. See if you can convey the meaning of the quote just by using type.
  • The quotes should determine how you manipulate the type; use type confidently, experiment and have fun!
  • Acknowledge the source of the quote and put your credits on there.

Submission Guide
Save as a jpg and publish it to your blog with a description of how and why you arrived at the design.

Submit your blog's URL via email for feedback.


Chris Adams 2017

Typography on the web

crazy typesetting all coloursThere are few restrictions thesedays on how you can set type for web publishing.

Google Webfonts or Adobe Typekit Webkit technologies now offer you hundreds of typefaces that you can easily deploy on the web.

If you want complete artisitic control over your type then you will have to resort to using Photoshop, Illustrator or Flash, then save it as an image.

If you save your quote or catchphrase as an image how easy do you think a search engine can "index" it compared to raw text ? Are there strategies for ensuring your image can still be indexed? You answer these questions in the following short-answer research task.

Learning Task: Short-answer research

  1. What happens to the "searchability" and "accessability" of your web pages if you set your type as an image using Photoshop rather than html text?
  2. CSS (Cascading Style Sheets) allows you to control the appearance of type on a web page. Find three browser-based tools that help you see what your type will look like as you change it with CSS. Hint:
  3. List all the things you can do to a typeface using standard html (hint: bold is one variation, there are eight altogether)
  4. List all the things you can do to type using CSS (cascading style sheets).
  5. What's aliased type? What's anti-aliased type? Hint
  6. What's so good about Adobe Typekit and Google Web Fonts? Hint:
  7. You've been asked to design and produce wedding invitations for a friend of yours. What sort of typeface would you choose if you had to adhere to popular convention? What is it about the typeface that makes it a " popular" choice in this scenario?
  8. Now create a mock-up wedding invite using your preferred typeface, save as jpg and post to your blog and embed in your document.
  9. Lastly, In our Design Forum, in the "Horses for Courses type thread ", think of three professions then pick a single typeface for each that would be the worst choice to represent their business identity. For each, explain why the type you chose would be a bad choice. Explain why in terms of the personality and shapes of the letters.

Submission Guide
Submit your work in MS Word format (or your preferred word processor) via email for feedback.

This lesson was a short introduction to working with type and how the character of typefaces affects how and where you use them. Practice and further study is the key to getting "a feel for type".

You will be expected to demonstrate an understanding of this in your assessment tasks.