What is killing me a lot more lately is the trend towards extremely low contrast sites, like white backgrounds with almost-white text. This is starting to be everywhere recently and it is horrible.
I'm sure that design looks great on your Pantone-calibrated monitor, designer, but on mine I can barely even see there are words there let alone easily read them. Supplying a user-defined CSS or constantly highlighting paragraphs is much more painful than a zooming in with the scroll wheel or a simple gesture.
So I agree with the point the article is making but I think there are currently bigger fish to fry when it comes to painful design trends on the web.
I also agree that breaking zoom is a silly thing for designers to do.
But small font sizes, and expecting the average user to know that they can zoom, is wrong.
All three are symptoms of a bigger problem - some designers are either ignorant about usable design, or just don't care about a significant portion of users.
I'm all for never overestimating the technical literacy of one's users, but .. really? The average person doesn't even know they CAN zoom? That seems an "ignoratum too far", like not knowing they can alter the volume on their stereo.
Touch screen devices make it ridiculously easy, too. Surely the average user has worked out by now that they can change the size of a web site they are viewing.
It would have to be semi-intelligent to adjust the brightness accordingly (so it would work both on light-gray-on-white sites and dark-gray-on-black sites), but having an in-browser contrast control would be great.
It doesn't always work.
I also use Readability.
Bizarrely, no, it doesn't. A lot of trendy design styles like low contrast bright sites and tiny (or, recently, huge) text really are just as impractical and/or do look just as ugly on a very good screen to a trained eye.
A webdesigner using Pantone shades for a website is just being a delusional fool.
Expecting everyone viewing your site to see a precisely matched colour, whether it's from a PMS chip or any other reference, is... optimistic.
But that doesn't make starting from a client's standard Pantone branding colours (or rather, their official RGB equivalents) delusional. It won't get perfect results, but what would be a better choice?
It might look great on your large iMac screen, but when I read it with an 11" MBA, it's pretty frustrating to only be able to see a handful of lines of text at the same time.
Even this blog which is doing the complaining, I wish I could see more of the text at the same time. Though it's a matter of personal preference, a find its line-height to be a bit too tall. 1.5em is just too much for body text, in my opinion -- it's almost like overcompensation, and you rarely see that in the body text of printed books or magazines. 1.2 or 1.3 can be a lot better.
IMHO, the default line height in browsers is just too narrow.
Agreed, though, that it's a matter of what you're used to. But when you're used to high quality typography designed to make the text easy to read, you tend to notice the mistakes.
Here are some rules I go by:
- Use an appropriate font designed for screen display
- Avoid small font sizes: 16px is a good default, less than 14px is usually too small
- Use dark text on light background
- Typeset on a vertical grid with 130-150% of line height
- Use a reasonable line length (no more than 80 characters)
All these rules aim to make the text easy to read and easy on the eyes.
That would allow you to set your preferred "not huge" default font size and have it work everywhere, and it would allow me to set my "huge" default and also have it work everywhere.
At the moment I have to zoom[1] in lots of websites while you have to zoom out others.
[1] And I strongly preferred "zoom just the text, not everything", so if there's some secret key combo to do that it'd be great. (Chrome on OS X, but I'd switch to Firefox if I know it did it.)
On the other hand, it's a pretty valid critique. To be honest I forgot that there are 11 inch screens (or, screens that are larger than phones but smaller than 17inch desktop monitors). I'm not on any sort of a big screen.
And indeed, my lineheight is 1.618em (golden number in math, heh). I say 1.5 because it's a nice compromise. Perhaps 1.3 or so is better in certain circumstances.
It's funny, because screen height shouldn't affect "readability" (other than making you scroll more often), but with these large-font blogs/sites, they give me a certain feeling of "claustrophobia" -- that I can't see a couple paragraphs' worth to come, or can't see the last couple paragraphs I read.
I think it might be that it prevents me from being able to scan content easily, the way you can on a printed page, where you can quickly skip to the part you can tell is relevant to you.
But of course the line height should be in relative units, not in px: http://webtypography.net/rhythm_and_proportion/vertical_moti...
I had hopes that all these different resolutions/DPIs/sizes for screens would stop designers trying to force a pixel-perfect layout into a browser, but the end result seems to have just been "CSS media queries".
Everyone keeps saying that it's fine as long as zoom functions correctly. Well it's also fine to use a font size widely accepted as readable. 7pt? Really? Why? Because zoom works?
I know a lot of people who read HN that use style bot to increase the font size. To act like this isn't an issue seems really weird to me. Ctrl+- is there for people who really need the help seeing. It's actually being used to make up for bad designers.
Put the default at a happy medium. That probably doesn't mean optimized for 24" displays.
The price paid is that sometimes a poorly designed site has text that spills out of a fixed-size box, but I can cope with that much more easily than with trying to read something that is 7px tall.
I need to press ⌘-+ three times to get to something reasonable that I can read without straining my eyes. Chrome remembers the setting, though, so it's not a big problem in practice.
However, the solution isn't to pick a new, slightly larger point size and just set everything to that, it's to use media queries to set an appropriate size for whatever medium the content is being displayed in, and to use sizes relative to the user's default rather than specifying exact point sizes.
You can also use absolute sizes (in and cm in CSS) so that the browser will display the font at the given size without regard to the display resolution or DPI.
Edit: Also, I highly recommend Readability, but obviously it'd be preferable if people just did the right thing to begin with.
I've said it before and I'll say it again: one of the pleasant surprises of seeing TBL's original WWW documentation posted to HN last year was how readable plain, unstyled HTML markup is. It's almost as if we have a need for two platforms: an unstyled user HTML reader for long-form works, and an HTML+Javascript applications platform for interactive sites and apps. I'm already using Firefox and Chrome somewhat in this way already.
And readable on any computer, with any OS, with any browser, whether it's going to a screen or a printer or a speaker.
It is baffling why text heavy sites (where the product is the text) get display of text so wrong.
I don't see why this is a problem demanding such rants.
Ironically the first thing I did when the page loaded was tap Ctrl+- Ctrl+-.
And a growing number of websites take deliberate steps to prevent any zooming on the page. I can't understand why any designer thinks this is helpful.
At least iOS Safari has "reader" mode now, which does what I wish most websites would do: throw away all of the CSS, and render the page as a plain list of H1's and P's.
If you are running a website, I encourage you to test different font sizes and measure the difference in engagement. You might be surprised.
Consider my eyes opened... (and not squinting.)
But why pixels (px) and not points (pt)?
I made a site using 12pt text and it looks good everywhere (ipad, iphone, chromebook, linux, windows, mac).
I suspect 16px is going to look too small on a Retina Macbook (I don't own one, so I wouldn't know).
px: pixel units — 1px is equal to 0.75pt.
[...]
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).
That includes the abomination known as Swype (I think) which breaks websites for iPhone/iPad users presenting them with an interface which does something different than it appears to, breaks zooming, introduces useless and unintuitive "pagination" and generally makes users' lives miserable.
After having read that article, I'll concede the fundamental argument is the same. I don't have a smartphone, however. The only place I will ever read something is on my desktop computer, and that's what I want. Media queries or "mobile-first design" can be used to solve the issue from both sides of that complaint.
(Actually, if your site is really interesting, I might be motivated to write a user script to fix your fonts and other usability problems. But your site is unlikely to be that interesting.)
There is no need to specify an absolute font size. Use only relative font sizes (and be careful about ratios below one).
Also, please favor liquid layouts. Just because my screen is 2560px wide doesn't mean I want to use it all for your site (actually, just the opposite!).
Yet this is what you're telling your browser by maximising the window NSEW, and the site obeys it, which is good. The point of so much real estate and a windowing system is not to have it end up empty, unless asked to. I hate it when sites make undue assumptions and reimplement in-browser window management. My browser is not my OS.
http://informationarchitects.net/blog/100e2r
http://informationarchitects.net/blog/responsive-typography-...
So yes I completely agree with you. However I think you should include before and after examples on your article to make it complete
Thanks for the suggestion, I'll prepare a few side-by-sides.
Contrast is another huge and growing issue. http://contrastrebellion.com/
I'm growing increasingly annoyed at sites which offer zero padding between text and display edges. At least a few pixels offset should be offered, and I prefer 50-200 for most full-screen displays.
Interstitials, pop-up nags, requests, quizzes, and the like increasingly make me likely to either close the a tab immediately, or use Firefox's RIP (Remove It Permanently) plug-in.
Fixed-position elements, especially headers and footers, but also sidebars, are similarly annoying. With the smaller overall screen resolutions of the past few years, and wide, short format 10:9 displays, vertical real estate is especially lacking. Sidebars frequently play poorly with mobile devices.
Most lately, I've found several sites which refuse to scroll vertically while on my mobile (Android). The Atlantic's mobile site among them, but there are others. Not a helpful feature.
I have a 15" MBP (older than retina, but higher resolution than the default configuration, 1680x1050) and another laptop with same screen size and even higher resolution (1920x1200), and most of the time I need to zoom in to comfortably read text for long periods.
I also have some grips with contrast, so I ended up using a bookmarklet that increases the text size and improves contrast, based on the Darken bookmarklet popularized in LifeHacker some time ago.
The interesting change is that since I browse with my browser window maximized most of the time, I took advantage of the vh CSS (vh = Viewport Height) unit to find the text size I'm most comfortable with, and then I can use the same bookmarklet in both computers.
Unfortunately VH/VW is relative to the window size, not screen size, so I wouldn't recommend using it for websites in general -- although for mobile web apps it should be a great fit!
The gist of it is:
font-size:2.5vh !important; line-height:4vh !important; background: black ! important; color: #DDD !important; text-shadow: 0 0 black !important;
I am normally using Safari (on my Mac and on iOS) and if I visit a site which is hard to read or if I disagree with the mobile no-zoom responsive decision because it doesn't work for me I just turn on the "reader mode". Big enough font size, line height, good contrast, focus on content. What else could I ask for? (well, beside another font maybe)
I see no reason leaving a site or discussing the design taste of someone as long as I have a one-button-read-nicely solution available. But if this won't work (some sites, somehow manage to break it) I'm out.
There are design decisions which look good but are not useable for many people. I believe most of the time someone is aware of this but decided he either does not care or that it is okay. Still, some education and discussion in this field is always good, especially for people just starting.
(which, dismayingly, is loading very slowly in Chrome just now, but loading fine in IE), the basis for my restyling my very old personal website. A line height of 1.4 is plenty large. The author is fully correct, of course, that it is best not to specify a font size at all, and especially not to specify a size that can't be resized at will be any user who happens to visit your site. Responsive Web design
http://www.seomoz.org/blog/seo-of-responsive-web-design
http://www.abookapart.com/products/responsive-web-design
is the way to go.
I like small fonts. I like the before pictures better. I bought a 30" monitor so I can fit more content, more windows there, not to look at huge letters and whitespace.
That's only half of the discussion. The other half is line spacing. I think that's much more important.
In his examples at the bottom, the Phoronix one really gets a big improvement by not having the lines squished together. If I open up Phoronix in my browser and add the 1.5em line-height CSS rule, the site becomes considerably more comfortable to read, without even touching the 12px font size.
[1] http://kadavy.net/blog/posts/reverse-engineering-redesign/
Making text bigger makes that decision more difficult. It also creates the delusion that there is more to read than there actually is.
Quick someone write a "Stop Using Mobile-Hostile Stylesheets" article.
