5 years at Adobe Typekit
In charge of Typekit Practice at Adobe
We see bad body font all over the web – Arial, at a small size, with long line length.
Aspects of type you can use to make type better:
- Typeface
- Size
- Measure
- Leading (Line Height is Leading plus your Font Size)
- Margins
- Details (special characters, opentype features)
- Contrast
- Grids
Those things can make a HUGE difference. They can be the difference between someone staying or someone leaving.
Good typesettings decisions are non-transferrable between fonts, because each font has its own attributes and size/weight even in the same size specification.
Why aren’t we doing this all the time? Why don’t we just make all type look better?
- Performance Concerns
- Erosion of typography by the web
- Craftsmanship (in order to do this well you need a good feel for it)
Performance budgets are wise. Take care of what you eliminate from your budget.
We’re eager to pass judgement. We just sites now by how fast they load. When we talk about site loading and performance with regards to fonts, we are talking about 2 things – the time it takes to actually transfer the data of the font files, and then the time it takes for the font to actually show up on the content (it can load with Arial first, then load the web font later).
We’re talking about the most flexible, powerful branding element on the web. Body text is everywhere. It’s the majority of the text you want people to read…. and if it’s done well, nobody notices, like the editing of a well-made film. People say “that was a great movie!”
So it’s shocking when we see fonts and styles eliminated from mobile devices, which has become a major player in the web world!
Typekit just released subsetting. There are going to be lots of new ways to make font loading more size efficient.
Form follows function is literally true on the web. We have to treat the transition between our fall-back fonts and our design fonts as a meaningful solution.
The web is eroding our understanding of what type was.
Typography has history and traditions. We’ve been practicing typography for a long time, and we feel magic in it. If we can just develop a sense of what makes this stuff feel so good, we can extend that sensibility to all the ways text needs to look and behave.
There is force in typesetting…
“Every decision exerts force on other decisions.” -Tobias Frere-Jones
The way to get a handle on the force behind type is by focusing on body text.
Selecting a good typeface is the hardest thing to do. You want something that is appropriate for your project.
Good + Appropriate = Success
A good typeface for body text has:
- Sturdy shapes – Something that has details and delicate aspects will get lost in body text.
- Even color – consistent gray value. Squint at your text can half you get a good idea of this.
- Active texture – thicks and thins, subtle directional movements that help guide your eyes through the reading process.
An appropriate typeface for body text has:
- Family & Features – Evaluate all of a typeface’s features: weights, widths, styles, features.
- Prepared for the medium
- Harmonious to the subject – Read the text. Designers need to know what an author is saying and how it is being said. You need to at least know the general feeling of the type you’re setting.
- Agreeable to the kind of reading
When you’ve found a typeface that you think is worth your time, try it out! And play around with it!
Whenever you’re unsure about something:
Break it, then fix it. Make the line spacing so tight that you know it can’t be right, then loosen it up a little bit.
OpenType Features – there are over 100 of them! These are the ones to care about when you’re typesetting body text:
- Kerning, Ligatures
- Contextual Alternates
- Small caps
- Proportional, oldstyle figures
Make sure they exist in the font you’re using, that they’re enabled in the CSS, and that they matter in the text.
We’ve been talking about the making, but we need to then take a step back and evaluate what we’ve made.
Evaluating your typeface choices:
- Flip back and forth between subtle adjustments.
- Juxtapose your work, set it.
- Blur your work or squint…
- Use flippant to flip your design around to see it from a different perspective.
- Take some time to review it…
- Look at it with other people, sometimes they will see things differently than you.
Some advice on working with type:
- Dedicate time to studying and practice.
- Keep an archive of familiar typefaces. This can help you choose a good typeface in the future.
- Develop a feel for the force in type.
- Be patient, but set limits. There is a time study, and a time to get things done.
- When picking a font size, choose a size that stay relatively close to what people are familiar with.
- Think about measure and line-height as sets of limits, not values that should just be set. For example, see what measures (paragraph widths) looks acceptable with a certain line-height.
- Base your responsive breakpoints on your typesetting decisions. Your measure plus your margins equals a breakpoint!
- Choose an anchor typeface: By choosing an anchor typeface, you can extend from there. You can branch out from there looking for typefaces by the same designer, or with some of the same characteristics. You can research how the font has been used before, its background, etc.
- Anchor on size: Use a percentage based root font size, and context aware rems for the rest of your font sizes. http://css-tricks.com/rems-ems In order for something to be marked to stand out, it must be different from the normal. The body text IS the norm.
The web feels impossible. We have to instruct our work how to think for itself. We invented the web, and now it’s at our house and we have to deal with it. Every visitor brings their own context to our content. Their perception is their reality. They bring their own screen sizes, default font size, preferences, and every one of them experiences what we intend for them to experience. We’re responsible for every one of those experiences.
This is why we have the concept of progressive enhancement… it makes these things easier to deal with (we start with one baseline experience and enhance it).
If someone uses a custom font, or likes their size really big on a narrow device, that’s not wrong or bad! On the web, type will be forces into spaces where it can’t look good, but it can still be beautiful if it works well.
Systems give us a sense of order. We crave that order because our work exists in dimensions that our tools lack. So we try to stay organized. You can use Sass maps to keep our typographical styles organized. We can create type style guides. Typecast.com gives you style guides. We try desperately to account for every condition and context that our work is smushed into.
We write scripts to detect if fonts are present, what rendering is used, if opentype features are enabled or not. It’s a lot to keep in our heads!!
To really understand what we’re doing, we have to command an awareness that goes deeper than what we can see. WE CAN’T SEE WHAT WE’RE DOING! The systems that comfort us today, those should be byproducts of intuitive tools that help us make flexible, multi-dimensional design decisions instead of static decisions.
We are designing websites with a Super Nintendo controller… We need more! Context is our analog joystick. Contextual settings like a user’s viewport width and their font size percentage setting means that our typesetting decisions affect different users differently!
All of this stuff will help us do better typography, and it will bolster more complex compositional decisions.
Focusing on a single element like this also helps us understand the nature of the web. If you have a solid typographic practice, and an understanding of how the web works, then I think the people in this room will make new things and build new tools that feel so flexible and so right for the web that we will set new standard of beauty.
Great typography will always take practice, so we have to give ourselves that time.
@nicewebtype
TypeKit Practice – a great resource to start with.
0 Comments