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, ...
>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.
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.
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?
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've seen web developers do this a lot and it's an annoying trend. I'm glad there's a "Reader View" that Safari and later Firefox included so I didn't have to subject myself to some asinine design "philosophy" that made reading their info a chore.
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.
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.
I guess I'm a contrarian. I hate the current trend of a narrow band of text with tons of blank space. I would rather scan my eyes more than have to scroll and scroll and scroll and scroll
It's all about what is trendy. What part of the population should we optimize for now? Some people like big text and wants to scroll. Other people might have problems with their carpal tunnel and can't scroll with the scroll-wheel on the mouse. Mabe they don't even have a mouse at all and scrolling has to be done with arrow keys and a bad angle on the wrist? It's hard to optimize for everyone so usually you just listen to the people that has been testing different layouts already and measure on how many adviews you get to deside what layout to choose. Because at the end of the day that is all that matters to most. Where do I get most money?
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.
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.
Nice catch. I wonder if there is tooling out there that can examine a document's CSS files, and smoothly resize a web browser between the document's media query "break points" as it renders, so designers/developers can more easily find these bugs that happen with browser sizes near those break points.
Why can't you literally just resize your actual browser and watch what it does?
That's what I do when I'm making a responsive website - I'm constantly changing browser width to make sure it works at all sizes.
It's not enough to just check for the @media sizes - you also need to check the sizes in between in case boxes get shrunk too small to fit their content.
+1, always do this... I tend to find that certain design constraints need breakpoints that don't match the atypical @media breaks that are used in Bootstrap and the like... just by nature of what's being placed... It's best to actually exercise and practice where you're breaking things down.
Also, since I tend to use React/Redux lately, I inject size/scroll into my state and use that as a basis for those decisions in controls as often as I'll use CSS/JSS alone anymore.
Responsive design means the browser resolution doesn't matter. Sites should be able to handle these dimensions by scaling appropriately and changing the layout.
If a website doesn't fit my preferred browser size, I leave the website. If you're expecting people to resize their browser window, you're in for some disappointment.
Worse than that is the fixed promo bar at the bottom.
As with most such bars, it breaks scrolling one screen at a time using Space or Page Down. So I get to read:
"Now, I’m not saying that small typography is bad. An 18px font is perfectly legible"
[press Space]
"captions, cards and other UI elements, but there’s good reason to increase it a few more notches for body text."
Fixing this is entirely doable - nytimes.com has a fixed navbar but Space still scrolls <1 screen at a time. I would expect better from a screed like this which proclaims "Scrolling is a natural, established pattern on the web - people expect to have to scroll."
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.
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'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.)
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.
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.
Back when I was doing a lot of brochure sites I often thought that there was a correlation between the quality of content and the amount of filler -- big text sizes, lots of graphics.
If I have a lot of meaningful content, say essays of 5,000 - 10,000 words or novella-length fiction, a 20px+ is going to make the page-length ridiculous. But sure, if you can only be bothered to churn out 100 words of copy and you want your page to not look like a content-desert then 20px+ font and giant margins are your friend.
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.
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.
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.
The irony is somewhere hidden in that forest of classes, I believe what they've actually done for most of the text for many viewports is to scale it down to "75%" or "18px"...
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
The new Color Tool from Material Design has an accessibility tab where it shows a text color's contrast with foreground and background colors for large and small font sizes.
If you, designers or developers, have any any doubt, please please please check the contrast on your site's text. :)
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.
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.
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.
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!!!!!
81 comments
[ 3.9 ms ] story [ 100 ms ] thready-you caught me...
That's what they're there for.
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.
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.
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.
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.
That's what I do when I'm making a responsive website - I'm constantly changing browser width to make sure it works at all sizes.
It's not enough to just check for the @media sizes - you also need to check the sizes in between in case boxes get shrunk too small to fit their content.
Also, since I tend to use React/Redux lately, I inject size/scroll into my state and use that as a basis for those decisions in controls as often as I'll use CSS/JSS alone anymore.
As with most such bars, it breaks scrolling one screen at a time using Space or Page Down. So I get to read:
"Now, I’m not saying that small typography is bad. An 18px font is perfectly legible"
[press Space]
"captions, cards and other UI elements, but there’s good reason to increase it a few more notches for body text."
Fixing this is entirely doable - nytimes.com has a fixed navbar but Space still scrolls <1 screen at a time. I would expect better from a screed like this which proclaims "Scrolling is a natural, established pattern on the web - people expect to have to scroll."
javascript: (function%20()%20{var%20i,elements=document.querySelectorAll('body%20*');%20for%20(i=0;i<elements.length;i++)%20{if%20(getComputedStyle(elements[i]).position==='fixed'%20||%20getComputedStyle(elements[i]).position==='sticky')%20{elements[i].parentNode.removeChild(elements[i]);}}})();
Anything on the page styled as position: fixed or position: sticky is deleted. Cleans those things right up.
[1] https://en.wikipedia.org/wiki/Bookmarklet
Thanks.
In an ideal world text sizes should be set in em and rem and body text sizes should be user adjustable to preference.
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.
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:
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.)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.
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.
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.
If I have a lot of meaningful content, say essays of 5,000 - 10,000 words or novella-length fiction, a 20px+ is going to make the page-length ridiculous. But sure, if you can only be bothered to churn out 100 words of copy and you want your page to not look like a content-desert then 20px+ font and giant margins are your friend.
<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.
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.
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...
http://contrastrebellion.com
If you, designers or developers, have any any doubt, please please please check the contrast on your site's text. :)
Please stop doing this, designers! - not that any of you have ever cared what I think.
One of these days, "retro" websites might seem cool again. Just gotta wait.
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!!!!!
If you care about readability, maybe stop using Web Fonts. They may look fine on your Mac, they're crap everywhere else.
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
http://practicaltypography.com/point-size.html
And yes, if my pressing command-+ fucks up your display that's your problem and makes me far more likely to close the tab.