Create a Comfortable Reading Experience

"Don’t tell us to get glasses"

Unsurprisingly, many viewpoints exist on how to create a comfortable reading experience. I like a large-ish font size and a lot of negative space around the lines, paragraphs, and the body of the content.

Regardless, I believe that it's important to remember that:

It's dehumanizing to design without empathy


  • Just use one (quality, appropriate) font
  • Use just a few font sizes
  • Use one dominant color, while keeping the rest black, white, and gray
  • Spend more thought on your white space than anything else

For most people, reading onscreen is tiring for the eyes, and 25 per cent slower, so users scan the page until they find information relevant to their search and then they read.

The web is a user-driven medium. People want to complete a task, and do it quickly. If a website is difficult to navigate or read, they'll leave.


The premise behind Mobile First Responsive Web Design is that you should trim your site to only the essentials, establish the priority or question the necessity of all elements and focus on mobile before adding complexity for larger/desktop versions of the site.

I began thinking single column. The content should be the star of the show. No sidebars or extraneous post metadata that gets in the way of reading. If you need to use something like Readability or Safari Reader to read my articles, I've failed as a designer.


Thankfully, we’re starting to see something of a Renaissance. Comment-forms are dropping off blogs like vestigial tails. Text sizes are increasing yearly, and sites are being stripped and whitewashed, with most of their old cruft gone without a trace.


In my first few years of blogging, I tended to use every possible widget and feature. I had sidebars packed with clutter. I realised that I’d been focusing on my own obsession with what was possible, rather than what’s actually useful for the reader.

There’s no higher priority than readable text, and yet bizarrely I still regularly find blogs with tiny fonts, long lines, tight spacing, background textures, or inverted colour schemes. Don’t do that. Your words are worth reading, so present them with due care.

When I visit a new blog, my first assessment is whether the content is obscured by the design. I’ll rarely consider whether the design enhances the content. I’m visiting for a purpose, and the purpose is to read.

Summarizing from the post:


I’m sick and tired of cramped websites that have tiny type and don’t use the whole screen well. I’ve come to believe that the problem with reading on a screen isn’t the backlight—it’s that the type is too freaking small. Most designers don’t even know that there is an optimal number of characters per line.


To set up a correct size for you font remember that you won’t probably have readers with super-sight so try to avoid small texts: don’t write your content [as] 10px or 12px, if it’s possible make it bigger. Have you noticed how well-readable are the posts here on Medium? Well, the font size is 22px.

Colors and contrast combined together are the third element of my personal typography formula: text exist to be read, allow the reader to do it in the more comfortable way.

Line-height and blank spaces are also important in typography so don’t be afraid of them: your text need to breathe. As regards the line-height the standard rule for web typography is to set it at least at 140% of your text size.


I’ve noticed how seemingly small things like font and the spacing between letters can impact how I feel when reading online. The right font choice along with the absence of sidebars and popups makes everything feel easier and better to read.

The researchers found that readers felt bad while reading the poorly designed layout. Sometimes, this feeling would be expressed physically with a frown.

Meanwhile, the participants who read content from the good reading layout, felt like it took less time to read and felt better.

People exposed to the well-designed layout were found to have higher cognitive focus, more efficient mental processes, and a stronger sense of clarity.

The quality of your content is the most important thing but how you present that content by choosing the right font and layout still has its place.

Summarizing and excerpting additional info from the article:


People don’t like being distracted when they’re trying to learn something. Ads, popups, sidebars, share buttons, etc are distracting (and annoying). They are serving your goals, not theirs.

So if your site is truly reader-focused, what are the most important pieces?

The content/text of the article in a well-sized, well-spaced typeface. Set in a column with optimal number of characters per line (a CPL of 50-70 is considered ideal) with a line-height of around 130%. And obviously, the content is epic, valuable, and insightful.


When it comes to reading, the Web has become less than ideal. Hard to read type, bad layouts and increasingly larger format ads distract you from the content. It’s too common a feeling that sites try to get us to focus on everything on the page except what we came to the site to do… read the content.


37signals (Jason Fried)
Q: Why do you have a Brutalist Website?
A: I see it more as a letter, not a web site. It just happens to be on the web. Also, re: "In its ruggedness and lack of concern to look comfortable or easy"... For me it's all about comfort and ease - especially when it comes to reading. I don't consider our site rugged any more than a simple letter is rugged.


"Information presented with clear and logically set out titles, subtitles, texts, illustrations and captions will not only be read more quickly and easily but the information will also be better understood and retained in the memory. This is a scientifically proven fact and the designer should bear it constantly in mind."


There you are reading an article when suddenly it’s interrupted by a big piece of text that’s repeating something you just read in the previous paragraph. Or it’s interrupted by a big piece of text that’s spoiling a sentence that you are about to read in subsequent paragraphs.

The default assumption is that pull quotes on the web are fine, because everyone else is doing pull quotes on the web. But has anybody ever stopped to ask why?


Start with
1. Your content must be viewable w/o images, CSS, or JS
2. Your links, buttons, & inputs should work w/o JS


Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.

Don’t tell us to adjust the font size. We don’t want to change our browser settings every time we visit a website!

Don’t tell us busy pages look better. Crowded websites don’t look good: they look nasty. Filling pages with stuff has never helped usability. It’s laziness that makes you throw all kinds of information at us. We want you to think and pre-select what’s important. We don’t want to do your work.

Don’t tell us scrolling is bad. Because then all websites are bad. There is nothing wrong with scrolling. Nothing at all. Just as there is nothing wrong with flipping pages in books.

Don’t tell us to get glasses. Rather, stop licking your screen, lean back (!) and continue reading in a relaxed position.


95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.


Do web developers actually use web browsers?

I also use NoScript, so I’ve seen some other bizarre decisions leak through on sites I’ve visited for the first time. Blank white pages are common, of course.

For quite a while, articles on Time’s site loaded perfectly fine without script, except that they wouldn’t scroll — the entire page had a overflow: hidden; that was removed by script for reasons I can’t begin to fathom.

Vox articles also load fine, except that every image is preceded by an entire screen height’s worth of empty space.

Some particularly bad enterprise sites are a mess of overlapping blocks of text; I guess they gave up on CSS and implemented their layout in JavaScript.

There’s no good reason for any of this. These aren’t cutting-edge interactive applications; they’re pages with text on them. We used to print those on paper, but as soon as we made the leap to computers, it became impossible to put words on a screen without executing several megabytes of custom junk?


I’m a designer. I am not here to focus on making things pretty. I’m here to make things work. I am a designer because I want to solve problems. I want people to be less frustrated when they use technology. I want to make their lives easier.

If you woke up tomorrow without knowing what your life would be like - and you needed to build a new internet for everyone. What would you think about? What would your priorities be? What problems would you try to solve?

When people say "My old tired eyes can't read this" It is because they can't.

Typography, like color, and music is all about how values relate to each other. If large type looks clumsy it is most likely due to an ineffective type scale that doesn't relate to the proportions within your design system. Type scales are all about relativity.

The thing about large type, is that everyone can read it. Not everyone can read small type. This is a fact. No one complains that typefaces set at 20px are too big to read. In all of the user testing I have ever done that has never been said. But people have complained about the readability of type set to the equivalent of 10 and 12px.

Summarizing and excerpting additional info from the article:


What I would prefer

(In June 2016, the Toledo Blade released a new version of its website that was responsively-designed and replaced the two-site setup that existed prior. In its previous setup, the Blade's mobile site used a different system than the site used for larger screens.)

I'd pay nice money for a Blade subscription if the article pages looked something like this:

http://toledotalk.com/last-alarm.html -

... instead of this:

http://www.toledoblade.com/Police-Fire/2014/01/31/Last-Alarm-rings-for-fallen-heroes.html

I don't need an app. I prefer one website that responds comfortably on all devices and loads fast with no mountains of JavaScript bilge, no huge irrelevant images, no ads, no trackers, and no other gobbledygook that bog down page load speed.

It would be nice if the article page contained a large-ish font size and a lot of negative space. I don't understand why some responsively-designed websites use a tiny, uncomfortable font size on mobile.

I prefer no fixed header nor footer areas and no hamburger or similar menu icons, like I use at ToledoTalk.com.

I see no need for a bunch of navigation links in the header and footer areas of an article page. The only link needed is a link to the home page. The site's menu options can be listed on the home page.

I want the article page to focus on the content. I want at least 99% of the page to focus on the article, which includes the title, secondary title, author, contact info, publish date, and the content.

Outside of links contained within the article, the only other acceptable link would be to a separate page that contains comments, pertaining to the article, assuming that the media org accepts comments.

If I'm a buying a subscription, I do not want to see Facebook comments loaded on the same page as the article because that slows the page load and fouls the overall look of the page.

Give non-paying customers the hideous views, and give subscribers something worth buying. Until this utopia exists, I'll continue reading with JavaScript disabled, which improves the web-viewing experience a lot.

webpagetest.org result

webpagetest.org result


While not perfect, some good design concepts for an article page can be gleaned from this site.

http://motherfuckingwebsite.com

The humorous content is directed at web designers/developers. Excerpts:

Let me describe your perfect-ass website:

  • Shit's lightweight and loads fast
  • Fits on all your shitty screens
  • Looks the same in all your shitty browsers
  • The motherfucker's accessible to every asshole that visits your site
  • Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee)

This is a real, naked website. Look at it. It's fucking beautiful.

What I'm saying is that all the problems we have with websites are ones we create ourselves.

Websites aren't broken by default, they are functional, high-performing, and accessible. You break them. You son-of-a-bitch.


Just as funny, someone "enhanced" the mother-effing site with:

Let it breathe

Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping. The defaults are trash -- pick a minimum line-height: 1.4 for body copy. Headings should be tighter. If you can't see that...piss off.

If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.

A little less contrast

Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines.

Size Matters

I know your partner says otherwise, but it's true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.

Line-width, motherfucker

Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.

I love what the creator of this site's inspiration did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.


And another version: This is Edward Morbius's version of a motherfucking website

14 fucking style rulesets. That's how much CSS it took to turn that earnest but underachieving shitty attempt into this vastly superior masterpiece. It's so fucking simple and it still has all the glory of the original perfect-ass website. We stick with the basics of a better motherfucking website, and add just a bit more polish.

Set html { font-size: medium; } and use rem units for the rest of your elements. The users who've selected their motherfucking font sizes will appreciate it, and the motherfucking idiots who don't know how to will just zoom your site like they would any other.

Let it breathe — in text-relative units. Yeah, yeah, motherfucker, so you've got your 1.4 unitless line height, and you've specified page margins. But what the fuck are you doing giving content width in motherfucking pixels? Scannable line length is determined by the fucking text content. So use fucking text-based units. Those are em units. No, motherfucker, not rem, this isn't some fucking page-relative size, it's relative to the motherfucking current text.

For fucks, sake, white isn't "a little less contrast". So set that motherfucking background color to something other than straight white. Grey's depressing. #fffff6 is pretty fucking sweet. And I'm not fucking obsessing over "just 7 rules", so bite me.

Details Fucking Matter. You don't have to turn into a motherfucking graphics design weenie, but some small touches make a difference. A little color, some extra breathing room, and styles to distinguish your h1 from h6 headers doesn't hurt.

And yet another https://bestmotherfucking.website that contains some worthwhile advice as well as some pointers that are unrelated to web design.


Good advice exists in those three rant pages above, despite the coarse language. A few of us are peeved at the number of publishers, programmers, and designers who choose to ignore the most basic and functional aspects of the web that make it great.

The number of responsively-designed websites built by big publishers that use a tiny font size for the phone display is alarming. This bad design produces a miserable reading experience. It makes no sense, unless it's intentional to encourage people to download yet another app.

I don't know why it's a trend to reduce the font size as the screen size gets smaller. Why not keep the font size the same all the way through? Vox.com provides a comfortably-large font size when reading the site in portrait mode on the phone. I wish more sites did the same.

It's also irritating when web designers prohibit zooming in and out of the page and prohibit the ability to read the site in landscape mode.

Some of these uncomfortable, responsively-designed sites would provide a better user experience if they were built like it was 1995. At least I could view the site in landscape mode on the phone and zoom into the page for easier reading.

No CSS and no JavaScript is actually an improvement for some overly-engineered sites. In my opinion, the problem is that too many website publishers/designers/developers focus on extravagance instead of elegance.

We might be better off if we designed sites with minimal HTML and minimal responsive design, creating what might be called responsible design.

A few suggestions:

This might make web development boring, but the focus, however, should be on the content and not nifty animations.

Maybe this is how content providers can charge a fee for their content by offering the plain, simple, usable version of their site for a price. The free users get deluged with the bloated, ad-heavy, so-called sophisticated, modern version.

I understand that tech people like to incorporate their skills into new and existing projects, but the hip tech-of-the-day should still provide value to the end users.

Too much of this new stuff seems like a solution in need of a problem. Publishers cannot find enough problems to solve with the new tech, therefore they create new problems by unnecessarily gumming up the works on web sites that did not have problems.

#manifesto