Control Your Type: Google Fonts + Chrome = trouble?

tl;dr: If you let Google Fonts host your type for you, it might look terrible for some users on Chrome, especially Open Sans. Solution is below — you’ll probably need to host it yourself.


It’s not supposed to look like that

A user recently reported having trouble with the typography at Highrise:

This is happening to everyone here at our company. 100+ people here in the building. We took a vote and they had me contact you.

-Alex

Hmm, that can’t be good.

Let me back up…

A couple of months ago we changed the typography of Highrise. It’s part of a much longer and larger project to refresh the entire app. Over months, we went though dozens of different choices. Eventually we landed on Open Sans. Open Sans is a beautiful typeface Google commissioned and open sourced. And for that reason it’s used in a bunch of places not the least of which are many Google sites.

Font Reach shows over 190K sites using it. It’s the #6 most popular font in their catalogue. The biggest sites on the internet are using it: Google, WordPress, Mozilla. Even Chase, the bank, uses it.

And we started using it. People dug it.

https://twitter.com/gregormckelvie/status/665085345613160448

Some it took a moment:

Right away though we had someone complain:

Is there a way to change the font?

Uggh. They don’t like it?

They sent in a screenshot.


Yeah, that doesn’t look right. But then looking at the screenshot deeper:


It looks like their whole system might be pixelated/non-aliased looking. Turns out having “Cleartype” on can make a big difference. So the solution was just to recommend turning on Cleartype. That should improve Highrise as well as their entire system.

Still, I wondered how many people were having this problem. We didn’t hear too much about it, until the above email from Alex that it was affecting 100+ users in their company.

Ok, so let’s tell him to make sure Cleartype is turned on. Hmm, get some push back. It’s just affecting Chrome, not Firefox. Can’t be Cleartype then as that would be a system wide problem.

Looking more for Google Chrome font rendering problems you’ll quickly find: How to Fix Google Chrome Font Rendering Issues.

Ah, I guess Chrome tries to use some fancy 2D GPU accelerated graphics… But that doesn’t always work on your machine, especially if your video card doesn’t support it. A person in that article: “In my case, “GPU Accelerated Canvas 2D” was enabled in Chrome. I disabled it, pressed the button on the bottom of the page to restart Chrome, and the problem went away.”

But Alex tried disabling this, and it still didn’t work. Besides 100+ people at his company couldn’t possibly have outdated video cards?

So what the hell? Kept looking.

Maybe there’s something specific about Chrome and Open Sans? Bingo.

A bug?!

1. Go to any site that uses Open Sans Normal 400 in Chrome Windows

2. It appears condensed

3. Even on the google font site

uninstalling a local version of the ‘Open Sans Light’ font from my Windows machine fixed the issue.

Dammit.

So Chrome is using the Light/condensed version of the font when it shouldn’t be. When it sees “Open Sans” at weight 400, it picks Open Sans Light locally from your computer. But 400 should just be the “normal” font.

Let’s look at how Google hosts this font using WordPress.com for example.


Which links: //fonts.googleapis.com/css?family=Open+Sans:400,300

Looking at that:

/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

And what does src: local() do?

src

URL for the remote font file location, or the name of a font on the user’s computer in the form local(“Font Name”). You can specify a font on the user’s local computer by name using the local() syntax. If that font isn’t found, other sources will be tried until one is found.

Aha, so it’s using the local version of Open Sans first, and somehow Chrome thinks Open Sans Light is the same as Open Sans at 400.

How can we fix this? We can stop using local()…

And host them ourselves. Here’s more detail.

1) First, get the fonts themselves from Google.



How about the “you don’t need to download” bit? 🙂 Don’t believe them.

Get the Zip file.

2) Once you have the fonts in the Zip file, you can use Font Squirrel to convert them to the appropriate web format:

http://www.fontsquirrel.com/tools/webfont-generator

We used the Basic conversion.

3) Next we chose Amazon’s S3 with Cloudfront in front to host the files ourselves. You’ll need to configure CORS on the S3 bucket.

4) Instead of using the @font-face declarations of Google’s, create your own.

You can take a peek at ours here: https://gist.github.com/n8/64748ac46ee67051dc45

For example:

@font-face {
font-family: 'Highrise Open Sans';
font-style: normal;
font-weight: 400;
src: url("//static.highrisehq.com/web/fonts/opensans-regular.eot?#iefix") format("embedded-opentype"), url("//static.highrisehq.com/web/fonts/opensans-regular.woff2") format("woff2"), url("//static.highrisehq.com/web/fonts/opensans-regular.woff") format("woff"), url("//static.highrisehq.com/web/fonts/opensans-regular.ttf") format("truetype"); }

You’ll notice that there are no more src: local references. We don’t want anymore collisions. So we use the src of the font on our server. Never on the local machine. We’ve also called it “Highrise Open Sans” in order to avoid any more collisions.

5) Now, when we want to use Open Sans in our CSS, we call for “Highrise Open Sans” as our font-family:

input, textarea, select, button, input[type=submit] {
font-family: "Highrise Open Sans", "Helvetica Neue", helvetica, sans-serif; }

And done!

That looks a lot better.

-Alex

That was a pretty easy change as changes go, and worth it for those folks going through this. I suspect there’s also trouble with other fonts and odd local versions.

One trade-off is that our users will always have to download the font from our servers rather than use their local version. So there’s a performance hit. But since our users are mostly return visitors, they’ll have the font downloaded and cached on subsequent page visits.

Huge thanks to the whole Highrise team for figuring this out, and Grant Blakeman, a designer and developer who has been giving us a ton of help over here, for the solution!

Since Google Fonts, Open Sans, and Chrome are definitely popular, if you’re running into the same problem, hopefully we can save you some pain in getting this fixed!


P.S. It would be awesome to meet you on Twitter, or see the awesome new stuff we’re doing at Highrise.

What are you drawing, Lily?


I have more than a few friends who keep talking about the businesses they want to start. But every week there’s a new excuse.

They can’t make up their minds about the best credit card processing company, or the best blogging platform, website CMS, or shopping cart, or the best book that will guide them to success.

Of course, most people invent all these obstacles so they never actually have to start and risk failing. Their ideas can remain flawless dreams.

But others see the Ubers, Dropboxes, and Airbnbs, or whatever else is worth a billion dollars this week, and they think they need to create something as big, and as perfect.

Airbnb has raised $2.39 billion at a valuation of $25.5 billion. That’s an awfully big company to look up to.

But Airbnb was a mess when they started.

Paul Graham told them their idea was crazy.

And he was right. Airbnb’s idea wasn’t just crazy, it wasn’t good — they wanted people to rent out real airbeds, and hosts were required to make breakfast for their guests. After 8 months in business, they were stuck making $200 a week in revenue.

Most of us would have been “smart” enough to give up. But instead they kept on sucking.

At one point they flew to New York with a nice camera to help users update their listings with some high resolution photographs. That helped them book $400 a week in revenue.

Still a laughable amount of money for three guys trying to make a living, but it was enough of a bump to keep them excited.

So they kept on sucking… until they didn’t suck anymore.

Of course, most of us still aren’t going to create something anywhere near as big as Airbnb, but imagine how much we’ll learn if we just start.


The Airbnb guys remind me of a band:

When I think about kids watching a TV show like American Idol or The Voice, then they think, ‘Oh, OK, that’s how you become a musician, you stand in line for eight fucking hours with 800 people at a convention center and… then you sing your heart out for someone and then they tell you it’s not fuckin’ good enough.’ Can you imagine?

It’s destroying the next generation of musicians! Musicians should go to a yard sale and buy an old fucking drum set and get in their garage and just suck. And get their friends to come in and they’ll suck, too. And then they’ll fucking start playing and they’ll have the best time they’ve ever had in their lives and then all of a sudden they’ll become Nirvana. Because that’s exactly what happened with Nirvana. Just a bunch of guys that had some shitty old instruments and they got together and started playing some noisy-ass shit, and they became the biggest band in the world. That can happen again! You don’t need a fucking computer or the internet or The Voice or American Idol.

Dave Grohl, drummer for Nirvana


I was watching my nieces, Madeline and Lily, when Madeline was 3, and Lily was 4. They both sat there eagerly making things. They didn’t have excuses that they didn’t have the right markers or the right paper or the right idea.

I had run out of blank printer paper, so they started making paper airplanes out of magazine inserts. Madeline was thrilled to draw with whatever utensil she could get her hands on. Lily had found a pink ribbon someone had dropped on the street. She picked up the forgotten trash and later turned it into a kite.

Of course, their airplanes didn’t work. I have no idea on earth what Madeline had drawn. And the kite didn’t have a chance of actually flying. But it didn’t matter. They didn’t care. It was a start and you can see them just get better and better at making these things as they practice and practice and practice.

Later I heard of a conversation Lily had with her mom that sums up how little these kids care of what others might deem as “perfection”, and how much they just care about putting their best something — anything — they’ve created into the world.

Lily’s mom: Lily, what are you drawing?

Lily: I don’t know, Mom. I haven’t drawn it yet.


P.S. It would be awesome to meet you on Twitter, or see what all my own sucking eventually led to with what I’m now doing at Highrise.

Knowing the words is half the battle


One of my favorite career stories is this one from Michael Beirut:

I designed little magazines when I was in the third and fourth grades, and I made logos for my friends’ bands when I was in the seventh grade. I could do hand lettering, and if someone wanted an animal in the logo, I could do that; if someone needed a poster for the school play, I could do that, too.

All along, I had no idea that what I was doing was called graphic design. I lived in the middle of nowhere at a time when no one knew anything about something like graphic design.

By accident, I happened to find a book in my high school library…it was called Aim for a Job in Graphic Design/Art. I opened the book up, and it was like receiving an instruction manual for my future career: it was all right there. I was about 15 at the time, and I thought, “This is what I want to do.”

This bears repeating: one of the world’s preeminent graphic designers didn’t know graphic design was a thing — let alone a job you could get paid for — until high school.

He knew what the idea of graphic design was, and he even knew how to do it. But he didn’t know what to call it.


Perhaps the biggest obstacle to gaining skills in a given domain is knowing the right words. Being a beginner is intimidating because you don’t speak the same language as experts, who have often forgotten what it’s like to be a beginner.

If you’ve ever had to talk to a car mechanic, you know how it feels. In the immortal words of George Costanza:

Of course [car mechanics] are trying to screw you! They can make up anything, and nobody knows! “Why, you need a new Johnson Rod in here.” Ohh…a Johnson Rod…Yeah, well, better put one of those on!


Here’s another example. Millions of people use iPhones, but they don’t know the official names for all the interface widgets and the underlying stuff that makes them work. It doesn’t affect their ability to use an iPhone, because the iPhone is well-designed.

Customer:

I went to Twitter, then hit the thing that said “Notifications”, and a new screen came in, then I saw some messages, and it stopped working.

By contrast, an iOS developer knows the domain words, so they can be more precise:

Developer:

The customer opened the Twitter app, then selected the Notifications Tab in the Tab Bar. The Notifications Table View rendered for a moment but then the app crashed. The issue might be the Notifications View Controller or some malformed data in one of the notifications.

In product design, this is related to User Experience (UX). Part of a UX designer’s job is making sure a product’s internal language is either hidden away, or translated into common words that users can understand and interact with. If you don’t do this, you might end up with this kind of thing.

A customer support rep’s job is the opposite: they translate customer-speak into domain words so a specific problem can be resolved — especially in the case of a bug report that gets passed along to developers.


Here’s one last example. I’ve been an obsessive music fan for most of my life, but I’ve never formally studied it, so I don’t know the terminology. Check out this video of Jeremy Leaird-Koch building an electronic song from scratch on an OP-1. (Jump to 1:25 or so.) Be sure to watch the subtitles.

If you make it through the whole video, you’ll see a ton of expert language:

  • Sequencing
  • Swing
  • Delay
  • Kit
  • Wubbing
  • Phasing
  • Filters
  • Ambient poly lead
  • Modulation
  • Envelope sharpening
  • Arp (arpeggio)

I’ve put in 30+ years of music listening, and these phrases might as well be in a foreign tongue.

So it’s not enough to have exposure to the outer surface of a domain. If you want to level up your understanding, you have to be willing to feel ignorant for a while and study it in depth, until you find your sea legs and pick up a handful of those all-important words. There’s no magic to it. This willingness, and a lot of practice, is all that separates the experts from the beginners.

Once you’ve learned a bit of lingo, you’ll find that the words help you ask questions. The questions help you learn how things interact. When you know how things interact, you can start understanding the system as a whole. And pretty soon, you’re an expert too.


As experts who’ve put in the time, then, how can we make things more approachable for beginners? Wouldn’t it be nice if we could simply eliminate all jargon and special words? Then we’d have no problem, right?

Well, then we’d have a new problem: we’d have no way to talk to each other! Any sufficiently complex system needs names for its component parts— otherwise there’s no way to talk in detail about the system. So eliminating internal complexity isn’t always possible or even desirable. Still, there are a few things we can do to help.

Use plain words instead of fancy words.

For example, if you’re a programmer modeling a message sent by a client, call it ClientMessage instead of ExternalActorSubmissionContent.

Give abstractions familiar names, so they seem less foreign.

In Basecamp 3, we called group chats Campfires and direct messages Pings. They’re still abstractions that users have to learn, but at least they’re helpful names—a little descriptive and a little less intimidating.

Listen to how beginners talk about the problem, and inherit their language.

We did this recently by noticing our customers called Basecamp projects “Basecamps.” They’d say, “Oh, I made a Basecamp for that.” So we ran with it and called Basecamps Basecamps instead of Projects.

Don’t assume simple words are adequately clear.

Trying to be too simple or succinct is usually worse than being clear and verbose. This is why people are confused about what food is “healthy.” Even though healthy is a simple word, it’s an unclear way to define food.


If you’re in the privileged position of being an expert at something, don’t forget what it felt like to be a beginner. Let those battle scars inform how you communicate, and choose your words with intention. If you need a reminder of how it feels to be a newbie, just pick yourself up an OP-1 and let me know how that ambient poly lead turns out!


We worked hard to make Basecamp 3 the clearest and friendliest version we’ve ever written. Check it out and see more examples over at basecamp.com.

Pulp Fixing

Piecing together a page of newsprint. (Photo courtesy Graphic Conservation Co.)

Human history comes with a long paper trail, and there’s a company in Chicago whose mission is to preserve and restore that physical record. Graphic Conservation Company is a 95-year-old lab that specializes in repairing works on paper—anything from illuminated medieval manuscripts to personal family documents. It has undertaken some incredibly complex projects over the years, including restoring the state of Illinois’ copy of the House resolution for the 13th Amendment. Graphic Conservation can smooth wrinkles, remove ancient adhesive residue and even create new paper from scratch to patch holes in damaged items. Listen to our episode on the business or scroll down to read the transcript.

While reporting this story, I discovered a small personal connection to Graphic Conservation Co. The business started as a specialty book-binding department within RR Donnelley, a Fortune 500 commercial printing company. It’s where my dad, who immigrated from Hong Kong to the U.S. in the 1960’s to attend college, worked as an electrical engineer for his entire career. He started at Donnelley during the period that the company sold its Graphic Conservation Department to its then-managers, who made the lab into a private business. Donnelley’s legacy lives on at Graphic Conservation Co., which still uses equipment from the 1930’s. You can see some of those machines in the photo below, taken in 1935.

Graphic Conservation Co. started as Donnelley’s Extra Bindery Department, pictured here in 1935. (Photo courtesy Graphic Conservation Co.)

The kinds of projects that Graphic Conservation takes on fall into a few general categories. There are works of art, like this 1871 Currier and Ives lithograph of the Great Chicago Fire. The piece arrived at the lab with discoloration from acidic framing materials. The conservators cleaned up the acid stains.

Before (left) and after restoration. (Photo courtesy Graphic Conservation Co.)

Much of Graphic Conservation’s recent growth has come from individual clients bringing in personal documents like immigration papers and marriage licenses. The lab has also worked on mementos like old letters, photographs and tickets. Below is a marriage license from 1894. The document was very brittle and was rolled up in fragments. Conservators flattened all the pieces, put them together and filled in the parts where the ink was gone.

Before (right—just kidding! Of course it’s the lefthand image) and after. (Photo courtesy Graphic Conservation Co.)

Another personal item that came into the lab was this Holocaust identification card. In this case, Graphic Conservation’s staff used Japanese tissue of a similar tone to patch the holes and stabilize the document. The goal here was repair and preservation, so the conservators did not fill in lost ink as they did for the marriage license above.

Photo courtesy Graphic Conservation Co.

Besides art and personal documents, Graphic Conservation also works on priceless documents. The most notable recent example is the state of Illinois’ copy of the House resolution for the 13th Amendment abolishing slavery. The vellum document, one of just a handful of commemorative copies signed by Abraham Lincoln and others, had been folded and wrinkled almost to the point of illegibility.

Vellum documents are made from animal hides. (Photo courtesy Graphic Conservation Co.)

Graphic Conservation’s staff re-humidified and pressed the document repeatedly over many weeks to remove the wrinkles and help the ink re-adhere to the vellum. It did this project pro bono for the state.

Photo courtesy Graphic Conservation Co.

Graphic Conservation has more before and after examples on its website. If you have a document you’d like to get repaired, the company will write up a technical condition report and give you a quote for free. (The staff does need to inspect the item in person at their office in Chicago.)


Transcript

WAILIN: In 1864, a year after Abraham Lincoln issued the Emancipation Proclamation, a lithographer in Chicago made 52 commemorative copies of the proclamation. These were called broadsides and each one measured 18 by 24 inches, with a portrait of Lincoln in the middle and some additional illustrated vignettes.

TANNER: Visually, I just love kind of the cadence of it, how it’s illustrated on top. Then you read the first part of the proclamation and then it’s illustrated right in the middle and there’s a beautiful picture, a portrait of Lincoln front and center, and then it’s handwritten again at the bottom.

WAILIN: That’s Tanner Woodford. He is the executive director of the Chicago Design Museum and a lecturer at the School of the Art Institute of Chicago. Of the 52 known copies of this commemorative broadside, number 28 belonged to Tanner’s grandfather, who kept it on the wall next to his television.

TANNER: I’m not really sure, honestly, how it came into his collection and I asked him several times, and each time I got a different story (laughs), so I think at some point he was just being a grandpa, you know (laughs), just telling me stories, just trying to get me excited about history.

WAILIN: There was the story about how an ancestor rode horseback across the United States burning down towns and stole the document. There was the one about how Tanner’s grandfather found it in the wall of a house he bought. And there was the story about how the family is somehow related to Zachary Taylor or Herbert Hoover or maybe both. Whatever the real story, the broadside of the Emancipation Proclamation passed from Tanner’s grandfather to his mother to him, and by the time it reached him, it was showing its age.

TANNER: There’s a big piece of yellowed tape at the bottom where there was previously a rip and somebody else had tried to tape it and put it back on their wall. There’s a very large stain that takes up, probably, what do you think, that’s an eighth of it or so? And it looks like it was some sort of a water stain at some point in time, and then there are pretty clear rips throughout the entire thing from where it had been rolled and you know, maybe carried on horseback, I have no idea.

WAILIN: Tanner wanted to look into getting the document repaired, but he didn’t know where to go. And then one day, he was giving a friend a tour of his museum and his friend said, hey, you like art history. I know someone you should meet.

RUSS: Hello, my name is Russ Maki. I’m president of Graphic Conservation Company.

WAILIN: Graphic Conservation Company in Chicago is 95 years old and specializes in repairing and protecting works on paper, anything from fine art to historical artifacts to personal documents. On any given day, Russ Maki’s team might be removing decades-old masking tape from a Matisse or piecing together a marriage certificate found in someone’s attic or preserving an illuminated manuscript from the fifteenth century.

RUSS: It’s also, frankly, the only business I’ve ever been in when I’ve delivered a product and everyone in the room has been in tears. There’s a phenomenal connection between paper and the human record and what that means to people, and we think about that a lot here.

WAILIN: Every piece of paper that comes into the lab tells a story — not just what’s on it, but the story of its own creation and the journey it’s been on since then. And now you’ll hear the story of Graphic Conservation Company on The Distance, a podcast about long-running businesses. The Distance is a production of Basecamp. Introducing the new Basecamp Three. Basecamp is everything any team needs to stay on the same page about whatever they’re working on. Tasks, spur of the moment conversations with co-workers, status updates, reports, documents and files all share one home. And now your first basecamp is completely free forever. Sign up at basecamp.com/thedistance.

RUSS: There’s no predictability to this business whatsoever. I have no idea what’s going to walk through the front door and that frankly is some of the fun of it. Every day we get something new and sometimes it’s through, you know, a FedEx pack or UPS. Sometimes it’s an armed courier. Sometimes it’s just, someone just knocks on our door and says, “I’m here.”

WAILIN: Graphic Conservation keeps a narrow focus on paper and vellum, which is a material made from animal hide. The company’s clients include institutions like art galleries, auction houses and museums, which might not have in-house paper experts or, in the case of museums, need extra help getting an exhibit ready. Increasingly, the lab has been seeing business from individuals with personal or family documents.

RUSS: Somewhere, tucked into their crawlspace, they have a marriage license that’s their great grandparents’ or an immigration paper from Ellis Island as they came over, and it’s usually in pretty bad shape. It was probably rolled up at one time and then crushed between a book or whatever, and they realize that, “Hey, there’s only one of these, and we’d like to preserve that for our future generations.” And they find us through the Internet, which is the big change in this business. So the average client ranges from an individual who has never done this kind of work before, who doesn’t know what a conservation lab is all about, to a very sophisticated, educated client that has collected art at the highest levels for their entire lifetime.

WAILIN: The work that comes into the lab can have significant financial value, like if they’re collectibles or pieces of fine art. Or they could be items whose value is measured in sentimental or emotional terms. The company once repaired a letter that a client’s father had written to Santa Claus in 1930, during the Great Depression, admitting that he hadn’t been very good that year but asking if Santa could bring him an apple for Christmas.

RUSS: We made facsimile copies of the original for each of the siblings to have in their house, and to remind them that you know, if you ever thought that you had a bad day, you really have not had a bad day.

WAILIN: Then there are those rare jobs that involve priceless works. In 2011, the lab restored the state of Illinois’ copy of the House resolution for the 13th amendment abolishing slavery. The vellum document, which was one of just a handful of commemorative copies signed by Abraham Lincoln, needed months of painstaking work, which Graphic Conservation did for free in this case. Russ remembers the day it arrived.

RUSS: When the team, along with the security personnel, left the lab, we all stood around it, the entire team. Not a word was spoken for minutes. You’re looking at a watershed moment in American history and I think the exact word count of the Article 1 of that is 35 words: that neither slavery nor involuntary servitude except as punishment for a crime shall exist within these United States, or something to that effect. In 35 words, slavery was abolished. Today, that would be a 2,000-page document, right? So you’re looking at the utter simplicity of the prose. You’re looking at the magnificent calligraphy on this vellum document and you can just transport yourself back to February 1st, 1865, when it was signed and what Congress must have looked like that day as that was taking place. People risked their lives by signing that document and they knew they were risking their lives, and sure enough, President Lincoln was dead 75 days after he signed that document.

WAILIN: Graphic Conservation Company has a staff of eight people working in an 8,000-square foot lab with an expansive view of a railroad yard, the south branch of the Chicago River and the skyline, all serving as visual reminders of the city’s industrial past and present. The company itself comes out of this legacy. Graphic Conservation started in 1921 as a specialty department within RR Donnelley, a Fortune 500 commercial printing company founded in 1864. The department was originally called the Hand Bindery or the Extra Bindery because it focused on restoring fine books and making hand-tooled leather bindings. The group later moved from books to paper and was renamed the Graphic Conservation Department. In 1982, as the economy was in a recession, RR Donnelley sold the department to the managers who were running it, and Graphic Conservation became a private company.

RUSS: So we were part of Donnelley for the better part of 60 years and have been separate and apart from them for the last 34 now, and today our work — we do some work in book, but we’re one of the largest private paper conservation labs in the country.

WAILIN: Graphic Conservation still uses some cast iron book presses and other equipment, including a pencil sharpener, that date back to the 30s. A lot of the paper conservation process itself has also remained unchanged. And even though no two projects are quite alike, the lab sees a lot of the same problems over and over. They deal with rips, creases, water damage, tape residue or the telltale brown stains of acid burn. Maybe the document got so brittle that it flaked off into little fragments that have to be pieced back together like the world’s most tedious jigsaw puzzle. Some of the pieces that come in are newspaper pages or print advertisements or tickets, things that were never meant to last very long. Other times, something was put in a bad frame and got damaged. Russ, who became owner of Graphic Conservation in 2009 after working at a specialty paper company, doesn’t blink at much anymore.

RUSS: We had a client call us from a high-rise building. They, for some reason, on a windy day, decided to open all their windows and I think they got their art framing supplies from a big-box retailer, and they had one single hook in the wall for each of their four Warhols. Well, the Warhols flew off the walls, and unfortunately they were framed in glass. So glass shattered each one of these, or punctured each one, and we had to repair them. So yeah, we’ve seen it all. (Laughs)

WAILIN: And the lab’s conservators have fixed it all. They’re able to erase acid burns and water stains, to smooth out creases and scrape off ancient residue from adhesives, sometimes spending hours on a single square inch of paper with a microscope and a scalpel. The staff fills in holes by taking antique paper that matches the piece being repaired, reducing that paper to pulp and reconstituting it. If there’s missing artwork, the conservators can even paint in the lost image or text in a completely seamless way. The company has created new paper to fix posters, photographs and even a letter from the Boston Red Sox to Babe Ruth in 1918, agreeing to pay him a thousand dollar bonus for the season and another thousand if the team won the American League pennant that year. Russ has the before and after images of the letter framed in his office.

RUSS: He cashed both checks (laughs). So it was a good year for the Babe. (laughs)

WAILIN: I see a couple little holes, and some tape on the top left corner by the letterhead.

RUSS: Exactly. So we repaired all those areas of loss and as you can see on the right, the image post-restoration was brought back to life.

WAILIN: What are those blobs under the “Yours truly?”

RUSS: Insect damage. So insects had literally eaten away part of the paper. And you’ll see that with old documents that aren’t properly stored, frequently. It’s sad, but there are some bugs out there that really enjoy eating paper. Silverfish, especially.

WAILIN: Every job that comes into Graphic Conservation requires a series of judgment calls on what kind of treatment to use, and how far to go in preserving or repairing something. In the case of a Holocaust identification card, which arrived in extremely fragile condition, the team filled in missing pieces with Japanese tissue of a roughly similar tone, but didn’t recreate any printing because the purpose was to stabilize the document for posterity, not alter it. With the state of Illinois’ copy of the 13th amendment, which had wrinkled almost to the point of illegibility, Russ and his team discussed what to do for months before starting the treatment, which involved re-humidifying the vellum, pressing it, and slowly repeating that process over many weeks.

RUSS: Ours is a business where you get one shot at it to do it right. Again, everything we do here is the original art or the original document and there are no do-overs.

Russ’ staff members have backgrounds in studio art, chemistry and conservation. The company trains from within, hiring interns and developing them into part or full-time employees. Christina Marusich, the head conservator, started as an intern when she was a student at the School of the Art Institute of Chicago and has been working here for over 30 years. It’s amazing to think that interns are allowed to handle the documents that come into the lab. As a visitor, I was terrified of accidentally sneezing on something, like the Albrecht Durer print from the sixteenth century lying on a worktable that Russ pointed out on a tour of the lab. But interns need literal hands-on experience to learn how to do the work. Here’s Christina.

CHRISTIA: We work a lot as a team, so we’re working alongside each other and can — just learning how things should be touched and moved around and examined, so a very conscientious group here, very gentle and quiet, you know, no fast moves (laughs).

WAILIN: At Graphic Conservation, minor treatments cost in the mid to high hundreds of dollars, with more complicated jobs going well above a thousand dollars. But the company doesn’t charge for assessments. When prospective customers bring in something to be examined, the lab provides a complimentary condition report and outlines a proposed treatment. It also gives a quote, with a guarantee that the final price won’t go over that amount. But there’s no requirement to commit to anything. When Tanner Woodford brought in his copy of the Emancipation Proclamation broadside, it turned out that Graphic Conservation had worked on a different copy of that same broadside, and Russ was more excited to see Tanner’s version than anything else.

TANNER: It wasn’t even so much him trying to sell me on the process. It was more of him just being blown away by seeing another one, you know, just geeking out. That’s the thing I love about them, is they care so much about the artifacts that come in and they’re so knowledgable about them and it’s almost like when they fix them, to me, I get this feeling of really giving this thing back to the world. Russ was like, I just want to see it, if you could just bring it by sometime and I can give you a quote if you’d like, but I really just, I want to see another one.

WAILIN: Tanner did get a technical condition report and a quote from Graphic Conservation. He wasn’t ready to get the work done yet, but on Russ’ recommendation, he replaced his grandfather’s old frame with a better one. Tanner is saving for the restoration work. In the meantime, he hangs the document in his apartment near his television, just like his grandfather did.

TANNER: I could take the Emancipation Proclamation and put it in a flat file and keep it safe for much longer than if it’s hanging on a wall, but what’s the point of having the Emancipation Proclamation if you can’t enjoy it? If anybody ever wants to come see it, just shoot me an email (laughs). I might regret saying that, but (laughs).

WAILIN: When the time is right for Tanner to get his copy of the proclamation repaired, he’ll know where to go. And Russ and his staff are patient. They plan to be around for a long time, focusing on what they do best, and not chasing after bigger volumes or faster growth.

RUSS: To be candid, I don’t want this business to grow beyond a certain point. It’s kind of selfish on my part, but I really, I want to know all of our clients. I want to know every job that’s in this lab. I want to maintain our reputation as being absolutely sterling in this business, and if it gets to the point where we have more work than we can handle, the possibility exists that we can disappoint, and we’ll never do that. The element of trust is gigantic in our business because if you’re going to find us to have us do some work for you, more than likely, you’re sending us one of the most important things you own — important either in terms of financial value or in terms of sentimental or emotional value, and we pay a great deal of respect in that process. It’s important. So we’re not gonna overburden ourselves and we’re certainly not going to over promise.

WAILIN: The Distance is produced by Shaun Hildner and me, Wailin Wong. Our illustrations are done by Nate Otto. Special thanks to Tanner Woodford for telling me about Graphic Conservation Company. If you want to see before and after images of some of their projects, I’ve included them with the transcript of this episode. Look for a link to the transcript at thedistance.com. The Distance is a production of Basecamp, the leading app for keeping teams on the same page about whatever they’re working on. Your first Basecamp is completely free forever. Try the brand new Basecamp Three for yourself at basecamp.com/thedistance.

I’m New Here…

A couple of months ago, I made a big decision. I joined Basecamp as its first-ever COO. Once I came aboard, I was immediately reminded what’s tough about joining a new company.

There’s a lot about the company you don’t know.

And one of the hardest things is where to start.

Especially when you’re in a new role for a company like Basecamp.

I had a head start. Jason and David were clear and unwavering about the charter from the outset: We want to operate the company with as much love and attention and care as we already put into building our products. We want Basecamp the company to be outstanding at every level.


That still leaves a lot of wiggle room. Where do you start with a company that is already so great to begin with? A company that trusts its employees to choose and figure out what to work on. How I can I do that when I’m new?

But that’s the magic. I’m only going to be new once. Being new wasn’t the predicament, it was the breakthrough.

I came in with fresh eyes and an open mind. It was like wearing 3-D glasses. Everything was intensified. I had no pre-conceived notions and plenty of room for new thoughts. I had the gift of fresh perspective.

So what did I do with this gift?

I spent the first week going through our company basecamps. Luckily it was all waiting for me: The marketing basecamp, the team OMG (our support team) basecamp, the data basecamp and many others. They were all there with their to-do’s, message boards, documents and threaded discussions. It didn’t matter how long ago my colleagues commented in these basecamps. It was all there for me to see, review and learn from.

I asked for and received written responses from almost everyone in the company to a message I posted seeking advice for newbies. My colleagues were helpful, generous, funny and a little irreverent in their responses — just like our culture. Advice ranged from …and never, ever, drink the Malört to drink the Malört, it’s totally fine. It’s only gross when you can smell it, are drinking it and for a few short hours afterwards.

I was in several hang outs with my colleagues. Each hang out was different. I listened to their questions and asked where they thought I should start.

I went to our meet up. I got to meet almost everyone in the company face-to-face. It was great. I tried to speak everyone personally and asked them what they thought I should focus on first.

After that I asked questions. A lot of questions. Some were in one-on-one pings and others were in response to threaded discussions about specific topics.

I read books that were recommended to me.

I helped answer support tickets for our customers.

I listened in campfires and piped up when I had a question.

Then something magical happened. Big rocks (from Rockefeller Habits) started coming into my field of view. All the interlocking pieces came together in my mind’s eye. I chose (with a little help from Jason and David) and figured out which big rocks to focus on for Basecamp.

I’m new here and that’s a good thing! 😀

Highrise 2015 — Getting Stuff Done

At the end of 2014, Highrise was spun-off from Basecamp so it could get some well deserved love, and boy did we give it some love last year.

I don’t how you guys accomplished so much. I really don’t. –dhh

One of the ways we’ve been able to accomplish a lot with such a small team (5 full-time, 1 part time) is by implementing a train schedule:

On day one, I established a train schedule — we’d make major announcements on a regular basis. If something isn’t ready, it misses the train. But an announcement is going out; something better be on it.

Another thing we try to make sure to do is to celebrate our successes. And the amount of improvement we’ve brought to Highrise over the last year is very much worthy of celebration. Here are just a few of our favorite things from 2015.

Top 3 we’re most proud of

These three level up the power you have in Highrise. We kept hearing from customers how important it was to make sure contacts were followed up with if they wrote in, how often people had to export contacts and spend more money to send emails from another tool, and that Deals could be so much more useful if they just had a bit more flexibility. Our solutions were Good Morning, Broadcast, and Deal custom fields.

Good Morning — your group inbox // 19-Oct


Broadcast — bulk email // 1-Dec


Deal custom fields // 16-Dec



But we’ve talked with so many customers and have heard many more important needs and insights. From those chats, we realized customers have too many steps getting data in and out of Highrise, so we’ve been nibbling away at them, making things more automatic and native to the tool itself. We’ve added things like the ability to connect directly to your Gmail account, and auto-forward all your mail from Gmail right into Highrise.

We also wanted to really extend our support for email. So we added the ability to help you collaborate and share important emails you find yourself sending over and over with:

And we rounded it all out with features you’d expect in a full class email client like:

We found we were often getting the same questions over and over, so we started making changes to the Highrise Help site, but found we really needed a complete redo. We released the new help site in July.

And once we did, we saw an immediate decrease in the number of tickets coming in. We love talking to our customers, but it’s even better when we can remove the step of having to reach out to us :).

Speaking of tickets, the number one thing that caused the most tickets is imports. There are so many ways an import can go wrong when trying to get data from one system into another. So we also completely redid how Imports work in Highrise. The biggest change was simply avoiding frustration with better indicators when we find something wrong.

And the number one feature request was an iOS app. We delivered a 5 star app early in 2015:


I have been using Highrise for many years and this new app is just the thing I’ve been waiting for!


Really, the above is just a few things we’ve done. We polished, tweaked, and improved so much more based on all the great feedback we’ve been getting. You can see the full (and much longer!) list on our blog.

And 2016 is going to see more of the same. Improvements to all the things we’ve already added, but we hear everyone loud and clear on what they need. Better reporting, an Android app, more powerful filters and custom fields. It’s all coming. 🙂

And if you haven’t checked Highrise out in awhile (or ever) now may be a good time! We’re just getting started.

Why I work remotely (hint: it has nothing to do with productivity).

Illustration by Nate Otto

These are some of the things I can do because I’m fortunate to work for a company that lets me work from anywhere:

  • Hug my kids and feed them breakfast before they leave for school in the morning.
  • Greet and make a snack for them when they get home; hear all about their day.
  • Work from my favorite coffee shop.
  • Spend a week with the whole Basecamp team in our Chicago office.
  • Spend a week with my team in sunny Austin, TX (while it’s -2ºF in Chicago).
  • Run an errand for a friend.
  • Walk my dogs.
  • Work with a friend.
  • Care for a sick child without taking a sick day myself.

After you’ve read all the books and articles about keeping on-task when working from home, setting up the perfect home office, avoiding loneliness, staying connected, sidestepping distractions, and avoiding interruptions I’d suggest one thing: embrace interruptions.

Keep reading “Why I work remotely (hint: it has nothing to do with productivity).”

Putting on the shipping goggles

Shipping!

One of the biggest challenges of shipping a product is knowing when to put on the shipping goggles.

The shipping goggles make you less sensitive to little nits and scrapes and things that might be able to be a little bit better, but really don’t need to be right now. Stuff that we could tweak, but really shouldn’t be grabbing our attention given all the other high value bits we need to hit.

It’s sort of like squinting — you lose the detail, but you can still see the overall big picture shape, form, and function. Your peripheral vision shrinks, but the center is still bright. Knowing when to squint is a good thing to know.

It’s not that the details don’t matter. They do, but details aren’t fixed — they’re relative. And of course any time you talk about details mattering, you’re speaking in very broad generalizations. Some matter, some don’t. Some never matter, some matter later, but not now. And some really matter now and can’t wait for later. Like everything, there are varying degrees.

Part of training yourself to ship is to recognize what details are really worth nitpicking and when. There are no hard and fast rules here — it just takes judgement and experience. These are skills that build over time. Once you’ve been around it for a while you tend to improve your sensitivity to what’s worth doing before you ship and what can wait until later.

And BTW, nitpicking may be construed as a pejorative, but I don’t believe it is. Nitpicking is a valuable skill, as long you deploy it at the right time for the right reasons. One of the penalties of nitpicking at the wrong time is that nitpicking often attracts a crowd. Someone nitpicks this which is an invitation for someone else to nitpick that. And before you know it, half a dozen people are spending time discussing tiny details that really don’t demand that level of attention.

Again, there are no facts around when it’s worth nitpicking and what’s worth nitpicking — I’m only speaking to the awareness how situations unfold.

We can all get better at this. I’ve been shipping stuff for years, but I still have to get better at recognizing the right moments to bring up certain things. I definitely fall into the trap of spending time making changes to things in the 11th hour that are really perfectly fine and can be addressed later if necessary. I absolutely find myself regretting going down a rabbit hole that really didn’t need to be investigated. I still find myself distracting others with change requests or suggestions that really didn’t need to cloud their vision and sap their attention. It’s hard!!


We just shipped and entirely new version of Basecamp! If you’ve got work to do, and it involves other people too, then Basecamp’s for you. It’s an entirely unique way of working.

A few words of advice to brain pickers

A few times a week I get an email from someone asking if they can pick my brain for 15 minutes. I appreciate their interest in what I might have to share, but when it’s pitched as a brain pick they’re making it hard to say yes.

I’m all for giving back, and I try to do it as often as I can, but I wanted to extend three quick points of advice to people who ask to pick people’s brains.

1. Picking someone’s brain sounds like an entirely one-sided appeal. Give me what’s in your head. That’s a hard sell — especially when you are pitching someone who’s busy and occupied with trying to focus on their own business. Whenever you ask someone for something, always ask yourself what’s in it for them? What can you do to fill their brain rather than pick their brain? So, rather than pitching it as all-take, try pitching someone some give, too. “I’d love to ask you a few questions about X, Y, Z, and at the same time share some perspective I have on A, B, an C.” Everyone has perspective, everyone has experiences that are unique to them. The more you can suggest that it’s a give and take, and that the person you want to talk to could learn something from you too, the better the chance of lining up the opportunity.

2. There’s no such thing as a 15 minute call, or coffee, or meeting with someone you don’t really know. It takes 5 minutes just to say hello and warm up. It takes another 5 minutes just to begin to get into a conversation. And then you’re left with 5 minutes — which is never really enough time to have a substantive conversation (which is the kind of conversation you really want to have). So just be honest and set the expectation clearly, because surely the other person doesn’t believe you’ll only be taking 15 minutes of their time. Suggesting it’ll only take 15 minutes either says to me you’re being disingenuous, or you aren’t sure what you really want to talk about. “I was wondering if you might have a full hour for an in-depth conversation about this product problem I’m struggling with… It’s…” makes me take you more seriously. I still may not have an hour, but I know you understand what you’re asking for.

3. Offer to come to them. When you are pitching someone, and asking for their time, you want to make it as easy as possible for them. And one of the best ways is to offer to come to them. Don’t pick a lunch spot or a coffee shop. Don’t even suggest a time (“lunch” is a time, “coffee” is a time). First suggest that you are willing to come to them or meet them wherever and whenever they prefer. That shows you’re courteous, concerned with their time (when they don’t have to go anywhere they save travel time), and it shows you are willing to make more of an effort to make the meeting happen. “If it would be easier, I’d be happy to come to you or meet you wherever is most convenient for you”.

If you follow these three simple rules, I think you’ll increase your odds of landing a meeting with someone. The odds may still be slim, but at least you’re setting yourself up to show that you 1. know what’s in it for someone else (you’re asking but you also have something to offer in return), 2. respect the true time involved to have a substantive conversation (and that that’s what you want to have), and 3, that their location and time is easier for them (and if it’s not, they’ll tell you).

Hope this helps!

The Fidelity Curve: How to weigh the costs and benefits of creating UI mockups


Here at Basecamp we do a lot of paper sketching. Usually we jump straight to code after making a rough sketch. But it’s not a black and white rule. Sometimes we make tappable prototypes to test an interaction, or a pixel perfect Photoshop image to communicate a concept. How do we choose which level of fidelity is appropriate for each project?

I think about it like this: The purpose of making sketches and mockups before coding is to gain confidence in what we plan to do. I’m trying to remove risk from the decision to build something by somehow “previewing” it in a cheaper form. There’s a trade-off here. The higher the fidelity of the mockup, the more confidence it gives me. But the longer it takes to create that mockup, the more time I’ve wasted on an intermediate step before building the real thing.

I like to look at that trade-off economically. Each method reduces risk by letting me preview the outcome at lower fidelity, at the cost of time spent on it. The cost/benefit of each type of mockup is going to vary depending on the fidelity of the simulation and the work involved in building the real thing.

Suppose we have four levels of fidelity…

  • Rough sketch (on paper or an iPad)
  • Static mock-up (eg. Photoshop or Sketch)
  • Interactive mock-up (eg. Framer, InVision)
  • Working code prototype (HTML/CSS, iOS views)

(I didn’t include wireframes in the list because we don’t make them at Basecamp. For us a rough paper sketch is the same as a wireframe, without the extra time wasted on sharp lines and shiny presentation.)

Depending on the feature you’re working on, these levels of fidelity take different amounts of time to create. If you plot them in terms of time to build versus confidence gained, you could imagine something like a per-feature fidelity curve.

Eg. take a simple CRUD web UI, where you’re just navigating between screens.

A fidelity curve for a simple feature. Building real code doesn’t take much more time than faking it.

It doesn’t take much more time to build the real version than it does to mock it when the design is simple. If you were to build out an interactive mock first, you would end up spending twice as much time in total without gaining much out of it.

Going straight to real code is more worthwhile for a simple web UI.

Contrast that with a complicated Javascript interaction. Or a native iOS feature that requires programmer time to build out.

The curve is different for a complex web or native app UI.

If it takes substantially more time to build the real code version, then it may be smart to do an interactive mockup first.


Here’s one thing to be very careful about. If you put too much fidelity into anything that’s not code, you can end up spending lots of time on deliverables that are thrown away in the end anyway. This often happens when people fiddle with colors, positioning, fonts, etc too early.

Spending time on unnecessary details stretches the curve.

These illustrations show that mockups aren’t good or bad, and there isn’t a black and white answer for when to make each kind. But there is a trade off to be made. Being conscious of that trade-off can help you make more rational, economic decisions when people have differing opinions about what to do next in a design process.

We still mainly draw rough sketches on paper or on our iPads when we’re working on UI for Basecamp 3. Now that we offer full-featured iOS and Android apps, I’ve learned that prototyping tools can be useful before building the heavyweight UI code those platforms require. See Basecamp 3: Mobile Prototypes for more.