Typography 101

by on August 22, 2016 · 0 comments


typography 101 300x300
Typography is used in nearly every project on the web and has a big impact on your final results. With thousands of typefaces available to designers, choosing the correct typography can be overwhelming. With a little bit of typographic knowledge you can create professional and stunning websites. Typography mastery will elevate your designs and make your customer’s happier.

What We Covered In Typography 101:

In Typography 101 we explored the origins of typography and how modern designers use typography to enhance their projects. Our discussion included the key concepts of typography, the classifications of typefaces, and the common adjustments typographers use to polish their designs. Members of the Expand2Web Experts Group who are interested in watching the entire class can view the recorded session here: http://members.expand2web.com/typography-101/ We specifically covered the following topics:

  • Typography Defined
  • Three Key Concepts of Typography
  • Typeface Classifications
  • Leading, Tracking, and Kerning

Typography Defined:

Robert Bringhurst defines typography as “the craft of endowing human language with a durable visual form,” in his opus The Elements of Typographic Style. This visual form, in almost every case, must be legible and readable. In addition it needs to set the correct tone. Even the coolest looking use of typography is useless if it is unreadable.

Just imagine how literature might be perceived differently if Charles Dickens’ publisher had typeset A Tale of Two Cities using Jokerman in pink on a yellow background.

typo 101 bad example

Three Key Typography Concepts:

  • Tone: Tone is the feeling or emotion that your typography evokes visually. The visual tone is different from the tone of the content.
    • Typefaces have personalities. If their personalities don’t match the essence of your business or message or text, you can create a conflict which distracts your audience.
    • Tone can range from formal to informal. Be sure that the typography conveys the right tone for the message and business.
  • Legibility: Legibility refers to how easily you can distinguish between the individual shapes of the letters.
    • This should be a major factor when choosing a typesetting for user interfaces.
    • For instance, some fonts make it difficult to distinguish between an uppercase I (eye) and a lowercase l (elle).
    • Legibility is mainly a function of the font’s design, though you can make design choices that affect legibility, such as setting letter-spacing too high or low, or setting text in all caps
  • Readability: Readability refers to how easy it is to read the content of a paragraph.
    • Readability is determined by the font’s design and the design choices you make, including color, spacing, and sizing.

Typeface, Font, and Glyphs:

In typography, a typeface (also known as font family) is a set of one or more fonts each composed of glyphs that share common design features.

Glyphs are considered to be unique marks that collectively add up to the spelling of a word, or otherwise contribute to a specific meaning of what is written. Essentially the letters and symbols included in a font that combined create written language. A font is the combination of typeface and other qualities such as size, pitch, and spacing. For example, Times Roman is a typeface that defines the shape of each character. Within Times Roman, however, there are many fonts to choose from — different sizes, italic, bold, and so on.

Typefaces are comprised of one or more fonts. Fonts are collections of glyphs. A glyph is a letter or a symbol.

Typeface Classifications:

In Typography 101 we discussed the five major typeface classifications and the best practices for using them:

  • Serif
  • Sans Serif
  • Monospaced
  • Script
  • Display

Further Down The Rabbit Hole:

further down the rabbit hole

Recent E2W Typography Articles:

Is Your Typography Speaking the Truth? Part One
Is Your Typography Speaking the Truth? Part Two
Evoking Emotion Through Your Typography
What is the Difference Between Tracking and Kerning?
Font Stacking With CSS
Stephen King, Strange Things, and Typography

Inspirational Typography Article:
Butterick’s Practical Typography


Understanding the basics of typography and how to properly use it for projects on the web is essential to your success as a designer. Knowing the fundamentals of typography will improve your other design skills and expand your choices when creating your projects.

The world of internet freelancing can be difficult to navigate. Enjoy the journey by joining the Expand2Web Experts group and gain instant access to our library of previous classes by clicking here: https://www.expand2web.com/coaching-and-training/

Already an Expand2Web Member? We’d love to hear what topics you’d like to explore next!

Article by »

Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog, and the GetFiveStars Customer Feedback and Reviews service.

Don has written 313 articles on Expand2Web

Author Connect » Twitter | | Facebook |

See my disclosure about advertising and affiliate links

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: