Why website body text should be bigger

Your website body text should also not be covered up by "social buttons" if you ask me.

http://i.imgur.com/cmrn7wB.png

So much empty space on that page, let's put the facebook link in the worst place possible!

EDIT: It's funnier in this case because (based on my limited experiences) this sort of fixed positioned social media bar grew out of mobile websites that were constantly fishing for shares, but this particular site has realized they're annoying and put it in the top header instead. It's only on desktop that we get the fixed position floater.

Personally, I have disliked the mobile-first mindset since the beginning because on my primary platform (the desktop) it results in too little content on screen. I much prefer "old" style interfaces like hacker news that give me lots of content on screen. As others have said elsewhere in this thread, I can (and do) use the zoom function when necessary.

I disagree with the article's assertion that larger text is more readable. In my own experience, I find that readability is reduced when scrolling occurs. Increase the amount of scrolling, decrease the readability.

While we're at it can we get past the current phase of using extremely light grey on white? What happened to web design sticking to everyone-can-read contrast levels?

I've actually resorted to using a chrome plugin that switches <p> tags to black when you click its icon just so I can read fancy shmancy designed blogs.

Edit: In case it's of any use to you, the one I'm currently using is Darken Text[0]. There's probably extensions out there that let you switch out colours automatically but my day job involves web dev/design, it'd be very confusing if I used an extension that messed with colours automatically

[0] https://chrome.google.com/webstore/detail/darken-text/kmonkh...

On my 24" monitor, you body text feels immense (at 1920x1080) and I have to scan my eyes left and right too much - annoying enough that I scaled the page to 80% to read it comfortably. It is important that column width not be too wide to avoid too much eye travel, while maintaining 60-80 chars per column.

This brings it down to normal text size comparable to a comfortable-to-read novel page size on my screen.

Comparing to WaPo, they unwisely have 100+ chars per line at that immense size. I've stopped reading the site at all because the balance of the width and font size combo is too much work. Most of the others have wisely kept to 60-80 chars per line, and scaling works to read them, but all feel a bit too large.

I enjoyed the markup. Reminds me of the old days with font tags:

<p class="pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl">...</p>

and of course

<strong class="c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl">9–14px</strong>

Seems a bit excessive, perhaps we could use a document to store all these classes in an organized fashion and then just refer to them by some sort of tagging system. We could link to that document from multiple pages, even, and change it without changing the base markup at all.

> Scrolling is a natural, established pattern on the web—people expect to have to scroll.

But I don't want to have to scroll every 5 seconds, either. I start to feel like I'm reading a children's book.

No.

I don't want to have to keep scrolling through seven pages of double-spaced text of which a mere eight lines takes up the whole damn page.

I got a monitor with more resolution so I can do more with my workspace, not so that you can take up more space. People like this are a big reason why I literally hate the web.

I question the focus of this article. It would be excellent advice for print that cannot be changed after it has been printed, but since every web user can (in theory) control the way things look on their device it would be better to focus on making that easier for people to do.

As an artist, I absolutely agree with all the design arguments about readability etc. But that stuff doesn't need to be on the server side. I really resent being forced to download tons of design data whenever I visit a web page instead of being able to set preferences and have the computer present text in the way I actually want to see it. Many websites are horribly crufty and ugly, and make my reading experience worse.

You know what else I hate? Web pages that are so in love with their print ancestors that the text is squeezed into a narrow column and almost 2/3 of my screen is white space. So I have to keep scrolling endlessly because you can't figure out how to flow text into two columns.

I'm glad it mentioned it (though buried/saved at the very bottom): line width! I'd rather have too narrow than too wide, but good design should have a pleasing font size and line width (and all the other factors) on very different device sizes these days. Seems like many sites often get it right on mobile, but then on a desktop browser suddenly things are proportioned all weird or don't work with whatever browser size. And that's to say nothing about a sudden change of layout, ads, ...

The article somehow misses the elephant in the room, why still argue about pixel sizes, when it should be about display size with display resolutions being no longer be in a narrow range of low DPIs.

In an ideal world text sizes should be set in em and rem and body text sizes should be user adjustable to preference.

At the beginning of CSS era one principal mistake was made - someone decided that 1px is a logical length unit that equals to 1/96 of inch. Attempt to reason that was made here http://www.w3.org/TR/CSS21/syndata.html#length-units

Result of that particular decision is the mess we have with length units at the moment on the Web.

On monitor with physical 110 PPI resolution 1px is physically smaller than on "classic" 96 PPI monitor.

As a result no one can predict what will be the size of this:

    div {
      border: 1px solid;
      width:100mm;
      height:100mm;
    }

everything but not 100mm square.

In Sciter Engine (https://sciter.com) I've fixed this by applying three simple principles:

a) all logical length units are distances measured on device surface. Thus 100mm div rendered on screen will be 100mm when measured by the ruler put on monitor's surface. Same is while printing on paper.

b) 1px is always one device pixel - so we have hairlines for example. And so dimensions of bitmap images can be expressed with their natural resolution.

c) 1dip logical length unit (device independent pixel) was introduced for the convenience. 1dip == 1/96in - that is close to 1px in browsers.

Without all these using existing browsers for UI of desktop applications is quite questionable.

Even for mobiles ... main pointing device is a finger. It shall be the way to say: "this button shall is touchable by finger - so be precisely of 0.5in measured EXACTLY on screen surface".

I'm somewhat ambivalent on text size since I typically zoom web content when I find the text size uncomfortable. There are some cases where there is a severe mismatch between the size of body/text and other elements, which poses a challenge for zoom. But for the most part, zoom is a sufficient tool.

Still, I could potentially agree with the overall sentiment that slighter larger default sizing might be good.

But I find the presentation of this argument ironic thanks to poor body contrast:

    background-color: white;
    color: rgb(60, 72, 88);

Pulling the body color numbers down to increase the contrast made it immensely more readable for me. Unfortunately, while browsers have decent zoom controls, they don't have contrast controls without plugins. So designers should be especially careful to not specify insufficient contrast. (Aside: I generally find light text on slate backgrounds even easier on my eyes.)

The problem would solve itself, at least on mobile, if every browser implemented text reflow after zoom, like Opera does. Firefox reader mode has a different purpose but can be used as a workaround, but only when it finds the text content and only for that.

With text reflow users can zoom to the font size they read best and the designer doesn't have to try guessing the right one.

Control + pretty much solves the problem on desktop.

Display DPI - the problem that could've been solved more than a decade ago, but still isn't. Once you get it right on all layers you'll never be bothered by it again. It sometimes makes me sad that we still have to work with or around it, even though it is trivial to solve.

Not just that, but the font color is too close to the background color, making it even harder to read.

I find it ironic that the author is claiming body text should be larger for readability while failing WAVE's and Google's accessibility checks for contrast ... a key factor in readability, especially for the elderly and visually impaired.

C'mon, just let users change the text size. The web is there for the viewers, not the transmitters!

And yes, if my pressing command-+ fucks up your display that's your problem and makes me far more likely to close the tab.

I'm not convinced this is really a problem.

The two websites I read most are Hacker News and Reddit. My terminal font size is 11pt and my code editor font size is 10pt. Most macOS interface text looks like it's either 11pt or 13pt.

I have a retina MacBook Pro and I set the display setting to "More Space" (look like 1920x1200). Sometimes I might switch to "Default" (looks like 1440x900) for a while, e.g. when watching TV. But if I wanna do anything serious I need the screen space.

I've been using Safari as my primary browser recently, and it has a Reader mode, which I use when documents have hard to read colors or poor typography.

I find HN news font size way too small for modern high-resolution displays.

Any text coming out of Wolfram for the past 20 years has been borderline illegible by default because it is so small. I have never needed glasses, but this has annoyed me ever since I was a child.

I couldn't disagree more! I'm tired of this trend of headline-sized body text that has been popping up all over the web lately, as a result of what I assume to be mobile-first design philosophy that never heard of resolution independence. I'm constantly zooming out a couple of steps to shrink the text back down to something comfortable. Reader view helps, too.

Please stop doing this, designers! - not that any of you have ever cared what I think.

Ideally, text wouldn't be limited to 50% of the total screen. Can you imagine if every tv show you watched was squeezed between either two continuous advertisements, or blank borders?

At the very least, using the whole screen real estate, you could display two pages side by side, like a book. Less scrolling, faster reading, more comfortable fonts and sizes. BUT EGADS! WHERE WOULD WE PUT OUR ADVERTISING!!!!!

Text size is easy enough to deal with by zooming. It's the extremely skinny fonts in light gray which is far more common and hurts to read.

Butterick’s Practical Typography recommends a body-text size of 15–25 pixels.

http://practicaltypography.com/point-size.html

The font used on this site renders atrociously badly on Windows, both in Firefox and in Chrome.

If you care about readability, maybe stop using Web Fonts. They may look fine on your Mac, they're crap everywhere else.

I can't believe anyone would have a problem with larger text. Wait until they hit their 40's.

>On average, users will read only about 28% of the words on a web page, and usually scan as opposed to read due to the immense amount of information available on the web, and limited time available. Intensive reading is rare and requires more focus.

y-you caught me...

This is just completely idiotic bullshit.

A website should not ever bother with body text size at all.

A website should display its body text in the size that the browser specifies, and that's it (with the exception of adapting for a generally smaller or larger typeface).

It's completely braindead that nowadays, on my old, small laptop display, I get websites displaying huge letters, because those supposedly are somehow the right size on other displays. The resolution of my laptop hasn't changed in ten years, so why the fuck does anyone think it's sensible to make the letters larger?

Yes, new devices have higher resolutions. And you know what the solution to that problem is? It's called CSS. CSS has the concept of a browser/user stylesheet, which provides sensible defaults for the respective environment for you to inherit, which should mirror stuff like display resolution, but also, indirectly, the eyes of the users.

That's kindof the whole point of CSS, that you can abstract from that, and have the respective renderer take care of adapting your content to the environment, so that your website reads equally well on a decade-old laptop, on a new and shiny tablet, or on a 100" monitor.

And it's especially braindead because the only fix on my side would be to pretend that I'd like to read 5 px text, in order to have those braindead website become readable again ... except that then, sensible websites would take that seriously and would display their text in 5 px letters.

hey, hello, hi... have you ever read about em? just set the default size to whatever fits the resolution you are dealing with? viewport? responsive design? web? computer? anything? is this for real?