
Why website body text should be bigger - dirtyaura
https://blog.marvelapp.com/body-text-small
======
wlesieutre
Your website body text should also not be covered up by "social buttons" if
you ask me.

[http://i.imgur.com/cmrn7wB.png](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.

~~~
icedchai
If you're at 800x600 like it's 1995, then you should expect that sort of
thing.

~~~
numerlo
If you believe that you are doing web design wrong.

~~~
icedchai
I'm not saying it's right, I'm saying it's typical.

~~~
blowski
Isn't the whole point of responsive that you don't design for 'typical' screen
sizes?

------
metalliqaz
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.

~~~
camus2
There is no issue with "mobile-first". The problem is when designers think
"mobile-only", forgetting that a sizable part of there audience still browse
content on desktop.

Furthermore, given how web-pages are getting heavier and slower to load, I
doubt any of these designers are really serious about designing for mobile at
first place (I don't buy the "management wants tons of analytics" excuse).

> As others have said elsewhere in this thread, I can (and do) use the zoom
> function when necessary.

If a website doesn't allow you to zoom in the text, it's a design mistake,no
more no less.

------
corobo
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...](https://chrome.google.com/webstore/detail/darken-
text/kmonkhbnghcmlhgbmlpagpapfomioidg)

~~~
discreteevent
You are not alone!

[http://contrastrebellion.com](http://contrastrebellion.com)

~~~
corobo
Spamming that in the "design" slack chat as we speak, thank you :)

------
peapicker
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.

~~~
uuoc
One question, are you also running your browser maximized on your 24" monitor
such that it is about 20.5 inches wide?

If yes, consider trying running with your browser non-maximized, and set to
about 1/2 the width of your 24" monitor. The lines will not be so long that
way.

~~~
tracker1
It's funny, my ex-wife always runs her browser full-screen (even on a 24"\+
monitor) and would complain when sites wouldn't use the whole screen (this is
before 1080p was nearly as common). I almost never browse full screen.. I use
a 40" 4k display (essentially 4x 20" 1080p), and find anything full-screen to
be difficult at best.

------
jaggederest
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.

~~~
polutropos
Marvel wrote detailed style guide/explanation and explained their use of the
OOCSS style. [https://marvelapp.com/styleguide/overview/code-
guidelines](https://marvelapp.com/styleguide/overview/code-guidelines)

~~~
jaggederest
Oh I understand the style, I just think it's backwards. The whole point of CSS
is to move the styling out of the markup, and this obviously fails atrociously
in that regard.

Each class is one CSS property, where it would be literally less verbose to
just inline them. It's exactly the same thing as doing style="prop: value;
prop: value;" since to change a given area of text from grey to black you'd
have to edit _every single element_ the same way.

------
pavel_lishin
> _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.

------
inetknght
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.

------
anigbrowl
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.

~~~
vertebrate
check out [https://addons.mozilla.org/en-US/firefox/addon/column-
reader...](https://addons.mozilla.org/en-US/firefox/addon/column-reader/)

------
podiki
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, ...

------
mxfh
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.

~~~
marcosdumay
HTML sizes were standardized over screen size a long time ago.

------
c-smile
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](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](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".

------
bhauer
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.)

------
pmontra
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.

------
nom
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.

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

------
Ensorceled
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.

------
gumby
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.

------
TheAceOfHearts
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.

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

~~~
wmf
OTOH, how did displays get away with jacking up DPI to unreadable levels? (I'm
not talking about Retina.)

~~~
ghostly_s
Then what are you talking about?

~~~
wmf
Displays that are unreadable at 1x and unusable at 2x, around 130-180 DPI.

------
banach
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.

~~~
wavefunction
Have you investigated any of the accessibility tools available to you?

That's what they're there for.

~~~
banach
I don't havet this problem with software that uses sensible typography. The
availability of workarounds is no excuse for poor defaults.

------
marssaxman
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.

~~~
mighty_atomic_c
These trends come and go. When they annoy me, I really am glad for "reader"
views that ditch all the fancy, unreadable flourish (and social media nag-bits
that just don't fucking die).

One of these days, "retro" websites might seem cool again. Just gotta wait.

------
peterwwillis
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!!!!!

~~~
notatoad
putting a max-width of ~100 characters on your article text increases the
readability considerably. it's not just to leave space for advertising.

------
manigandham
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.

~~~
pwg
This bookmarklet [1] takes care of the "extremely skinny fonts" problem:

javascript:(function(){var%20all=document.getElementsByTagName(" _"
);for%20(var%20i=0,max=all.length;i<max;i++){all[i].style.fontWeight='400';};void(0);})();

This bookmarklet takes care of the light gray problem:

javascript:(function(){var%20newSS,%20styles='_%20{%20background:%20white%20!%20important;%20color:%20black%20!important%20}%20:link,%20:link%20
_%20{%20color:%20#0000EE%20!important%20}%20:visited,%20:visited%20_
%20{%20color:%20#551A8B%20!important%20}';%20if(document.createStyleSheet)%20{%20document.createStyleSheet(%22javascript:'%22+styles+%22'%22);%20}%20else%20{%20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.getElementsByTagName(%22head%22)[0].appendChild(newSS);%20}%20})();

[1]
[https://en.wikipedia.org/wiki/Bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet)

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

[http://practicaltypography.com/point-
size.html](http://practicaltypography.com/point-size.html)

------
gcp
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.

~~~
mikewhy
Is it only Mac where they look good, or only Windows where they look poor?
Mobile seem to handle them fine, I'm not sure how Linux stacks up.

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

------
adamrezich
>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...

------
zAy0LfpBZLC8mAC
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.

~~~
ghostly_s
There's too much self-satisfied spouting of poorly-grasped principles here to
address, but for one, you basically provided the fix you feign so much
frustration at not having available. Just use an add-on that allows you to
specify a user stylesheet and do something like:

    
    
        p {font-size: 10pt !important;}

~~~
zAy0LfpBZLC8mAC
Now, don't pretend like you don't know that that is not a reliable selector
for that purpose. Also, you don't need an add-on to edit the user stylesheet.

------
gaelow
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?

~~~
jgh
what

