In IE11, you can click or tap a button in the address bar to put a Web page article into reading view.

Reading view is a new feature in Internet Explorer 11 for Windows 8.1 that helps you focus on the main content of the Web page you want to read. Reading view is a way to experience just the article or blog post you want to read, without the distractions of related (or unrelated) content surrounding the story. Find an article you want to read, switch to reading view, and settle into a great reading experience. When you’re done, just exit reading view to continue browsing on the site.

A web article in reading view

Reading view is a native feature of “immersive” IE – you don’t have to install anything extra – and it’s available for pages with a significant amount of text, in any language IE supports.

How to Use Reading View in IE 11

Using reading view is easy. Just click the reading view button in the address bar. If you’re a keyboard person, you can also use CTRL+SHIFT+R to put a page into reading view.

The reading view button will appear in the address bar for pages that have “article-like” content. If you don’t see it, it means that the page doesn’t work well in reading view.

To exit reading view, tap or click the button in the address bar again), or hit Esc. To go to the previous page, tap or click the back button, or back-swipe if you’re using a touch-enabled device.

What makes a great reading experience?

When we built reading view in IE 11, the goal was to create a view of the page that was noticeably terrific for reading, one where it actually felt better to read this page than the original page – like a temporary reading oasis in your browser just for that article. At the same time, we wanted to preserve the integrity of the content, as well as the story’s URL, author, and other relevant contextual information. While we are not the first browser to integrate it natively, we did see an opportunity to improve on other browsers’ experiences by incorporating legibility best practices that publishers of printed media have been using and refining for centuries, and adapt them to reading online.

There are many things that can contribute to the readability of a page such as font choice, line length, white space, paragraph markers, line spacing, kerning, contrast, and placement of images. Here are a few things we built into reading view in IE11 that we think make a positive difference:

A new font designed for online reading

IE 11 reading view takes advantage of a brand new font for Windows 8.1, called Sitka. It was developed for Microsoft by Mathew Carter, in collaboration with the Advanced Reading Technologies team that previously developed Clear Type text rendering to work well for online reading as well as in print.

One of the advantages of the Sitka font comes from the optical scaling addressed by its different weights. Research has shown that different letter spacing, stroke sizes, and x-height can have a positive effect on the readability of different sizes of text. An optical family contains styles specifically optimized for each size and use case – rather than trying to be one-size-fits-all, like many of the typefaces common on the Web. Thus, you can get terrific legibility in text, and style in display sizes, all with the same family. Reading view for example uses Sitka Small, which is designed with thinner strokes, larger x-height, and looser letter spacing, for image captions, and Sitka Banner, designed with thicker strokes and tighter letter spacing, for the article titles.

In this picture we show three of the optical weights of Sitka at the 2.0em size. From this you can see how the tighter letter spacing and thinner widths employed in Sitka Heading are a better reading choice for text at this size.

In this picture again we show the same three optical weights of Sitka this time at the 0.8em size. It is easy to see how the greater x-height, and looser letter spacing employed in Sitka Small is substantially better for reading the text at this size.

Sitka was also the first typeface family designed with scientific legibility studies integrated directly into the design process. Most fonts do not undergo legibility studies. Those few that do are studied after the font is nearly done. Sitka, however, was repeatedly tested throughout the design process.

Additionally reading view uses a larger than average size font because research has shown that reading speed increases at larger sizes (up to a plateau at very, very large sizes).

A layout that is easy on the eyes

Some Web articles require significant effort to read, because there is so much other content on the page. In contrast, the effect we were going for with reading view in IE 11 can almost be described as one of relief – the page should just feel good to look at. To that end, we gave attention to a few aspects of the layout that can make a difference, specifically aiming to get the right balance of column width, line height, and text size.

For example, because the user can change the font size in reading view it was important for the feature to adjust the line spacing too as the font got bigger. Other considerations were padding (white space) between columns, around images, and between paragraphs. The goal was for the page to feel clean and free of distractions, and this padding helps your eyes and brain quickly identify and distinguish the different elements of the article from each other, as well as provide cues for orienting your path through the text.

No more “Next, Next, Next…” links

There are many articles on the Web that contain multiple and separate pages content. That means you have to click a “Next Page” link to continue reading, sometimes again and again, if the article spans many pages – and then you have to wait for each successive page to load, thus interrupting your reading experience.

Reading view in IE 11 combines the primary content from all pages of an article into a single continuously scrolling page that works great on any device. No need to click those “next page” links. Instead you can just use your finger or your mouse to scroll as you read. You get to have full control the position of the text on the screen.

If you are using a wide-screened device, like a tablet or a large monitor, articles in reading view can display in a multi-column, horizontally scrolling page.

If you like to read on a tablet while holding it in portrait mode, or if IE is displayed side-by-side with another app window, articles in reading view will display in a single-column, vertically scrolling page. As a general rule, if the IE window isn’t wide enough to show two columns of text, then reading view will use a single-column, vertically scrolling layout.

How reading view works

Once a Web site is determined to be reading view eligible, reading view uses a number of heuristics to identify and then extract relevant content from the page, to create a new page (in memory). The Web is a big and dynamic space, and from an engineering perspective, our algorithm aims to retrieve the most relevant content for the largest number of reading view eligible sites. These heuristics look at HTML tags, node depth, image size, and word count to determine what content on the page is the “main” content.

We have put together an interactive Reading View Test Drive demo to provide more details on key rules used in the Reading View extraction algorithm. We hope these tips will help content managers and developers ensure their site looks great on reading view.

Happy reading

We are excited to bring reading view to IE11. Try it out today and please share your thoughts.

— Jane Liles and Bonnie Yu, Program Managers, Internet Explorer

— Marty Hall, Interaction Designer, Internet Explorer