AEA12: On Web Typography

AEA12: On Web Typography Picture

Achieving a thorough grasp of typography can take a lifetime, but moving beyond the basics is within your reach right now. In this talk, we’ll learn how to look at typefaces with a discerning eye, different approaches to typographic planning, how typography impacts the act of reading, and how to choose and combine appropriate typefaces from an aesthetic and technical point of view. Through an understanding of our design tools and how they relate to the web as a medium, we can empower ourselves to use type in meaningful and powerful ways.

On Web Typography
Jason Santa Maria
@jasonsantamaria

“I am a font geek.”

Why type matters

It helps us unify everything we talk about. Unifies the visual language (The New Yorker). Over time you build up brand equity.

If your type is bad, the design fails.

Type is not an afterthought, it’s not decoration. It’s the voice of our site.

The term readability doesn’t ask simply, can you read it? “It asks do you want to read it?”

Working on the web brings with it its own unique constraints.

  • Typography is hard. It’s a barrier. We feel like we need to know a lot to even get started?
  • There are a lot of choices.
  • Requires specialized skills.

Understanding type and learning how to see it. Knowing enough to be a little bit dangerous.

Breaking it down:

What makes a typeface good or bad?

  • There is a specific use for every typeface (even comic sans).
  • Good typography can change the conversation.

How to look at type?

  • Type is a beautiful group of letters, not a group of beautiful letters. - Matthew Carter
  • Typefaces have roles
  • Display faces (large, headlines)
  • Text faces (used for longer reading)
  • Look for workhorse typefaces. Bodoni - Great for headlines, not text. Meta - lower contrast, great for text. Less distraction.
  • Look for a family that will work well in multiple sizes.

Reading and Perception

  • What’s the reading process like?
  • Type’s dual life. It is not only the content but it has visual flavor as well.
  • Reading is greatly affected by the principles of typography.

Saccade - jumps that your eyes make as you consume content.
Fixation - stop when reading. Shutting out everything to focus on on small bit of content.

Distraction - we have to understand the process that people go through. Everything online is a distraction. Any distraction we add affects the reading process.

“Good typography is invisible”

  • Don’t make me think. Don’t get in my way.
  • Don’t waste my time decoding the visual language.

On Ugly Fonts

  • The educational benefit of ugly fonts (Wired article)
  • Triggering the parts of your brain that makes you work a bit harder, disfluent to increase memory.
  • Sassoon - modeled after handwritten font

Typography is an art of contrasts

Considerations for design

  • No rules!
  • Principles, guidelines, best practices.
  • Imperfect precision, putting out your best effort.
  • Reduction, reduce the amount of variables.

In practice

  • Bigger is better, err on the side of bigger
  • Contrast, the most important tenant of design, creates the hierarchy, map of our work
  • Everything is related to its opposite…
  • Elements need their own attention.
  • The big stuff vs the small stuff
  • The longer the line, the more line spacing (45 - 75 characters, optimal line length).
  • More color, more line height

Greater control

Avoid readymades

  • Design is baked in. Microwave burrito of typography.
  • Playground. What else can you use the Playground typeface for?

Develop your personal palate. Pick your typefaces. You can build on what you already know.

Research and History

  • Helvetica (Swiss) vs Gotham (NY)
  • Decisions like this matter
  • Mad Men - Historic accuracy

Mental Associations

  • Stable, powerful, strong, industrial, boxy, angular, geometric
  • Entryway to finding type for your projects.

Look for typefaces that were designed together. Sans-serif and serif counterparts.

Alternates. Find typefaces that are similar or have similar characteristics to a typeface that you are comfortable with. Then transfer that knowledge to other typefaces.

Play with type in context.

So.

  • We can make good decisions. People need to read the work that we are doing.
  • Don’t have to choose hokey things.
  • Voltage website (great type).
  • Make typography the equal player!

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins