How to make any app look like iA Writer

Justin Blanton -

I’m kind of obsessed with iA Writer for Mac. (If you haven’t already, you might want to read my initial impressions of the app, which I penned soon after it was released last month.) The more I use it, the more I like it.

In fact, I’ve become so enamored with its aesthetic that I’ve spent a ton of time trying to replicate it across a few of my most-used apps–including the Readable bookmarklet I use for reading (long) web articles in a browser–and, I think it’s safe to say, I’ve succeeded.

The three variables

Font

This was the easiest part, and required no real work from me given that I had purchased Nitti Light–the font used by Writer for Mac and iPad–well before the Mac app was released. I fell in love with the font when I first saw it in iA’s iPad app, and when I realized it was available for purchase, it was a no-brainer for me. For my money, Nitti Light is the perfect font for long-form writing and reading.

Font color

I spent forever trying to suss out the font color from the application’s bundle, but ultimately came up empty. I looked in all the NIB and PLIST files, but couldn’t find where they were defining the font color.

Finally, I decided I would just fire up the DigitalColor Meter and see if I could grab it that way. The reason I didn’t go this route from jump is because I was worried about the anti-aliasing throwing me off from the true color (especially given that Writer doesn’t let you modify the font size).

Then, it dawned on me that even at its set font size, I could just paste in a unicode glyph with a large solid area and see what the meter gave me. I tried multiple glyphs, and while the anti-aliasing still was a mild hindrance, there was no doubt I had determined the font’s specified color: #424242 (rgb(66,66,66)).

Background image/color

It was fairly trivial to get a copy of the image Writer uses to tile the background; I simply scoured its application package looking for images appropriately named. You can find the image here:

.../iA Writer.app/Contents/Resources/English.lproj/backgroundPattern.png

Great, so we have the actual image, but what about the most likely scenario where we can’t use an image for a background, and instead must specify a solid color?

As you can tell by just looking at the image (especially if you zoom in a fair amount), it basically is just white/grey ‘noise.’ Given that the color range of the small blocks that make up the image isn’t terribly large, I figured I could get the ‘general’ color of the image via Photoshop using Filter > Blur > Average, and sure enough the calculated color is pretty spot-on: #f5f6f6 (rgb(245,246,246)).

How to use this information

Armed with the above information, you obviously can simply change the font/document settings of your favorite app to match the values I determined. (I, for example, have done this for both nvALT and MarsEdit.)

However, you, like me, may want to use this setup for long-form reading, as well as writing. I recently wrote about an uber-configurable bookmarklet called Readable–that sanitizes web pages and makes them infinitely more, well, readable–and noted that I had configured it to use Nitti Light and the Solarized color scheme, which scheme I’ve written about before.

While Readable offers more configuration options than any other bookmarklet of its type, it doesn’t explicitly allow for the defining of a background image (though, of course, it does let you define the background color); however, it does provide a simple mechanism by which you can use your own custom CSS. Realizing this, I set out to determine what CSS would be needed to make Readable render web pages to look like Writer.

It took quite a bit of work to figure out which element’s background needed to be styled for the image to take, and as it turned out it actually was more than one, namely box and background. Once I had determined this, the resulting CSS¹ was rather trivial:

#box, #background { background: url(path/to/file) repeat; }

So, when configuring Readable, set the font to Nitti Light, set its color to #424242, set the leading to 1.5, and then drop the above CSS into the More CSS box. Size to taste.

That’s it. Now everything you write and read on your Mac can be made to look almost identical to Writer.

FOOTNOTES
  1. I believe there is some rule in Chrome–my browser of choice–that forbids you to reference local files within an iframe (I could be completely wrong about this, and spent no time researching it), and I’m not sure at all about other browsers; the easiest thing to do is to just put the file on a web server somewhere and reference it via HTTP, like you would any other image. ↩