148 comments

[ 31.4 ms ] story [ 4141 ms ] thread
I wish I could get a list of every web developer in the world and mail them a copy of this in a holiday card with a cookie attached.

I'd like to see a report that has the age curve of internet users, a projection of that curve over the next 20 years, and that curve in relation to the average decline of eye sight over time.

My hypothesis is that given the declining birth rates all over the world, most users are going to be older and therefore have worse eyesight than younger folks.

Make your fonts bigger!

Yeah... I've also noticed some sites for some reason won't let me re-size the text. It may be just a bug in tablet's browser but it's damned annoying.
I have terrible eye-sight at the ripe old age of 21. I've had terrible eye-sight since my age was a single digit.

All I ask of web designers is to consider us as much as they would somebody who has no sight as all.

If I sound pretentious, I invite you to read my reply below.

I have terrible eye-sight

So do I, but even then I prefer text sizes such as seen on HN, I don't like excessive scrolling and lots line spacing, or serifs for that matter. This new trend of websites with huge, fancy fonts is not for me, and it honestly never occured to me there might be more going on than just trading reading speed for pretentiousness; but I can't see through the eyes of others, so I'll just have to continue to make websites how they look best to me.

It's up to me to make sure it's resizable and not too hung up on being presented a specific way, but it's up to the web surfers to configure their browsers accordingly. To me that's kind of the point of HTML, that I can't know and shouldn't care how you read the site. A lot of websites fail real hard in that regard, but increasing their font-sizes won't fix the problem. You should be able to ultimately define how you consume the information... some people disagree, they'd rather make brochures; blame those, blame that mindet, and leave small fonts alone :(

You don't have to make fonts larger, just give me a way of increasing the size without either destroying the website layout or making the site that much more unreadable. I would like more flexibility and less rigidity. More times than not I have been plagued by text hiding behind a side-bar, narrow containers constraining the sections like a straw, and/or the layout breaking completely in the process.

I'd like to see less designers make presumptions about their audience. While ignoring a smaller section of their audience is fine when the "fix" is hundreds of man-hours away and many dollars burned, this situation is completely rectifiable within short time-periods in most cases and little money spent. Being responsive to your audience isn't a slippery-slope into dystopian large-textinship; it's a way to treat all of your visitors without leaving any wanting of a good experience.

I would like more flexibility and less rigidity.

I completely agree, and I guess I'm in the clear then... I religiously believed in fluid layouts way before responsive web design and whatnot where even concepts. It's just that I like the default "more tight" than what seems to be the preference of many, reading these posts - but if you're willing to zoom, I'm willing to make that as painless as possible :D

> but if you're willing to zoom,

:p How about you zoom out? That means you can have normal (huge) text for everyone.

Because I have glasses the nearly thickness of coke bottle bottoms and no problems with small text, because I didn't wait decades for high-res displays that don't flicker just to throw the resolution away again, and mostly because I don't really look at individual letters as glance across them when reading a normal text with known words, so for me smaller fonts allow scanning larger chunks more quickly, and parsing words and phrases in chunks as well, while moving the eyes back and forth and scrolling a whole lot hinder me from simply absorbing the text. In short, because it's more efficient for me and there are bound to be people for whom it's the same. Because designing for my own actual eyes strikes me as honest or something.
> Make your fonts bigger!

Within a 600px vertical column with 150% line spacing. With gentle contrast. Please.

Or at least test your site on all the big article reformatters.

600px? Are you using a 1024x768 monitor from 2000?
Nope. But I am reading it on a 1280x800 tablet in portrait mode. Or I have two side by side 0n a 2560x1440 monitor (effectively 1280 px wide each). Or even worse, two side by side on a laptop with 1920x1200 (960 px wide each). 600px makes all of the above scenarios doable with reasonable margins and other layout items like a navigation menu and ads.
You are aware that we have multi-tasking operating systems today?
> 600px? Are you using a 1024x768 monitor from 2000?

Why do you think they call it "newspaper column" and not "newspaper spread"? It's because the best way to read is in a narrow column (1/3 ... 1/2 the width of the screen). Otherwise the eyes need to move horizontally too much and risk losing position.

Horizontal, right? Or are you thinking of tablet scrolling?
I thought it was just me that likes my font to look like Safari's reader at all times. Good thing I know I'm not alone. I designed my blog the same way.
True. But I'm also sick of your giant, giant body font. Fluid layouts are especially bad at this, to the point that I need to resize my browser window every time I load a page, to make the font smaller.

The body font on - for example - this blog is way, way too big for me. My eyes hurt by reading it. I would make it 2px smaller and give it better line-height.

Hmm... I though it was about right.
I find that pretty odd tbh. What size monitor? Do you sit leaning towards the screen or leant back in your chair?

That blog font-size looks great to me. 1600 x 900, laptop, rocking a casual, semi-hunched position.

Agreed, and I'm surprised there aren't more of us. I don't advocate for 12px font sizes, but somewhere around 14 is probably correct. 16px is typically absurd. I wasn't even able to finish reading this blog post because it hurt so bad. Maybe if my monitor was another foot back or so, but unfortunately I'm in the common position of a cubicle with limited desktop mobility, so that's not an option.

Really, I find myself just not reading any site with absurdly big font sizes, or absurdly small. Keep designing for that 60 year old market if you want, but you're alienating the younger demographics.

Yes to this article. Using small fonts on a website makes too many bad assumptions about the audience.
The problem is that using large fonts on a website makes an equally bad batch of assumptions.
The tiny type thing doesn't seem to be such a problem as it used to be. In fact I often find the reverse problem of sites with type so big that it prevents much information fitting on the screen. The early 2000s where everyone used 8pt verdana seem to be behind us.
I regularly have my zoom set to 150%-200%.
This is why Android reflows text on double-tap zoom. No more tiny text or zoom-and-pan. (I didn't know until recently that Mobile Safari has no comparable feature)

By the way, downvotes don't change the fact that this is a non-issue on Android and desktop because double-tap zoom puts the content at a comfortable and customizable font size effectively solving this issue and that desktop browsers have the same ability to set minimum font sizes and zoom levels.

edit: Apparently Mobile Safari now has this as well. I don't know if it also allows you to adjust the font size but it just goes to show that there are existing solutions to this subjective problem.

You aren't being downvoted for being pro-Android. You're being downvoted for making non-constructive commentary. If you don't have anything to commit to a conversation, remain silent.
Really? A comment pointing out that this problem is solveable using existing features isn't relevant? Surely an angry rant about someone's preferences will force everyone to change their opinions about a subjective matter and is FAR more constructive. I expect all fonts on the Internet to be exactly up to Brent's expectations by next week.

Ironically, the right reply to my post was "this is something that Mobile Safari now does as well" according to this comment. http://news.ycombinator.com/item?id=5193498

Again, existing solutions to a subjective problem. Or an angry rant. Hm. Maybe we'll get lucky and next week we can have a "Fonts are too big" post in typical HN-opinion-volley style.

Actually Mobile Safari does not do this. It simply has: double tap on an element, and it zooms such that the element's width matches the width of your screen.

No reflowing is done. It may not be of much use; when I do this on HN, it only zooms in by a few percent because the elements already stretch most of the way across the screen. You are taking a magnifying glass to the page when you do this, NOT changing the layout to fit the screen and reflowing all the text.

Sadly, this feature has gone away now that I have the latest greatest Nexus phone with Chrome and Jelly Bean.

Why in the world would they get rid of this feature?

Well WebKit in Chrome already does font resizing on the fly (hence some of the weirdness in HN comments for exmaple). I rarely, rarely find myself manually resizing, zoom or double tap in Chrome for Android.
I suspect they got rid of the feature because users don't like it. I found it extremely frustrating.
Instead of manually zooming and constantly having to pan back and forth to read every single line of text? No thanks.
I don't get it either. I'd like to hear from a designer on why this ever happens. I used to work with a designer who set h2 to 11px. Boggles my mind. Does tiny type look better? I honestly don't get it.
there are a few reasons I can think of to use tiny type. For one, designers who are used to print might not understand that things should be bigger on the web, because you generally read websites at a further distance. Second, most fonts aren't designed for screens; and thus don't look good at larger sizes. 18pt for a font designed for body copy in print can be jarring sometimes. Lastly, and this might sound silly, but smaller type leaves more room for other stuff. Some people think scrolling is a pain.
Its funny that I am currently viewing this page after pressing command + a couple times because this site is guilty of this as well.
I know how you feel. I'm partially sight-impaired. I don't necessarily try for larger text in the OS itself (I'm using OS X at the moment, and the text is "just right"), but on some websites I feel the need to constantly zoom every time I visit.

I'm using HackerNew[1] right now, which gives a larger text layout, but is also a bit more flexible when I zoom in. I hope that helps a bit.

[1]: https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

While this is completely true and by far the more prevalent problem, I also dislike the other extreme, large fonts on a narrow layout. I don't see why you need a layout (for a desktop) that only manages to put 7 words per line.
I'm curious if any other HN readers set their browser to 110% for this site because I do, I find it a lot more readable.
yes, and HN is especially bad on mobile because the bad antiquated html code prevents mobile browsers from optimizing it a bit.
I sit a good 2m from my screens to avoid headaches, and have HN at around a font size around 14.
Yes! Looking at the sites I frequently visit this site is the worst offender. Me personally browse HN with a zoom of 150%.
And what's up with the growing number of websites which take deliberate pains to prevent me from using pinch-to-zoom on iOS?

Surely there's a special ring in Hell for those web anti-designers.

Upvoted because this drives me crazy. It's especially bad when I'm viewing links from in-app browsers that don't use the full screen width.
(comment deleted)
I think my biggest frustration is when there is a pop up designed to go to the center of your screen. This never works properly in a phone browser, making it impossible to either close or even view the pop up. I just give up and don't even try to get the content anymore.
(comment deleted)
So wrong. And its like - we know better how big letters you can read. You don't. I zoom almost all sites on my iphone, on 13" mac and on my work's 27" imac. Its all the same - I need at least some font increase to read it comfortably, because every time I sit on different distance from the screen. Or I maybe need glasses (although my doctor does not seems to think so).
While it is inexcusable to do this as a web developer, there is a layout bug in Mobile Safari to which this is the easiest and sometimes only solution. The designers aren't disabling zooming because they hate people who zoom, just because they're inconsiderate of them.
What's the layout bug?
http://webdesignerwall.com/tutorials/iphone-safari-viewport-...

Essentially, when you rotate the device to landscape, it doesn't correctly reset your view the content, so you end up zoomed in.

Thanks. I think I've run into that before (as a user), but just didn't think about it. Seems better to just make the user zoom back out than to disable zooming altogether, in any case.
What is more annoying is that using an Android device, which doesn't have this bug, you suddenly can't zoom either. Now that this is fixed in iOS, it will take a long while for sites to re-enable it. It's very unfortunate that web developers needed to disable features on all platforms to work around a bug in one.
Agreed, this is why I prefer desktop rendering on my phone, because most 'mobile' sites feel like 2003 blackberry sites. iPhones and other modern smartphones can read read regular html pages fine.
I think this happened because people started copy/pasting the following meta tag in to their HTML, thinking they were adding better support for mobile safari, and not fully understanding what it does.

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Really you should only consider adding this element if your site is optimised for mobile, either through a responsive design or with a dedicated mobile site, and even then maximum-scale=1 is usually a bad idea.
I don't understand the hatred people level at mobile sites that do not let you zoom when contrasted with the lack of hatred for mobile apps, which almost uniformly do not let you zoom.
> Sometimes I’m on my computer, and Reader doesn’t work on your web app. I hit CMD + two or three times... then the layout falls apart.

In ML, in Safari, double tap a text column with two fingers. It will zoom the text to fill browser width, just like the double tap with one finger on an iPhone or iPad.

The browser will zoom into that column without changing layout, and then re-render the page to make the text full resolution. Scroll will be lightly tied to the newly zoomed column.

Double tap with two fingers again to zoom back out to full page width.

Still, agree with the premise. Designs should anticipate text size of "content" areas being changed by the user, and the layout should support reflow of arbitrary text size changes without breaking.

In general, web developers (and the designers commandeering them around) need to stop resetting font sizes on body {} or something similarily silly. The default browser font size should be the base value, and all other fonts should simply be bigger or smaller by some factor. In an ideal world, people would also start using ems instead of pxs for media queries, but alas, we probably won't see that for quite some time.
This ought to be stapled to the forehead of every web designer and programmer (and client!) in the world.
I can only vouch for this. Until I had to get glasses, I didn't mind; I have been zooming in ever since.

16px is a minimum, IMO.

I'm glad I'm not the only one who generally surfs the web at 150% magnification.

I also have decent eye-sight and am 29, so I don't think it's an age related thing.

Anecdotally, I find reading large text to be a lot more comfortable. I don't have to strain my eyes to read.

I'm in the same boat.

This is a great post, at 100% zoom it was perfectly readable. HN by contrast gets zoomed habitually to around 150% on my desktop.

Same here, 150%. I can't wait for an oculus rift or similar for reading text - text size won't be constrained by screen size anymore.
The vast majority of sites are designed for horrible low resolution devices - 1366x768 or 1024x768.

When viewed on the screens most people here are using, they're unreadable.

I find that 200% zoom works for Full HD screens (and is acceptable, if a little big, at 1680x1050)

Interesting. I suppose that this makes some sense, but when I have a 27" 1920x1080 screen three feet from my face, it's still absurd.

I wish web designers would learn a thing or two from the writers of LaTeX.

It's this. If you look at the stats on the % of visitors to most web sites, 1280x1024 or 1024x768 (and the non-retina Macbook equivalent) remain the dominant approximate screen sizes, so developers optimize for them on the assumption that things will work ok for folks with bigger screens.

I can remember when we used to optimize for 800x600.

I usually keep my resolution low. 1366x768 is fine for everything I do -- including movies, gaming, and development.

The main reason I do this is to make the default font sizes for programs, websites, and OS's more readable without visual glitches or breaking layouts, as zooming has an unfortunate tendency to do.

I need "Zoom: 175%" when reading Hacker News comments. My eye-sight is great, but reading larger fonts is much easier.
Same here. 1080p on a 15" laptop. I can't read it (at least without getting profoundly annoyed) if it's anything less than 130%
Thank you for saying this. For years I have been slightly ashamed to be browsing at 150%. I occasionally get comments like "what's wrong with your CSS" when my friends are showing me their websites on my computer.
I like massive fonts. This blog's font is about the right size.

The other thing I don't like is Helvetica Neue in a very light weight, especially if it's grey on bright white.

Readability and others fix the problem, but it's weird that some designers get this so wrong.

(comment deleted)
At the beginning of my current gig I was a one-person web development shop inside a larger agency. The agency has a team of quite talented print designers who would often be tasked with providing designs for web projects. Every single time I got a design from one of them it would contain impossibly small lorem ipsum. I would make it bigger during implementation, often resulting in comments of me "messing up the design", or having the type look "goofily large".

One of the primary reasons for the small type, I learned, was that they were used to seeing type set on an 8.5"x11" page. If you open up a magazine and hold it as far away from your face as a monitor would be, you'll see some pretty small type. They just wanted the web to work the same way.

I'm sick of 6 words per line when I'm using my phone to view websites.
The design for your phone would have different sizes from the design that is used for the web. After all, the distance between your eyes and the device (monitor or phone) are different when each device is being used. That means the font sizes need to change. The recommendation is 50 to 75 character per line (as mentioned in a previous comment here).
50 to 75 characters would be great but most "mobile optimised" websites don't allow for that. The website linked to in the original post is around 20 per line and takes a paragraph of text and stretches it out over several pages of my phones display.
No doubt, and that's a failure of the design, not of the theory of the font size. Don't use bad execution as evidence of a bad idea.
I've been convinced that I shouldn't use small font sizes.

Now, re-reading and looking around the further reading section, I can't find the answer to the question this immediately brings up: what font sizes aren't too small?

edit: vbl posted a link that suggests 16px is a good minimum.

I posted this further up, but the ideal font size for main body text is supposedly between 50-75 characters per line. The first reference I found was this one: http://baymard.com/blog/line-length-readability but this is a very common rule of thumb
the ideal font size for main body text is supposedly between 50-75 characters per line [...] this is a very common rule of thumb

There are lots of common “rules of thumb” in typography and graphic design. Unfortunately, a disturbing number of them turn out to be little better than old wives’ tales, with precious little scientific evidence to support them even as well-meaning people repeat them as some sort of objective, absolute standard. As far as I can tell, having looked through a fair bit of research on this over the years, this is one of the most common examples of that phenomenon.

Reasonable studies have come to very different conclusions about which line lengths offer good readability, recommending anywhere from 40 characters or even fewer right up to 100 characters or more. The thing is, those studies usually consider a fairly small number of different line lengths while fixing other layout factors like margin size, text size, leading, and number of columns. However, these other typographical factors are not necessarily consistent from one study to the next, so the results are not directly comparable, nor are conclusions that different line lengths offered the best readability under the specific conditions of each particular study necessarily contradictory. One thing that does seem clear from the relatively few multivariate studies available is that line length is not an independent variable as far as measured readability is concerned. It interacts with those other factors in ways we don’t fully understand yet.

In short, it’s surprisingly unhelpful to propose rules of thumb like “2½ alphabets” or “60 characters” as optimal line lengths, without specifying any context. Those are probably safe choices, in that they have been found to offer good measured readability and to be subjectively pleasing to readers under quite a range of different conditions now. However, that does not mean that they are ideal or optimal and that setting text with a narrower or wider measure would be objectively worse. And if you’re dealing with an audience with more specialised needs, for example the very young or people who have reading difficulties, even those widely suggested rules might turn out to be a bad idea.

Another thing that is clear from the available empirical data is that measured readability is not even close to the same as perceived readability. Readers’ subjective preferences (what they found most comfortable to read) and self-reported performance (what they believe gave the best results in terms of accuracy of retention, reading speed or other objective criteria) may be quite different to their actual, measured performance. Now and then, studies even find a negative correlation: readers actually prefer settings that give measurably worse objective performance. However, it seems much more common that readers express a relatively strong subjective preference for (say) a certain range of line lengths in a study, even though their measured performance didn’t show any significant improvement for those lengths over others that were considered.

TL;DR: While typical guidelines like 60 characters-per-line aren’t absurd and in most conditions would be a reasonable choice, the evidence as a whole shows mixed results, and suggests that while readers may have quite strong subjective preferences, their objective performance doesn’t tend to vary a huge amount until you get to much longer or shorter lines. Describing these mid-length lines as “ideal” or “optimal” is therefore unwarranted.

Amusing irony to finish with: Many of the web-based sources I looked up again while writing this post have terrible line lengths and other typographic settings, blatantly contradicting their own advice. :-)

I use "Readability" in Chrome, "Reader" in Safari Mobile, and "Readability" on AlienBlue for reddit. But the best is when I also use the "Alex" voice on Mac OS to read the text aloud. That's how I read nowadays.

Small fonts on mobile devices are a curse.

Put me in the opposite camp: I'm young and nearsighted, which means my close vision is very good. I usually read HN on my iPhone at min zoom, and I find it really frustrating when mobile sites helpfully won't let me zoom out to read more than a paragraph at a time. (In fact, I found hitting ⌘- a few times made this post much more readable.)
Your complaint is really the same: designers are imposing their will over users, in a manner which ultimately negatively affects user experience.

I find myself frustrated in both directions: sites whose default font is too small (and isn't resizable), and those whose default fonts are too large, and non-resizable. To say nothing of color choices which negatively impact readability.

Counterpoint: On a 22", 1680x1050 screen, the text on that website is way too big to be comfortable to read.

I wonder how many comments here are from desktop machines, which ones are notebooks or tablets.

I'm on a desktop machine. Also using a 22-inch monitor at 1680x1050. I do not maximize my browser window (mybrowserinfo.com tells me my browser dimensions are currently 1112 x 945).

The font size in question looks great to me. I should add I often sit with my head as far as 24 inches away from the monitor.

Also way too big for me on 1920x1200 23" monitors. I think some of it is preference and comfort level, but I think it's a also less efficient to read oversize text unless one's eyesight is poor.
This sounds like a DPI issue though? If the DPI is set correctly, the same font in the same font size should look the same size on two different screens, no?
Some machines use 75 dpi, others use 96 (96? 92?) dpi.

It's hard to get font to be the same size on windows and os x.

On my 15" retina MBP at 1920x1200 it looks perfect. That said, most people run lower resolutions. I think it would be far too big at anything less than 1920x1200 or on a bigger display. A font size of 20px is too large for most users.
I don't personally find it too big to read, but I will go out on a limb and propose that if the main goal of your site is to provide text content to readers, don't set a font size at all.

Unfortunately I don't know of any way to get a mobile browser to display at a normal size. It seems that both Android and iPhone are configured to use microscopic text as default to guarantee a desktop-like layout.

Their default text size isn't that small, it's just that they render pages to a larger surface than then display by default, in order to avoid breaking old sites. This can be avoided by adding the appropriate meta tag to the site, but that has to be done by the developer.
The opposite of one man's "tiny-tiny" is another man's "10 lines per screen" in humongous "screw-you-,-i-have-a-retina-mbp" designer typeface.

The solution is there, but it's not working. The CSS 'pt' size measure was supposed to address this exact issue, but in reality it doesn't. "Reality" being the most of Windows world that still runs at 96 DPI (dots-per-inch), regardless of whether one has 1080 scan lines on 12" display or 768 - on 20" one. What's twice as unfortunate is that Windows added mainstream support for higher DPIs starting with Vista. So, in theory, if I were to get a high-res laptop, it'd come with a manufacturer's .inf that sets my DPI to 120 if my display is physically small. In practice - na-da. I've seen this done only on selected ThinkPads, but that's it.

The real solution here is to base all font size calculations off the default font in the user's browser (which the user can change). If everyone did this, you would be able to enjoy a consistent font size across most sites. It will probably never happen though.

I just wish all sites used something like the CSS3 rem (root ems) unit so we could at least make it a bit easier for the user to have a say in the font size the site uses.

Ohh, thank you so much. I knew of the upcoming viewport-dimension-relative units, but I never heard of rem.. I already use em wherever I can, but that sometimes can get a bit hairy when nesting lots of things, so I often wished something like this existed without realizing it does. Thanks again!