Join 3,514 readers in helping fund MetaFilter (Hide)


"Please don't use any less than a 16px base font-size for body content"
March 12, 2013 8:53 AM   Subscribe

Stop Using Small Font Sizes "I'm calling you out. All of you. The hackers, the designers, the code monkeys, the word-smiths, the editors, the CSS gurus, and everyone else who works on content management systems and style sheets for news sites. Stop using small font sizes."

(The before-and-after examples at the bottom of the post from The Atlantic, Wired and TechCrunch might be useful.)
posted by mediareport (120 comments total) 23 users marked this as a favorite

 
And then he undercuts his entire readability argument by justifying both margins.
posted by fatbird at 8:57 AM on March 12, 2013 [56 favorites]


Amen! Please save me the trouble of having to do the Ctrl+ and feeling old.
posted by ThePinkSuperhero at 8:57 AM on March 12, 2013 [13 favorites]


larger text is easier to read. Huh.
posted by randomkeystrike at 8:57 AM on March 12, 2013


PSH, you can ctrl-spin the mouse wheel! It's EXTREME!

Feel better?
posted by stupidsexyFlanders at 8:58 AM on March 12, 2013 [6 favorites]


Firefox has this feature! (Although it's for all text, not just body text.) Go to Options -> Content -> Fonts & Colors -> Advanced and you'll be able to choose a minimum font size.

At work we have a couple of internal applications using a grey-on-grey colour scheme with tiny text, and I find this feature very helpful as I'm too lazy to use user styles.
posted by smcg at 8:58 AM on March 12, 2013 [2 favorites]


Show me a way to enlarge text and I'll show you a way to prevent it.
posted by jeffamaphone at 8:59 AM on March 12, 2013 [4 favorites]


I'm with him 100%.
posted by scratch at 8:59 AM on March 12, 2013 [2 favorites]


No.
posted by uosuaq at 9:00 AM on March 12, 2013 [28 favorites]


Don't larger fonts take longer to download and use more bandwidth?
posted by mazola at 9:00 AM on March 12, 2013 [52 favorites]


I kinda like the small ones better. The big ones feel like I'm reading wooden alphabet blocks.
posted by Greg Nog at 9:00 AM on March 12, 2013 [4 favorites]


I found that page more readable when I zoomed out a couple of clicks, and I don't even have very good eyesight.
posted by Foosnark at 9:02 AM on March 12, 2013 [2 favorites]


And then he undercuts his entire readability argument by justifying both margins.

Justified text is less readable? Huh. I'm prepared to believe it, but having grown up in a world where just about every book, newspaper and magazine ever was justified I'm finding it a little difficult.
posted by yoink at 9:02 AM on March 12, 2013 [5 favorites]


In all seriousness, I'd like to know if the author of the linked article is over 40, and I'd also like to know how the pro and con responses in this thread break down by age. (I'm breaking down by age myself, and would welcome larger font sizes in general.)
posted by scratch at 9:02 AM on March 12, 2013 [12 favorites]


While I totally agree that body text on web sites should be bigger, this discussion of "16px" fonts is meaningless without considering it in the context of screen DPI/PPI. Unfortunately there's a huge variety of resolutions in common use right now. Back in the bad old days 75dpi was the standard screen pitch. I think 100–110dpi is more common now, although with anti-aliasing and subpixel rendering the effective density of modern displays is higher. And "Retina" displays blow all this out the water, so much so they lie about what a pixel is to the text renderer.

Anyway, display quality is now getting good enough we can finally stop talking about pixels and start talking about actual units of length: points, or inches, or whatever. I believe a 16px font at 100dpi is roughly 11.5pt.

Metafilter's default body font looks to be 13px, or 9pt on my screen. It's too small for me; happily you can change the size with your login.
posted by Nelson at 9:02 AM on March 12, 2013 [8 favorites]


I actually use 24/20/16 as my font sizes on metafilter.
posted by yeoz at 9:03 AM on March 12, 2013 [1 favorite]


mazola: um, size is just a number you set in CSS. Fonts are vector graphics.
posted by floatboth at 9:04 AM on March 12, 2013 [2 favorites]


CSS gurus

NO. STOP. Please do not suffix anything with "Ninja", "Guru", "Rockstar" or any other superlative occupation.
posted by hellojed at 9:04 AM on March 12, 2013 [42 favorites]


That said, I agree with his point.
posted by hellojed at 9:04 AM on March 12, 2013


And then he undercuts his entire readability argument by justifying both margins.

Justified text is less readable? Huh. I'm prepared to believe it, but having grown up in a world where just about every book, newspaper and magazine ever was justified I'm finding it a little difficult.
I dunno, I agree with fatbird, it is damn hard to read that website. Maybe I don't read enough physically printed text anymore and am just used to ragged right margins, but there is something that feels off about trying to read the linked text.
posted by ish__ at 9:07 AM on March 12, 2013


While we're at it, can we make text-entry fields:

1) Big enough to compose a reasonable-length message.

2) Small enough to fit on the screen (try commenting on MeFi on your iPhone. it's awful).
posted by tylerkaraszewski at 9:07 AM on March 12, 2013 [1 favorite]


This. This is one of the first 'projects' for the Singularity. Sweep through the web and just clean it up. (for your human masters)
posted by sammyo at 9:08 AM on March 12, 2013 [1 favorite]


Ohhh... 16 pixel. I kept reading that as 16 point and I felt like that would make things too frickin huge.
posted by sbutler at 9:13 AM on March 12, 2013 [7 favorites]


NO. STOP. Please do not suffix anything with "Ninja", "Guru", "Rockstar" or any other superlative occupation.

"Oh, he's our CSS ninja. It's a subtle attack, but eventually his layouts make your eyes hurt."
posted by jaduncan at 9:13 AM on March 12, 2013 [18 favorites]


Bonus of larger type: You can spread content over a bunch more pages! Think of the ad revenue!

Ugh.

As much as this is indeed an actual problem, it's one you can solve yourself simply enough. Just zoom the text and/or put your glasses on. Some of us would prefer not having to scroll down every three seconds, reading text big enough to be in a Dr Seuss book.
posted by Sys Rq at 9:18 AM on March 12, 2013 [4 favorites]


I agree that there's no need to right-justify, and that it reads more natural to me when the right margin is a bit ragged. But I find it really hard to disagree with this:

So little work is required to make this a reality, and the benefits to all online publishers are so great.

Note: this rant also applies to every other site where people consume your content. If you're using anything under 14px font, you're bad and you should feel bad. Seriously though, use 16px+.

posted by mediareport at 9:19 AM on March 12, 2013


I'm 23 years old and with this guy 100%. It's weird when I visit MeFi on someone else's computer and I realize how small the default text is. It makes me feel like Andy Rooney.
posted by MattMangels at 9:19 AM on March 12, 2013 [2 favorites]


CSS gurus are fonts of wisdom.
posted by It's Raining Florence Henderson at 9:20 AM on March 12, 2013 [16 favorites]


I'd like to read more actual studies with user testing from the professionals before jumping to any conclusion. Yes, sure, larger text is generally better, but pixel density also makes a huge difference as we approach DPIs that come close to the printed page.
posted by gwint at 9:20 AM on March 12, 2013 [3 favorites]


Floatboth: um, you just identified yourself as a humorless Nerd bomber.
posted by lordaych at 9:20 AM on March 12, 2013 [3 favorites]


reading text big enough to be in a Dr Seuss book.

Again, the examples at the bottom put the lie to this kind of exaggeration.
posted by mediareport at 9:20 AM on March 12, 2013 [1 favorite]


It's weird when I visit MeFi on someone else's computer and I realize how small the default text is.

The key to this is to just reset the font on every computer you log into MetaFilter on as if it is a compulsion. Eventually almost all computers in your life will be set-up with the right cookies.

Or so I've heard.
posted by MCMikeNamara at 9:21 AM on March 12, 2013 [1 favorite]


This made me realize that maybe my GET OFF MY LAWN sign uses too small a font.
posted by chavenet at 9:22 AM on March 12, 2013 [5 favorites]


I'm a big fan of the Readability plugin, by the way, although I suspect they're spying on our reading habits.
posted by uosuaq at 9:23 AM on March 12, 2013 [1 favorite]


Yoink: Justified text is less readable? Huh. I'm prepared to believe it, but having grown up in a world where just about every book, newspaper and magazine ever was justified I'm finding it a little difficult.

A ragged right margin makes it easier to find the next line of text and, with long lines, to have no issue with staying on your current line. It's not the biggest sin against usability, but it's generally acknowledged now that the 'perfectly straight edges' doesn't enhance things.

Once I started left justifying everything, I noticed that it's easier to read.
posted by fatbird at 9:24 AM on March 12, 2013 [2 favorites]


"If you can read this, GET OFF MY LAWN."
posted by Kabanos at 9:24 AM on March 12, 2013 [4 favorites]


YES. This is why I route nearly everything I read through Pocket, so I don't have to squint at 10pt Verdana every time.
posted by Cash4Lead at 9:25 AM on March 12, 2013 [1 favorite]


Yeah, it took two ctrl-- presses to get the font down to the size where there was enough on a page to get up to speed, though his inter-line spacing is still too freakin' huge. I find his "before" blocks of text way more readable. And nthing the "right justification sucks" chorus.

I'm 44, so if it's an age thing, it's that the kids these days with their porns on their internets are going blind from playing with themselves.
posted by straw at 9:25 AM on March 12, 2013 [3 favorites]


mazola: um, size is just a number you set in CSS. Fonts are vector graphics.

Haha you responded.
posted by xmutex at 9:25 AM on March 12, 2013 [1 favorite]


More importantly, change your line height. Yes, < 11px is probably too small for a lot of people, but for most of these websites, all that is required is a change of leading. All I did here is change the line height to 1.5em, and it's fairly readable (though I'd also remove the small caps, which are hard to read on most displays).

As a general rule, sans-serif fonts designed for print (Helvetica, for instance) can be made a little smaller on screen than serif faces designed for screen (Georgia). Serif faces designed for print (Baskerville) need to be larger. Sans-serifs designed for screen (Verdana) can be made a little smaller. And, of course, take into account the content of the website. Long-ish articles (1000+ words) need a slightly larger font on the web, and some kind of breaks every so often to mitigate fatigue (pull quotes and headers were invented for a reason). Websites with generally short articles can often get away with smaller fonts.

Short answer: there is no rule. A set of rules for one application may not apply to another.
posted by nickheer at 9:26 AM on March 12, 2013 [6 favorites]


floatboth: "mazola: um, size is just a number you set in CSS. Fonts are vector graphics."

A cute amount of favorites for a cute little guy.
posted by boo_radley at 9:26 AM on March 12, 2013 [1 favorite]


> PSH, you can ctrl-spin the mouse wheel! It's EXTREME!

And woe, ah say WOE unto you if your text doesn't wrap properly after it's been resized. (Double woe if it doesn't wrap AT ALL after it's been resized for printing.)
posted by jfuller at 9:27 AM on March 12, 2013 [2 favorites]


It's disappointing how few good studies there are about readability. The most hackneyed bromide is "serif fonts are easier to read than sans-serif". It's usually cited as a print study and it turns out even that original study is flawed. And there's no reason to think it'd apply to on-screen reading on low DPI displays. Anyway serif/sans-serif is mostly an æsthetic choice. Font size, leading, margins, I'm not aware of any rigorous study on how those choices affect readability.

It's good that most browsers let you scale text up. But that tends to break all the pixel-perfect design. Why not design a page to be readable in the first place? Particularly frustrating for web pages that are all about reading walls of text. I love the fresh readable design of Medium.
posted by Nelson at 9:29 AM on March 12, 2013 [4 favorites]


Firefox has this feature! (Although it's for all text, not just body text.) Go to Options -> Content -> Fonts & Colors -> Advanced and you'll be able to choose a minimum font size.

Exactly. The Web isn't newsprint, it's content that's wrapped in a descriptive formatting language interpreted by a web browser for display on a variety of mediums (print, screen, screen-reader). If we're arguing about font sizes, then we've already lost the future.
posted by RonButNotStupid at 9:29 AM on March 12, 2013 [7 favorites]


Reminds me of Jeffrey Zeldman's latest redesign, which I love, and the associated Web Design Manifesto:
This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.
I use both Readability and Instapaper religiously, because they really help me focus on what I'm reading. It sure is nice when I don't have to, though.
posted by whitecedar at 9:30 AM on March 12, 2013 [4 favorites]


It also depends how close you sit to the screen. I like to press my face right up against it and move my head like a typewriter carriage as my eyes oscillate up and down scanning the text, so I find myself disagreeing with the OP's take on things.
posted by fleacircus at 9:31 AM on March 12, 2013 [3 favorites]


This would be great for when I want to use my laptop from across the room.
posted by 2bucksplus at 9:31 AM on March 12, 2013 [2 favorites]


I do a fair bit of my internet reading on a 42" HDTV, and it was on this device that I clicked onto the link, already nodding in agreement. I was a bit disappointed then, when it was black text on a blinding white background. I'm not seriously going to say black text on white is a bad thing. But given that the author specifically mentioned the challenges a person can have reading text on an HD screen, I was a little disappointed that font size and line width were the only factors he thought to address. Even a very light grey background would have made it much easier to read.
posted by DirtyOldTown at 9:31 AM on March 12, 2013 [4 favorites]


Reminds me of Jeffrey Zeldman's latest redesign, which I love,

Oh gods that's shit. Who thought it was a good idea to make sure you can only get one line of text on the screen?

What if all those hipster designers actually went to an optician to get some reading lenses to put in their fancy dancy designer frames? That would help.
posted by MartinWisse at 9:33 AM on March 12, 2013 [1 favorite]


No.
posted by koeselitz at 9:33 AM on March 12, 2013


In all seriousness, I'd like to know if the author of the linked article is over 40

Yes indeed.

I've been designing websites professionally for about twenty years now, and my default base font size has been increasing by an average of 0.3 points per year. I'm also a lot more careful these days about making sure the text wraps correctly after a ctrl+ or two, mostly because towards the end of the day I'm doing that myself because my eyes are tired.

If MeFi still supported the <big> tag I would be able to demonstrate here what the average website will look like in 2023, when a substantial percentage of web designers are wearing bifocals.
posted by ook at 9:35 AM on March 12, 2013 [5 favorites]


Again, the examples at the bottom put the lie to this kind of exaggeration.

*shrug* They sure look Seuss-sized to me.

Maybe if he stepped into the 1990s and quit measuring text in pixels (the result of which, by definition, vary depending on screen resolution, which is the real problem here), that wouldn't be the case.
posted by Sys Rq at 9:35 AM on March 12, 2013 [1 favorite]


I'm (technically) over 40 and ctrl-clicked OUT 4 times before I thought the font size was ideal. (And why bold for everything? It's like reading a comic book, only 100x worse.)

However, my corrected vision is 20/20 or 20/15. Without my contacts I'm not sure I could find the monitor.
posted by DU at 9:38 AM on March 12, 2013


Man but I vehemently associate line heights greater than ~1.7em with content farm bullshit, especially when the font in question is a sans serif. I can't shake the association.

Psst, floatboth, linking to the profile page when you reference another user's comment that way is totally not the expected behavior, and for good reason. See boo_radley's comment for a typical usage of that quote style.
posted by invitapriore at 9:39 AM on March 12, 2013


Justified margins require proper typesetting, with spaces between letters and words nicely adjusted and usually the use of appropriate hyphenation. A lot of newspapers and magazines do a fairly decent job of this, b u t   s o m e     d o n ' t.   Anything formatted in Word with justified margins looks like crap. In the linked article, justified margins are achieved just through varying space between words, but not between letters, which is what starts making it look clunky. I guess there might be a way to fix that with CSS, but I'll leave that to the Rockstar Ninja Guru Diva Evangelists.
posted by Kabanos at 9:39 AM on March 12, 2013 [4 favorites]


um, size is just a number you set in CSS. Fonts are vector graphics.

What? That's unpossible!
posted by KokuRyu at 9:39 AM on March 12, 2013


MartinWisse: I count 21 lines on my screen. Reading them might answer your question. :)
posted by whitecedar at 9:40 AM on March 12, 2013


Oh, yeah, Kabanos said what I forgot to say re the readability of justified text. It's fine in print because there's a human being who gets final say on it, but automatic browser justification almost always leaves rivers.
posted by invitapriore at 9:42 AM on March 12, 2013 [1 favorite]


ps. It's not the size of the font that counts, it's the weight of the stroke.
posted by Kabanos at 9:43 AM on March 12, 2013 [2 favorites]


A ragged right margin makes it easier to find the next line of text and, with long lines, to have no issue with staying on your current line. It's not the biggest sin against usability, but it's generally acknowledged now that the 'perfectly straight edges' doesn't enhance things.

Do those of you who feel this way find books difficult to read?
posted by yoink at 9:44 AM on March 12, 2013


Yes, let's obsess over his use of pixels. Or how bigger fonts look cartoonish. Then let's Ctrl-+ every site until you can read the body text, thus busting any and all other columns, headers, menus, inputs, and woe betide you if there's a popover with a dismiss button that's been sized off the screen (because it almost never shows back up when you size back down).

Put simply, the semantic web needs to tag exactly one element on your otherwise beautiful page as "body content" and then let me size, reflow, and otherwise experience that content in a form that doesn't rely on your floating, pop-overing, margin-ignoring, fixed-width dipshittery.

That way, folks who have the DPI and eyesight to enjoy text-dense, unpaged information and I, someone with my glasses on and a big monitor and already-big fonts don't have to fight the one-resize-fits-all 99% of sites require me to do.

Honest fact? I read MetaFilter more than any other site on the web because when I Ctrl-+ it doesn't totally fall apart. If McSweeneys or CNN or Slate or BoingBoing or (shudder) Reddit didn't require me to spend time with Stylish or other plugins to make readable, I'd give them their precious pageviews. I read it on mobile devices, tablets, large and small screens because it flows without breaking... except for the compose experience (for which I mostly blame every browser ever).

The smugness of folks talking dismissively about age, disability, and "why don't you just use nine different plugins to counteract the visual fuckery" are, if you put yourself in the shoes of someone who can't just correct the problem by digging in to their own css, pretty poorly thought out.

Oh, and whoever invented -webkit-text-size-adjust:none, which I have to forcibly override in every browser, can die in a fucking fire.
posted by abulafa at 9:46 AM on March 12, 2013 [33 favorites]


This dude is stuck in the past. Large fonts are meant for big ass screens sitting several feet away. For tablets, with smaller screens closer to the eyes we need smaller fonts. How are his 32px fonts going to look on google glass.
posted by Ad hominem at 9:47 AM on March 12, 2013


Do those of you who feel this way find books difficult to read?

I've noticed that if I'm not concentrating, I can lose the next line of text and have to find it again. On my Kobo reader, I can switch between left and full justification, and I feel like this doesn't happen as often with left only justification.
posted by fatbird at 9:48 AM on March 12, 2013


Don't larger fonts take longer to download and use more bandwidth?

Yep. Also, those fucking serifs catch on everything and can cause major blockages in the tubes.
posted by ODiV at 9:50 AM on March 12, 2013 [16 favorites]


I can deal with small text. Super-small text in a colour that doesn't give enough contrast with a coloured background that has lots of texture and distressed shit on it, as was the fad a few years ago, makes me reach for my revolver.

Oh yeah, the link: the essay text font was way too large on my 1920 x 1200 display. The line heights were awful, because there wasn't enough of a difference between the spaces between lines and the spaces between paragraphs.

The text sizes in the reworked examples from the other sites were fine, but again, the line heights were a little too much in some of the exanmples. I can see the advantage of opening things up a little from the default, but it feels harder to read to me because your eyes keep having to jump over these canyons from line to line. OK for display text, not great for extended reading.

On preview: Zeldamn, WTF? [Leaving in the typo, because COME! ON!] On further re-reading: those lumbering, elephantine fonts are used just on that index page. The articles move down to large but less ludicrous fonts, as seen here. Zeldman has also made sure that the line-heights and the spacing between paragraphs are sufficiently different.
posted by maudlin at 9:52 AM on March 12, 2013


nice professional white background
posted by pyramid termite at 9:52 AM on March 12, 2013 [1 favorite]


The net effect of this article is likely to be much more bad than good.

Just came in to say in effect what Nelson said; it's stupid and senseless to publish an article like this and use "pixels" as your unit of measurement. Especially since it will get reposted everywhere and get all kinds of unwarranted cred thereby. Generally "px" does not belong in your style sheet at all.
posted by George_Spiggott at 9:54 AM on March 12, 2013 [2 favorites]


Also, those fucking serifs catch on everything and can cause major blockages in the tubes.

That's why screen fonts are still designed with ink traps.

(It's not really true that fonts are just vector graphics; hinting for specific render sizes significantly complicates what a font is. If you want to get an idea how hard it is to render type nicely on the web, check out the TypeKit blog posts on the topic.)
posted by Nelson at 9:55 AM on March 12, 2013 [1 favorite]


I like the NoSquint extension for firefox. It remembers my zoom settings for each website, so the text is zoomed correctly when I return the next time.

There's a zoom status display at the bottom of the browser window. I can zoom just the text, or zoom the whole page. For instance, I have Metafilter set at 100% page and 130% text. ( I didn't know about the MF text settings.)
posted by jjj606 at 9:56 AM on March 12, 2013 [3 favorites]


mazola: um, size is just a number you set in CSS. Fonts are vector graphics.

My favorite part about this is that is seems to still go along with the idea that fonts are downloaded when you view a webpage.
posted by shakespeherian at 9:57 AM on March 12, 2013


Show me someone with a design manifesto proclaiming to have the final word on UI usability of any kind, and I'll show you someone in the thrall of the current fad whose "perfect look" will be just as much a joke five years from now as it would have been five years ago.
posted by belarius at 9:57 AM on March 12, 2013 [1 favorite]


belarius: Show me someone with a design manifesto proclaiming to have the final word on UI usability of any kind, and I'll show you someone in the thrall of the current fad whose "perfect look" will be just as much a joke five years from now as it would have been five years ago.

Is this the joke you're referring to? (the only part of Zeldman's "manifesto" that could really be construed as such):
I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size.
Doesn't seem all that ridiculous to me.
posted by whitecedar at 10:02 AM on March 12, 2013


Do those of you who feel this way find books difficult to read?

I'm not sure, but I think you're confusing what fatbird is talking about, perfect justification, with left-justification. A (not very) random sampling of the books on my nightstand showed 3 out of 5 with perfect justification, which actually surprised me. I do think it's a little harder to scan quickly, but not difficult to read.
posted by yerfatma at 10:04 AM on March 12, 2013


In 2013 with a skabillion devices, screen sizes and dpis to consider, he's arguing for a pixel-based font size?
posted by FreezBoy at 10:05 AM on March 12, 2013 [3 favorites]


My favorite part about this is that is seems to still go along with the idea that fonts are downloaded when you view a webpage.

I've got some bad news for you. Now that everyone on Earth has a super high-speed internet connection (even on their phone), at least as far as web developers can be bothered to check, downloading fonts is definitely a thing again.
posted by yerfatma at 10:06 AM on March 12, 2013 [2 favorites]


Full-on agree with this guy. Also, Firefox can go eat a big pile of dicks when it comes to fonts. I've messed with it for the last three months because it's maddening to either get teeny-tiny or giant fonts and nothing in between. I've tried every trick in the book to get it to work and finally found what worked; I installed Chrome.
posted by KevinSkomsvold at 10:08 AM on March 12, 2013


I'm not sure, but I think you're confusing what fatbird is talking about, perfect justification, with left-justification. A (not very) random sampling of the books on my nightstand showed 3 out of 5 with perfect justification, which actually surprised me. I do think it's a little harder to scan quickly, but not difficult to read.

I'd be interested to know what books you have--other than books of poetry--that have a ragged right margin. I can't think of any normal prose books from major publishers that would be typeset that way. The vast, vast majority of professionally produced books are justified (that is flush left and flush right).

As for font size; I tend to agree that the real issue here is making sure the design doesn't break when you increase the display size. My eyes are crap and I get mad all the time with dead-tree media for fucking up font sizes (I'm looking at you Dwell magazine with your tiny-tiny-tiny fonts that are as often as not light yellow on slightly less light yellow), but I can't really remember the last time this was a real problem for me personally on the web.
posted by yoink at 10:16 AM on March 12, 2013


Take it easy there, grandpa...
posted by freakazoid at 10:25 AM on March 12, 2013


You kids let me resize if you want to be on my damn lawn.
posted by srboisvert at 10:28 AM on March 12, 2013 [1 favorite]


...but first, make the street names bigger on my first gen iOS5 iPad maps.
posted by bonobothegreat at 10:31 AM on March 12, 2013 [1 favorite]


Though I admit I miss the day when flyspeck-condensed was an available print mode on every printer there was including Deskjets, and setable with a one line .bat file. Print the King James Bible on 16 pages! I grant you'll probably have to print double sided.
posted by jfuller at 10:32 AM on March 12, 2013


I've got some bad news for you. Now that everyone on Earth has a super high-speed internet connection (even on their phone), at least as far as web developers can be bothered to check, downloading fonts is definitely a thing again.

Run noscript and see how many goddam javascripts are loading from all over the bloody place when you go to a major website. Sometimes when I load a webpage it feels like the cataclysmic scene in 2012 where everything in the world seems to falling into that one chasm. script type grumble grumble grumble.
posted by srboisvert at 10:35 AM on March 12, 2013 [2 favorites]


Yes, I'm all for anything that makes the web look less like a 14 year old goth girl's LiveJournal.
posted by Uther Bentrazor at 10:35 AM on March 12, 2013 [1 favorite]


Is it just my eyes, or is the leading on all his "after" examples fucked up? My eyes kept skipping up and down and it was really hard to read.
posted by notsnot at 10:44 AM on March 12, 2013


It is a lovely idea, though I don't know if it will ever compete with the oh-so-chic designers with fancy monitors and optimum lighting, who have absolutely no problem declaring that all text will be light grey on a white background. Because who needs contrast or font size?

They can read it!

(These are also people who give website standards in inches and PANTONE colors, but that is a whole other issue.)
posted by fifteen schnitzengruben is my limit at 10:44 AM on March 12, 2013 [3 favorites]


Honestly, big fonts simply hurt my eyes. It was really, really hard for me to read this article, especially with the white background. I bumped it down to 75% in chrome before it was comfortable. I read mefi at 90% and just hate it at 100. 'Optimizing your site's content for a real viewing distance' is, for me, a much smaller font than the author likes. The rules he proposes about style clearly just don't apply to me, and quite possibly for a significant number of people.

So I guess I just don't get this article as anything other than 'I have a different style preference than the majority of websites adhere to'. He might be right about the HD screen though; I wouldn't know, but HD tv causes me trouble sometimes.
posted by six-or-six-thirty at 10:51 AM on March 12, 2013 [1 favorite]


Reminds me of Jeffrey Zeldman's latest redesign

Holy shit. I had to zoom out on my 30" monitor to make that look good to me.

Why pixels? Why not ems? Or are pixels required for "responsive" CSS these days?

Fortunately we have zoom in and out to help with our individual preferences. I'd agree that tiny type isn't particularly good and that most clients don't give a fuck about any of this and it's very difficult to get them to care.

Look at Foundation 4 for example, a very nice front-end web framework that has wishy washy support for IE8 which is great in an ideal world, but not particularly practical in the real world for many clients who'd shit their pants if all the IE 8 users didn't see their site properly. That some solutions have come out a couple of weeks after release shows that it was a concern to to many and therefore, some in the design community can react.

Now I have to backtrack on not using Foundation 4 perhaps...
posted by juiceCake at 10:52 AM on March 12, 2013


I stopped reading as soon as I saw a horizontal scrollbar pop up. Anybody who claims to know anything about usability but can't write a design to handle a browser that is taking up only half of a widescreen display is clearly not as good at usability as they think.

Personally, though, I'm tired of designers assuming that I need fonts at sizes that used to be reserved for events like the outbreak of World War III in order to read body text. I have a laptop and those font sizes are too large to read when it's actually sitting on my lap. The dimensions of the printed page and standard sizes of text weren't just picked at random; readability studies have figured out that there's an optimum number of characters per line and an optimum number of lines between page turns/scrolling, and lately web developers seem to have forgotten that because they assume that everyone has a retina display and is trying to read it from across the room just because that's how they choose to work. It's like the advent of high-DPI screens and mobile has set us back ten years on the readability side of usability sometimes.
posted by djlynch at 10:59 AM on March 12, 2013 [4 favorites]


big text wraps sooner
newline valley gulfs thought; text
length capped to fit.
posted by davemee at 11:10 AM on March 12, 2013 [1 favorite]


Back in 1998, when even the word "weblog" was still something bouncing around Jorn Barger's mind, and maybe had been considered by a few tens of people, my weblog got its first big boost of readership when I trolled the Web Standards Project on their site design.

Reading the comments here suggests that in the 15 years since, nothing has changed. Designers still think they have "the one true way", about a quarter of the readers (like me) think the designers are largely full of crap blowhards who should let the reader figure out how to best read the content, about a quarter of the readers think everything should be laid out just so as the designer intended, and the other half doesn't care one way or the other.

But designers still troll, and I still take the bait, and the page hits continue to roll up.

I will say, though, that it's screeds like this that make me pop up Lynx and mash reload a couple of times, just to see if the designer is paying attention to his audience.
posted by straw at 11:10 AM on March 12, 2013 [2 favorites]


Note: this rant also applies to every other site where people consume your content. If you're using anything under 14px font, you're bad and you should feel bad. Seriously though, use 16px+.

I feel like I should respond to this:

I used to make fonts for C64 programs, and there an 8x8 grid is all you get. Pixel sizes change greatly depending on the resolution of your device.

I sometimes use <small> here on Metafilter, but generally only to:
1. USE THE SMALLCAPS TRICK.
2. make some text slightly small so that other text LOOKS BIG by comparison, to get around THE LACK OF <big> TAGS.
3. Sometimes when quoting large amounts of text, so as to avoid bloating up the thread spacially too much. Sometimes in conjunction with <blockquote>, since it increases margins.
4. When I have a parenthetical remark to make, sometimes a level of small can emphasize its extraneous nature, although I wouldn't expect you to care about that.
5. To provide the effect of text slowly fading away like what I'm doing now don't bother reading this it's not important I wouldn't put important stuff down here. ("To provide the effect of text slowly fading away like what I'm doing now don't bother reading this it's not important I wouldn't put important stuff down here.")
6. For weird special effects. This is uncommon enough that I can't think of any examples. Maybe if you're supposedly quoting someone who's a Borrower or a Little or a fairy or some other form of excessively small person.

The point: there definitely IS a use for small text sizes at times, so long as you know what effect you're going for and, if you want it to still be readable, are careful about it. Websites shouldn't generally specify exact pixel sizes these days anyway, what with ultra-high resolution displays becoming common.
posted by JHarris at 11:22 AM on March 12, 2013 [1 favorite]


If a design is built on em sizes with roughly a 1.5 or 1.6 line height and @media queries with good breakpoints, none of this should be an issue, no matter what the device. (That said, I think a base pixel height of 12-14px is plenty. And I'm a 52-year-old bifocal wearer.)
posted by Benny Andajetz at 11:25 AM on March 12, 2013


Ah, C64 fonts, JHarris. What a pain 'i' was, with all that wasted space.Digital Typographers don't know they're born, these days.
posted by davemee at 11:26 AM on March 12, 2013


Five or six years ago, I remember fighting extensively for keeping the font sizes of our worldwide-use product to a minimum of 13px. The larger company had guidelines saying that it was the smallest font size we should be using, research to back up the guidelines, and we knew that below 13px some non-english fonts became unreadable.

I ultimately lost that battle, for the usual reason: 12px and 11px look better (on the designer's giant monitors, and in english.) And when we rolled out certain international markets and the font wasn't legible, we had to go back and rework significant portions of the UI, because they'd also rejected advice related to space for other languages.

Now I work on products with nice, legible fonts, and I like using the products myself, because my eyes are old and busted.
posted by davejay at 11:28 AM on March 12, 2013


Yes! You know what else needs to stop? Gray font, especially gray font on a non-white (typically pale gray or pale blue) background. WHY DO YOU DO THIS.
posted by ErikaB at 11:32 AM on March 12, 2013 [1 favorite]


The whole damn reason this is broke in the first place is browser "manufacturers" started shipping browsers with a default font size of 16pt. Which is fucking huge. Mix in the fact that the vast majority of folks on the Internet don't adjust their default font size to something they actually prefer when reading body text. Now developers/designers/neenjahs are stuck in a world where they cannot use relative sizing--which just makes fucking sense as the one true way to fucking go--because the default size makes their pages look shite and the dumb fuck manager who signs off on these projects goes apeshit because this is how things look on his/her browser.

There there is someone like me who took the time to make sensible decisions on how my browser should behave by default and now my wishes are rode roughshod because someone is enraptured with today's frippery.

I continue to increase my usage of Lynx just because, fuck you, this is how I can read the fucking web (and look like I'm actually working). The fact that all kinds of nifty dynamic cruft breaks in Lynx is somewhat of a feature because it just means there is less of the web to waste my time reading.
posted by Fezboy! at 11:49 AM on March 12, 2013


[Perhaps unrelated] NOTE TO SOUND EDITORS: I can't hear the crucial dialogue because you sank it beneath your artsy background music!
posted by ahimsakid at 11:50 AM on March 12, 2013 [1 favorite]


On an HD screen, reading your 10pt Times New Roman or Arial is like trying to see bacteria with an unaided eye.

Anyone who wants to preach about font sizes but doesn't grok the difference between sizes in pixels (which vary in actual size depending on the screen's resolution) and sizes in points (which don't) should instead shut their mouth and go for a nice walk.
posted by dendrochronologizer at 12:08 PM on March 12, 2013


I love how his site is basically designed to look like a slightly less readable version of Readability (which is great and pretty much solves the problem he discusses).
posted by asnider at 12:20 PM on March 12, 2013


I actually prefer slightly larger fonts on websites. Bigger monitors mean bigger fonts. Higher pixel density means that fonts need to be scaled appropriately. And with the rise of tablets, people seem to forget that not every tablet has a Retina display - so the miniscule fonts look blurry as shit on my 2nd gen iPad.

My solution is pretty simple.

Readable font on the site. Adjustment to the font size for mobile displays. No positioning that will be broken by resizing. And no attempt to restrict end users from setting whatever default font size they wish.

Also, sites that have insufficient contrast between body text and background? Those sites suck. Worse are the ones that do this, but use black text for comments, thus emphasizing the content that other people added while diminishing the importance of the site itself. This is dumb. The text with the lightest color (assuming light background) should not be the main content on the page.

For the record I am under 40 (just barely) and my opinions on font sizing/color are ones I have held for at least 10 years, judging from my old site designs anyway.
posted by caution live frogs at 12:21 PM on March 12, 2013


because the default size makes their pages look shite and the dumb fuck manager who signs off on these projects goes apeshit because this is how things look on his/her browser

It renders in his browser the way that it's going to render for the casual user, but he's apparently a dumb fuck for pointing it out. Good to know.
posted by asnider at 12:23 PM on March 12, 2013


It renders in his browser the way that it's going to render for the casual user, but he's apparently a dumb fuck for pointing it out. Good to know.

Yes. Perhaps a bit too strongly put. The whole thing was written as over-the-top rant, but fidelity has never been the strong point of this medium.

The point being, user education or push back on the producers of browsers at no point enters the conversation so that the actual solution to the problem is never advanced.
posted by Fezboy! at 12:27 PM on March 12, 2013


I am 49, wear bifocals, and on my 13" Macbook pro, his font is too large. Most of the small examples looked better to me than his alternatives. On the Macbook most of the web is readable, however, on my gen 3 iPad, almost all websites are too small to read in portrait mode and most are still a bit small in landscape. If pixel density keeps going the way it has been, in another ten years I'll probably have a big magnifying glass in front of the screen.
posted by doctor_negative at 12:47 PM on March 12, 2013


Lets use millimetres . And font size buttons with text reflow for every website instead of zooming in and breaking layouts.
posted by captaincrouton at 12:51 PM on March 12, 2013


I wonder if this has anything to do with being part of a particular demographic. People both older and younger than me seem to enjoy font sizes made for an ant. I cannot read the ridiculously small fonts.

I believe this is because I grew up with text on a TRS-80 and DOS. Big and beautiful.

People older and younger have no frame of reference, as the older people started using computers when font sizes had already become microscopic, and younger people have been conditioned by it their entire lives.

BTW, the font size on the linked article? Too damn small!

I have perfect vision thanks to optical correction and do not need to see an optometrist, thanks for asking ;)
posted by Yowser at 12:58 PM on March 12, 2013


I'd be interested to know what books you have--other than books of poetry--that have a ragged right margin.

They were both programming books, so there you go. I checked a few other programming books on my shelves and it seems to vary by publisher. I'm an idiot and once again conflated what I'd been taught to do for screen with "text layout in general".
posted by yerfatma at 1:53 PM on March 12, 2013


I like my fonts big because my vision is dubious (supposedly 20/20 but heavily corrected, bifocals, etc) and also I sit about 20" from a widescreen monitor with a (to me) teeny default resolution. And yeah, the lack of distinction between point and pixels detracts from the article.

On a side note, this seems like a good place to mention why I hate iPhones and iPads for reading web sites: My perception is that you can't resize the text on either device. On my Android phone if I reverse pinch the screen the font enlarges and the text reflows. But on my iPad, the text gets bigger but *doesn't* reflow, so I have to scroll horizontally to read every line. Am I crazy? It seems like terrible design ... the result is that I read MF on my phone while the iPad sits next to me on the table unused until I want to play games.
posted by freecellwizard at 2:01 PM on March 12, 2013


But on my iPad, the text gets bigger but *doesn't* reflow, so I have to scroll horizontally to read every line.

Have you tried using the "Reader" button (to the right inside the URL bar)? It's not an option on every page, but on most "I'm reading a single article now" type pages it shows, and it will convert the text into a very readable format.
posted by yoink at 2:17 PM on March 12, 2013


freecellwizard: It's Safari. Chrome is bad for embiggening fonts, too. I use Mercury since it's the first one I found that lets you easily change font size. And it remembers the font size that you used on particular webpages automatically.
posted by rabbitrabbit at 2:18 PM on March 12, 2013 [1 favorite]


I'm mid-forties, and have been using computers since forever (OK, 1979). Last year, my optic nerves blew up in a fascinating and complex way, and I now have (on top of yer normal mid-forties eye decay) a very mixed bag of optical capabilities. These include - but are not limited to - the inability to read certain fonts at all (including most italics), a number of font-related oddities such as certain letter combinations vanishing into blerg, a set of font sizes and weights that work really well but aren't formulaic, certain colour combinations ditto, and a lovely general lack of precision that embuggers my ability to see punctuation, scroll bars and other nice-to-have embellishments.

This has, unsurprisingly, increased my interest in all such matters. (This thread contains a number of leads I am SO going to follow up, btw - thanks, mefi.) But, having been through quite a lot of frustrations, discoveries, experiments and discussions, I have come to these conclusions.

1. This shit is broken, and there's no corporate or systematic willingness to fix it...
2. ... until all the twenty-something designers put on a couple of decades
3. Your eyes are not my eyes. What works for you may not work for me, and that ^maxint for those who have serious visual problems.
4. We have all the bits to fix this

The best I can come up with as a strategy is a system of hints to designers, rendering engines and everything else tweakable in the chain from bits to retina. So far, I see this working thusly.

1. You do an interactive eye test, which characterises what works best for you to whatever degree you need. Yes, I know eye tests are hard (really I do), but it's time to move on from the eye chart on the wall.

2. This test produces a standardised, machine-interpretable description of what you need to read - your personal visual profile

3. PVPs become part of the whole rendering process, with 'standard' PVPs used as part of UX testing - and your PVP installed in your systems to get whatever you use to get at data to make the best guess at how to deal with you.

There's obviously a lot of underpant gnome here, but it's about time we found ways to use the facts that there's a lot of machine smarts all the way through the chain and one font size does not fit all.

Oh, and yes. Anyone who designs web sites that actually break Ctrl-+ for body text should not only die in a fire, but be brought back to life for further incinderation indefinitely until they say sorry. Loudly. And mean it. Then burned one more time, just because.
posted by Devonian at 3:46 PM on March 12, 2013 [4 favorites]


Seconding NoSquint. It sets minimum fonts for individual websites and remembers them, so you set it and forget it, mostly. It's pretty much the only reason I haven't jumped ship to Chrome; font sizing in Chrome is pretty dire, and there's no NoSquint addon--yet.
posted by zardoz at 3:51 PM on March 12, 2013


MetaFilter: There's obviously a lot of underpant gnome here.
posted by rabbitrabbit at 3:57 PM on March 12, 2013


Hah. I just last week redesigned (and starting posting again at) the venerable emptybottle, and finally jumped on the the large-text, lotsa-whitespace, minimalist thing, only like 2 years late. Hooray!
posted by stavrosthewonderchicken at 4:00 PM on March 12, 2013


1. This shit is broken, and there's no corporate or systematic willingness to fix it...

This is the web. It is made of open standards (HTML, CSS, etc.) not corporations.

The user can select whatever font size they want via their browser. Firefox even remembers per-site settings WITHOUT addons. I assume the other modern browsers do the same.
posted by gen at 4:57 PM on March 12, 2013 [1 favorite]


Alas, gen, there is a great deal of corporate on the web. I have had some recent experience in trying to get the corporate to take accessibility seriously, and while there may be many cases in which a particular browser fixes a particular problem for a particular person, there are many when none of that applies. What if you switch browser, go to a mobile platform, don't know how to select font size, or have things set up for your favourite site when a redesign sweeps all away?

The people who build the web sites and services on top of the open standards do not think in these terms. Indeed, they rarely think of them. Nor will they: it's a deeply unsexy area, it costs resources while not appearing to make any difference, it imposes restrictions. Like almost every area of disability, fixing it is a long and difficult process of education, demonstration, even legislation. But without that, as we get older and more infirm, the digital world will be taken away from us - even as it holds the promise to retain the disabled as full and active members of that world, as never before.

What I'm proposing is an additional standard or set of standards, entirely open, that codifies the problem in a general case and provides the framework for tools and thinking that makes it solvable. Much development of open standards, open source and open framework takes place because of corporate will: the lack of it is a major hindrance.

The W3C is trying, but it's got almost no visbility for its accessibility work. And you'll find various disconnected islands of activity such as Google - four blog posts since May last year, Microsoft - four press releases in the same period, and Apple. IBM is quite the exception: even here, though, unless you're already actively involved in the field I'll bet a bean to a BMW that even if you're active in web dev or design you've never looked, nor thought to look, in a way that would be quite unthinkable for other core considerations.

When I say this shit is broken, I mean it. It's my world now, and I know broken shit when I (don't) see it. It'll be lots of people's worlds as they get older, especially when you look at the stats for serious eye problems in an ageing demographic, and it's so far from being a "you can fix your font size in Firefox" issue that thinking it of in those terms is being part of the very same problem.

May it never be your world, and may you reap the many benefits that will come if we make this whole darn place better able to serve common humanity in all its variants.

(Next week, in "Broken Digital Shit That Will Break Your Heart After You've Broken Your Eyes": DRM.)
posted by Devonian at 7:57 PM on March 12, 2013 [4 favorites]


jjj606: "I like the NoSquint extension for firefox. It remembers my zoom settings for each website, so the text is zoomed correctly when I return the next time.

There's a zoom status display at the bottom of the browser window. I can zoom just the text, or zoom the whole page. For instance, I have Metafilter set at 100% page and 130% text. ( I didn't know about the MF text settings.)
"

Just coming in to say NoSquint.
posted by Samizdata at 9:49 PM on March 12, 2013


MattMangels: "I'm 23 years old and with this guy 100%. It's weird when I visit MeFi on someone else's computer and I realize how small the default text is. It makes me feel like Andy Rooney."

Have you ever noticed how tiny all the print is on the internet? Back when I was in college, I had a full head of hair, and the newspaper was owned by a nice fella from back east who talked real fast. Maybe you'd get stained fingers from reading it on the subway on the way to work. Maybe you'd find out who Betty Boop was booping while relaxing with your morning scotch. My point is, you knew what you were reading.

I keep a special envelope full of letters I cut out from old newspaper headlines, and I have my intern tape them to the screen on top of the tiny letters before I come into the office every morning at 5:30AM. My grandson thought he was being clever when he told me there are much easier ways to make the letters bigger, but I'm just stubbornly old fashioned and prefer to see my intern learning something about how real journalism is done.
posted by krinklyfig at 1:23 AM on March 13, 2013 [2 favorites]


Just zoom the text and/or put your glasses on.

This is great,except on god-damned #$@$@$@!! sites that have fixed columns - especially a goddamned fixed central column which shits me up the wall - so when you embiggen your font you're suddenly getting all of five words on a line, and the actual content of the page is running through your monitor like a small vein of gold in otherwise featureless granite.

I'm on a loaner laptop atm because my work one is broken, and it's got some stupid DPI and other shit on it The facebook column is about three fingers wide and it's driving me nuts.
posted by smoke at 2:06 AM on March 13, 2013


maudlin: "I can deal with small text. Super-small text in a colour that doesn't give enough contrast with a coloured background that has lots of texture and distressed shit on it, as was the fad a few years ago, makes me reach for my revolver."

Sorry, the client asked for crafty. We're going to give them fucking crafty because that's what they pay us to do. ;)
posted by wierdo at 8:44 AM on March 13, 2013


I've bumped up my base font size lately and stay well the fuck away from setting it in pixels, because what used to look good on a standard 1024x768 screen just doesn't apply anymore. 16px seems pretty fucking big though.

And dude, too-high contrast causes just as much eye-strain as not-enough contrast, and can be irritating to people with dyslexia or ADHD. Either go for black text on a ever-so-slightly grey or cream background, or charcoal text on white.
posted by harriet vane at 11:19 PM on March 13, 2013


wierdo: "Sorry, the client asked for crafty. We're going to give them fucking crafty because that's what they pay us to do. ;"

We're going to implement png scanlines over the entire page as well.
posted by boo_radley at 3:14 PM on March 14, 2013


« Older Allegations of flawed research techniques...  |  Newly weaned harbor seal pups ... Newer »


This thread has been archived and is closed to new comments