This is where Adam Spooner writes.

Hacking Safari 5’s Reader

Posted on

If you’re anything like me, you do a lot of reading on the web. Which probably means you care about the quality of the typography you’re staring at: the copy’s color, the page’s background, font choice, leading, etc. You may have even tried Arc90’s Readability bookmarklet or Marco Arment’s Instapaper. Readability is great for getting rid of page clutter and user comments, allowing you to focus on the article’s content. Instapaper does the same thing as a byproduct. It focuses on aggregating articles you want to read later. I use both tools religiously; I can’t recommend them enough.

One of the many fantastic features in Safari 5 is called Safari Reader—it’s based on Readability. If you’re reading this in Safari 5, go to View > Enter Reader or press cmd+shift+R (⌘+⇧+R) to try it out. Pretty spiffy, huh?

While Safari Reader is extremely handy, I’m not happy with the default typography:

Safari Reader's default text styles

So, I started looking for ways to adjust the type. Thankfully, the internet is full of like-minded individuals, and I found an article on how to modify the look of the Safari 5 Reader. They recommend creating a backup of the original Reader.html file, and so do I. One thing they don’t mention is you’ll need to restart Safari anytime you want to see your changes. I spent a few minutes hacking away at the CSS and arrived at something I’m happy with:

My altered text styles

Here’s the CSS if you’re interested (“»” denotes a continuation on the same line):

* {
   -webkit-font-smoothing: »
   font-family: "Helvetica Neue", »
      Helvetica, sans-serif !important;
   color: #444;
a {
   border-bottom: 1px dotted #65a2ef;
   color: #0064e5 !important;
a:visited { border: 0; }
a:hover {
   border-color: #cfe2fa;
   color: #4c9bff !important;
p, li {
   font-size: 14px;
   line-height: 21px;
#article { width: 619px; }
#background { background-color: »
   rgba(0, 0, 0, 0.9); }
#container { margin-left: -333px; }
#drop-shadow { width: 600px; }
.page {
   background: #F6F6F6;
   width: 458px;

These styles are down and dirty. So, use them at your own risk. The easiest way to add them to Reader.html without disturbing the default styles is by appending the above code below the last </style> tag and above the first (and only) <script> tag within the document’s <head>.