How to Use and Customize Safari Reader in iOS

Posted by Jim Tanous on April 9, 2016

Many websites are packed with information, but sometimes you just want to focus on a particular news article or review, especially on a mobile device like the iPhone or iPad where screen real estate is at a premium. Apple’s solution to this issue is Safari Reader, a feature in the company’s Safari Web Browser that attempts to display a website article as a single distraction-free page, without ads, unrelated graphics, and other website design elements. Here’s a quick overview of how Safari Reader works in iOS with the iPhone and iPad, and how you can customize its look to match your personal website reading tastes.

Using Safari Reader on the iPhone and iPad

To use Safari Reader, first launch the Safari app on your iOS device running iOS 9 or higher (Safari Reader is available on earlier versions of iOS, but the steps and screenshots focusing on Reader customization reference iOS 9). Safari Reader is only available when viewing an article on a website (as opposed to a website’s homepage, for example), so navigate to your favorite site and tap to open a specific news story, review, editorial, or tip.
With the article loaded, look at the left side of Safari’s “Smart Search” address bar and you’ll see the Reader button, denoted as four horizontal lines. Tap it to view the currently loaded article in Safari Reader.
safari reader ipad
As you’ll quickly see, Safari Reader replaces the entire website layout with a simple white background, black text, and no extraneous information beyond the article itself. Users can now simply scroll through the article to read it, making the online reading experience much better on mobile devices.
safari reader before after ipad
Safari Reader doesn’t make any permanent changes, of course. Once you’re done with the article, just tap the Reader button again to return to the default website view. Safari Reader also won’t persist after you leave the page (i.e., reloading the current article or clicking a link while in Reader view will return you to the default website view). This means that you’ll need to manually enable Safari Reader each time you visit an article, which makes sense considering that the Reader view hides everything but the article itself, including all website navigation links.

Customize the Safari Reader Font and Background Color

By default, Safari Reader will display a website’s article using Apple’s new San Francisco font on a white background. While Apple doesn’t offer complete control over how Safari Reader looks, users at least now have several options for customizing their Safari Reader experience.
To change Safari Reader’s font and background color on your iPhone or iPad, first launch Safari Reader using the steps above and, with an article in Reader view, tap the font button on the right side of Safari’s Smart Search address bar (denoted as one small letter ‘A’ next to a large letter ‘A’).
safari reader font size color options
This will reveal a new menu with three methods of changing the way that Safari Reader looks: font size, background color, and font style. Font size, located at the top of the menu, lets you make the Safari Reader text larger (by tapping on the larger ‘A’ on the right) or smaller (via the smaller ‘A’ on the left).
The background color options change both Safari Reader’s background color and font color. With the default ‘White’ option, you’ll see dark black text on a crisp white background; ‘Sepia’ will display a light sepia background with dark brown text; ‘Gray’ uses a medium-gray background with light gray text; and finally ‘Black’ uses medium-gray text on a dark black background. The image below previews each of the color options, although users will want to experiment in person to determine which color combination they prefer.
safari reader background colors iphone
The final Safari Reader option is font, with Apple providing (as of the date of this tip) eight font styles from which to choose, comprised of six serif fonts (Athelas, Charter, Georgia, Iowan, Palatino, Times New Roman) and two sans-serif fonts (San Francisco, Seravek).
safari reader fonts
With all of the Safari Reader customization options, the user can easily test different combinations by simply tapping on them. The results of the change will display in the Reader view immediately, without the need to save or reload Safari. Once you’ve settled on a size, color, and font style combination, Safari Reader will remember the selections for future sessions until you change it.

Safari Reader Caveats

Safari Reader is a great tool that can make reading articles online, especially lengthy articles, a much more enjoyable experience on your iPhone or iPad. But there are a few issues users should keep in mind.
First, Safari Reader will analyze a website’s article and attempt to display it accurately in Reader view, including any header or in-body graphics. However, some websites use non-standard formatting that may result in important information, such as animated or interactive graphics, pull quotes, and captions being omitted from the Safari Reader layout. Keep this in mind when reading more complex articles in Safari Reader, and you may want to briefly skim an article in its default layout when you’re finished reading to make sure that Safari Reader displayed all pertinent information.
The second issue deals with multi-page articles. Again, Safari Reader will attempt to detect that an article is divided into multiple webpages and it is usually able to successfully combine all pages into the single scrolling Reader view. As noted above, however, some websites use unique implementations and code for their multi-page articles which Safari Reader may not be able to process. In these cases, when a user reaches the end of an article’s first page in Reader view, Safari Reader will either erroneously reload the first page again, or simply stop as if no additional content existed. It’s often clear from the text itself when an article ends abruptly at a page break, but remember to close Reader view and quickly check the site’s default layout if you think you’re missing a page or more. If so, you’ll need to manually navigate to the next page and then re-launch Safari Reader.
The final consideration when using Safari Reader is the potential importance of layout and design. While the experience of reading most articles on the Web won’t suffer (and may actually be significantly improved) from the use of Safari Reader, some content is carefully crafted in terms of layouts and fonts to add to the article’s story. Sites like The New York TimesThe Atlantic, and The Verge all frequently produce online content with unique visual layouts and styles which will be lost when using Safari Reader. So, while the choice of how to view certain content is up to you, you may want to consider skipping Safari Reader in these situations.

Safari Reader on the Mac

This tip focused on Safari Reader in iOS, as using the feature on smaller devices like the iPhone and iPad is arguably where the user receives the most benefit. But if you love Safari Reader on your iDevice, you’ll be happy to know that Safari for OS X also has Reader View built-in, and it functions virtually identically to the way it works in iOS.
Note, of course, that the same caveats for Safari Reader in iOS described above also apply to Safari Reader in OS X. But as long as you keep these few considerations in mind, you can enjoy this great feature both at home and on the go.

Leave a Reply

Your email address will not be published. Required fields are marked *

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.