User Interface 19

October 27–29, 2014 · Renaissance Boston Waterfront Hotel

Designing with Type

Tim Brown · Wednesday, October 29 · 8:30am – 5:30pm ·Pacific B–C

Photo of Tim Brown

Choose and use type on the web, from serifs and superfamilies to counters and compositions. Practice typography in ways that will grow as the web grows.

Get the vocabulary you need to talk with others confidently about type. Confidently stand behind your typeface choices, critique designs, and fix existing typography problems.

Tim authored Combining Typefaces and is a pro at helping designers feel comfortable with type.

The day’s agenda

Morning

Start talking about typography

  • An overview of type anatomy, spacing, and font features
  • What is a family, what is OpenType, and which fonts work for specific resolutions
  • How to study, identify, and describe typefaces

Design for blocks of text

  • How to balance your typeface with size, line length, and line spacing
  • Why you should care about OpenType features, and how they affect the text block
  • The way a block of text changes as its typefaces change

Afternoon

Begin crafting compositions

  • Ways to arrange text blocks to create a composition that achieves a clear purpose
  • How to establish hierarchy and contrast so people move through your composition
  • Techniques for choosing typefaces for body text, headers, captions, and callouts

Make it work at work

  • What development and performance realities to consider when choosing type
  • Licensing differences, and how to choose which font foundry to use
  • Tips for conducting type audits and avoiding common implementation issues

Typography is balance

Don’t worry about “breaking the design”

The blank canvas is an opportunity to experiment with a creative typographic process. Draft, edit, and iterate on your choices until you’ve found the right balance for your design.

Find what you’re looking for

Associate different aspects of type with words that describe your feelings. Efficiently find what you need—and help others see what you’ve found is the right thing.

Think about the whole

Instead of making individual layouts, create a holistic composition of text blocks that anticipates what users want and compels them forward. Create a cohesive typographic user experience.

You’ll see how to:

  • Approach typography with clarity, focus, and authority
  • Stop spending so much time on making font choices
  • Arrange text blocks to create a composition that achieves a clear purpose
  • Establish a mental framework for making type decisions on a regular basis
  • Handle text blocks in responsive web designs without feeling stressed out
  • Work with Typekit and practice typography in an ongoing way

Start experimenting with typography

Confidence in choosing, using, and talking about type
Speak the language of type, find the “right” fonts, and substantiate your choices with confidence.
Tips for finding web fonts for different resolutions
Determine how the user’s context affects composition. Make the right typographic decision for any screen.
A checklist of how to design for great typography 
Make smart typography choices that work in our responsive design world.
A more web-native, UX design process 
Find balance between graphic design thinking and type-first, text-block-driven development.

You’ll be getting creative in this workshop

You’ll learn how to identify the unique characteristics of your fonts so you can talk about them with your team, and critique their application in various compositions. You’ll work individually and in small groups.

You’ll need your laptop and 3-5 of your favorite fonts; we’ll send you an email with more details about this once you register. You should be able to manipulate code in a text editor and look at results in a browser. It’ll be helpful if you’ve tried using web fonts already or tried to get web fonts working in your local environment.

Tim Brown, Fontologist

Photo of Tim Brown

Tim Brown is one of those unique people who can break down complex topics and make them understandable. And amid the explosion of font foundries and screen sizes, that’s just the kind of guide we designers need on our side.

Tim is the type manager for Adobe Typekit, the maker of Nice Web Type, and the author of Combining Typefaces. He specializes in helping designers get comfortable with type, and he’s spoken on the topic spoken to sold-out crowds at conferences around the world. He’s also a curator for A List Apart, to which he has contributed type articles.

Prior to joining Typekit, Tim was a web designer at Vassar College, where he first developed his expansive knowledge of typefaces, their histories, and their unique characteristics. So his background spans designs for small to enterprise-level audiences, as you’ll soon learn for yourself.

But to get more of what Tim knows in the meantime, follow him on Twitter @nicewebtype.

Podcast

Tim explains how a well designed typeface creates a rhythm and balance in the words.

Listen to the Podcast Now Read the Transcript

Prefer a different workshop? There are 3 other options on Wednesday

▲ Top Register Now

Sign up for one, two, or all three days