Nice Web Type

For the betterment of typographic style and practice.

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

Visit nicewebtype.com for more.

Twitter: @nicewebtype Dribbble: timbrown

Notes & bookmarks RSS

A web standards holiday card from Typekit

Sean McBride explains the snowy CSS3 and JS details that went into this effort of his, Mandy Brown’s, and Jason Santa Maria’s.

TEFF Ruse designed by Gerrit Noordzij

Side-scrolling to view the character set is surprisingly nice.

Type rendering Dec 17, 2010

Earlier today, I published a blog post over at Typekit that concluded our series on type rendering. Although I penned six of the seven posts in this series (type designer and Typekit team member Tim Ahrens wrote the penultimate post, a concise yet technical look at hinting), I speak as usual to our collective knowledge — as a team at Typekit, and as an industry of web and type professionals.

Matt Colyer, colleague of mine and engineer at Typekit, did most of the research upon which my claims are based, and is the kind of guy who never gets frustrated — even when you ask the same questions again and again, for clarity. He also provided invaluable technical edits for each article.

Mandy Brown, another colleague at Typekit, made magical edits to phrasing that make me sound like a genius and, more importantly, made key structural changes to the pace of the series. I wrote as best I could, attempting to stitch together what I thought mattered; Mandy made it digestible, added polish, and (most importantly of all) made sure the posts actually got published.

This series meant a lot to me. And not only because I got to collaborate with these special colleagues. Figuring out why fonts look one way or another – some great, some awful – across browsers and operating systems has been a frustrating mystery to me for years.

I had read, and kept bookmarked for months or years, a variety of resources that helped shape my personal understanding of type rendering. Thanks to investigative and authoritative articles by Thomas Phinney, Jon Tan, and Peter Bil’ak, on font technology, rendering engines, or both, I was able to more easily grasp the big picture as Matt and I did research. I knew how I wanted to communicate what I was learning.

Furthermore, conversations with Tim Ahrens (even before he joined the team) and Jason Campbell were instrumental to my own understanding of some specific details along the way. Can’t thank these guys enough for their generosity and time.

Before I joined Typekit, Paul Irish invited me to collaborate with he, Ethan Dunham, and Zoltan Hawryluk. We had very loose goals, but we shared some links and general knowledge. This was helpful and inspiring, but what I had always meant to contribute to that effort is exactly what we’ve now done with this series of posts at Typekit. I wanted to try and figure out as many specifics as I could – specifics that matter to web designers – and share them in a digestible way.

So I’m especially thankful that Jeff Veen made learning and sharing this stuff a priority. My time could have been spent on many other things. It’s really satisfying to not only have addressed this topic, but to also work each day under Jeff’s leadership, where sharing knowledge is as valuable as gaining that knowledge to begin with.

Ask me about this · #Typekit#Rendering

24 ways: My CSS Wish List

What Inayaili de León would like to see made real. Lots of thoughtful typographic stuff here. Great list.

The History of CSS Resets

Michael Tuck: “By using a CSS reset, you’re setting the styles of the fundamental CSS elements to a baseline value, thusly rendering the browsers’ varying style defaults moot.”

Steff.me: Fluid Inconsistencies

"So this is where I ran into some major inconsistencies in the way different browsers render percentage values."

Type study: A layered text shadow

Ryan Essmaker for Typekit: “The header and quote at the bottom of the site are set apart by a text shadow. This gives it a three-dimensional feel and emulates offset printing mishaps occasionally…

iOS Fonts

Lists of fonts available on iOS devices.

Proof of concept: modular scales Nov 26, 2010

Earlier this month, I gave a presentation called More Perfect Typography at Build in Belfast. (Many of you know this already, from having seen the video I shared just before this post. Sorry for being redundant — wanted to share that right away, but also meant to write about this all later.)

During "More Perfect Typography," at Build 2010.

Photo © Design by Front (An awesome design studio in Belfast at which I spent some time brainstorming after the conference, and really nice folks!)

I am extremely grateful for having had the opportunity to speak at Build. What an amazingly well-planned conference. Special thanks to Andy McMillan for giving me a chance on stage, Christopher Murphy for suggesting me to Andy, and my colleagues at Typekit for stoking my confidence by being excited about my ideas.

At the conference, I got to talk with amazing people (including the other speakers, whose talks you can watch here), I got to experience public speaking (with an audience! and lights! and cameras!), and I got to share an idea I’ve been wanting to share for years — the use of modular scales in web design. Here’s the full video of my talk (30 minutes).

I am amazed and encouraged by all the positive feedback I’ve received about this way of working. To everyone who’s offered kind words or shared this video with friends: thank you so much. And to folks like James WillockJack Osborne, Chris Armstrong, and the Web Standardistas, who have offered such incredibly kind words and have also begun using modular scales in their work … well, I am overwhelmed. It makes me happy and proud that you all have found value in these ideas.

What I’d like to do next is finish the how-to article I have been working on, and also flesh out the very basic calculator at ModularScale.com so that it’s more intuitive. These techniques should be much more approachable. Nobody should be forced to sit through a 30 minute presentation just to have the concept explained clearly.

Here’s where you come in, Nice Web Type readers. I could really use your help.

If you did attend Build, or watch my talk on video… If you have thought about starting with type and using modular scales… Do the concepts make practical sense? If you were to use (or if you have started using) these techniques in your own work, what challenges would/do you face? Write tim [at] tbrown [dot] org, give me a shout at @nicewebtype, or publish your experiences. You can help me proof this concept further. Together, we can make this approach easier and more powerful.

Ask me about this · #Modular Scales#Speaking

Font rendering in web browsers: a find-your-font adventure

Thomas Phinney: “How fonts render online is a dance between the font, the browser, and the particular settings of the operating system (OS) it’s being viewed on. As I’ve noted before, a bad font, or…

The Quick Look: Finishing Touches from H&FJ

"We’ve always believed that a good typeface is the product of thousands of decisions like these, so we invite you to join us on a behind-the-scenes look at some of the invisible details that go into…

Frutiger's grid and how to use it

Fred design: “Frutiger’s grid was first introduced in 1957 with the Univers type family. It became even more well known with the massively popular helvetica Neue. Essentially it was created to…

Maybe autohinting ain't so bad after all? | Typophile

John Hudson and David Berlow wax rendering-ical about size-specific outlines.

Gridulator: Make pixel grids, lickety-split

Previous 1 2 3 4 Next