Stop Using Small Font Sizes | Hacker News Reader

Stop Using Small Font Sizes

hn.explodie.org

159 pointsaranjedeath121 comments

I don't mind small font sizes as long as you don't do anything to break zoom in the browser.

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.

Strong point you're making here. Pantone-calibrated monitors only make sense when you'll be doing actual printing.

A webdesigner using Pantone shades for a website is just being a delusional fool.

With the quality of the monitors nowadays, and standard profiles, it's not that far off. We're not in the nineties, monitor technology wise.

Actually, I've heard people saying that CRT screens were better than LCD when it came to colors. A couple of problems that LCD monitors might have:

- low viewing angle

- color shifting if they're using a TN or MVA/PVA panel [1]

- loss of dark details for MVA/PVA panels [2]

- 6 bits per color channel like the pretty recent Dell U2412M monitor for example [3]

Sure if you're using a good (and expensive) monitor like Dell U2410 (comes precalibrated) or HP LP2475w you won't have these problems, but not everyone has them. Let's also not forget laptops which have crappy displays most of the time.

[1] http://lcdtech.no-ip.info/en/tests/color-shift.htm

[2] http://hardforum.com/showpost.php?p=1034585910&amp%3bpos...

[3] http://www.tftcentral.co.uk/reviews/dell_u2412m.htm

A given CRT would be more consistent from different angles, but, having been there and tuned color on both CRTs and LCDs, the latter tend to be far more consistent between different displays. Also over time.

There are still vendor differences, and Mac vs. Windows color temperature differs as well.

> Mac vs. Windows color temperature differs as well.

And what's the thing that makes something dark on Windows become really dark on a Mac? Is that gamma?

Yes, Gamma.

Though that has changed 2 OS versions ago -- new Macs come with the same gamma as PCs.

I agree there are concerns with readability at certain LCD viewing angles. I often test my projects on a range of "run of the mill" monitors and more often than not I find that the contrast is horrid (at any angle) although it looks perfect on my setup. Thus, I usually increase styling contrast more than what I feel is necessary, in order to ensure an acceptable experience for all users.

I assume you live in Europe, the USA or maybe Canada. In much of the world, people are still using CRTs or ten-year-old LCDs in large amounts.

I currently live in SE Asia. And everybody is using LCDs.

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?

Idea: a browser feature (plugin) just like zoom, only that would up the contrast on sites (or decrease, too).

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.

There's a Chrome extension that does something like that: https://chrome.google.com/webstore/detail/high-contrast/djcf...

I've resorted to using "Change Colors" (https://chrome.google.com/webstore/detail/change-colors/jbmk...) - which has the advantage of allowing me to specify my own fonts too.

It doesn't always work.

I also use Readability.

I haven't seen anything that breaks zoom in the browser (do you have an example?) but many of the responsive-type sites break the pinch zooming on mobile which is extremely annoying, especially if they have images that hang off the viewable area of the screen.

One workaround: Use 'zap colors' bookmarklet found at https://www.squarefree.com/bookmarklets/zap.html. I got this link from some other HN comments.

The first thing I do on a new browser is to drag the 'zap colors' bookmarklet to the bookmarks toolbar.

+1. Previously on HN: http://contrastrebellion.com/

While agree that low-contrast is a problem, it's rather uncommon still except on web designer's sites (ironically enough). We may read a lot of them, but overall they're a drop in the bucket. The web has categorically low font size however, so the font size really is the bigger fish.

I agree that low contrast sucks.

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.

> expecting the average user to know that they can zoom

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.

Maybe on tablets and smart phones most people know they can zoom.

I strongly believe, but have nothing to support it, that most people don't know they can zoom their browsers.

Average desktop user does not know how to zoom. I have done hundreds of usability tests and user observation in my time - the number of folk who know how to zoom text is vanishingly small.

Well, thanks for the depressing truth. I'll have to adjust my assumptions. It's turned into a learning experience.

For a long time browsers shipped with basically broken zoom functionality. You could zoom, but it would break the page layout completely, make menu links disappear and images look ugly. It wasn't until WebKit browsers like Chrome came around that zooming to undo designers micro font sizes became usable in practice. There are still lots of sites around that breaks when zoomed in for one reason (flash) or another.

No designer would really like to design for or see their designs printed on low quality paper, and I think the same goes for the web.

I'm sure that design looks great on your Pantone-calibrated monitor,

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.

It's great to see this on HN where there are literally fonts as low as 7pt being used...

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.

And zoom does not function correctly on the default Android browser.

And if I pinch zoom in I can't see the whole line.

First do a pinch zoom, then double-tap to make the text reflow using the new size.

(Unfortunately not in Chrome for Android, since it's too cool for usability. Should work on anything using Android's built-in webkit).

For me and my Nexus 4, double-tap re-zooms to the width of the element tapped.

Exactly. Zoom is there, so set a sane default like 14-18px, and allow those that want to see more at a smaller size to zoom out, don't make the majority zoom in.

Experimentally I just tried ctrl--. HN looks great, now I can read even more than before.

Put the default at a happy medium. That probably doesn't mean optimized for 24" displays.

HN uses ridiculously small fonts.

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.

I hadn't noticed that the font is so small here; I've set the minimum text size in all my browsers to something reasonable, which works fine in Webkit and Firefox, so that I don't get eye strain reading Wikipedia's ridiculously small text.

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.

On the other hand, don't use font sizes that are too big (I've noticed that on a number of blogs and startup sites recently).

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.

How wide is your screen (in px)? Because the max width of my layout is around the old 760px standard. You should be able to see everything (even if, as you say, it's a bit too large).

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.

Not width I'm talking about (that's fine), it's the height.

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.

I'll take that into consideration, thanks for the feedback :)

You can use the golden ratio to find an "optimal" value for the ratio between line height, line width and font size: http://www.pearsonified.com/2011/12/golden-ratio-typography.... http://www.pearsonified.com/typography/

But of course the line height should be in relative units, not in px: http://webtypography.net/rhythm_and_proportion/vertical_moti...

Fretting over actual pixels is counter to trying to stay display-independent, as a web site ought to. The actual thing to worry about here is apparent DPI. A TV at 1080p viewed from ten feet away needs much larger text than a monitor at 1080p viewed from two feet away, and the variance in cell phone resolutions is even more drastic.

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

Agreed about line height - I usually go for 1.3em. 1.5 looks disjointed to me, feeling almost like each line is its own sentence or bullet point.

It depends on the font and the font size. 16pt Georgia looks great at 1.5em line-height, but 16pt Helvetica looks better at 1.3em.

That style is most friendly to tablets. The next page is just a thumb-swipe away.

Agree with these points. Too large text and "double-spaced" etc. can also look like garbage. I find I can read HN very legibly though. One of the reliably better presentations of text, IMHO. Rather than tone down the blacks, there is a warm-coloured off-white background, etc to diffuse the contrast harshness.

This blog is calling for all sites to not set a font size, and then adjust everything relative to the base.

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

"Zoom text only" works in Firefox (at least under Windows). Tick "View > Zoom > Zoom Text Only". AFAIK Firefox is the only browser that supports this. Then any zooming will be text-only zooming.

The line height recommended by classic typography books is 130-150% of line height, depending on the typeface and personal preference. I've also read web typography tutorials giving the same recommendation.

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.

I'd prefer seeing fonts specified as an offset from the browser's standard display format, and in ems rather than pixels or points. Body text must be at the user-specified size.

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.

12pt Times New Roman is the standard for publishing, so that's become the go-to size for a lot of websites. It was plenty big on 800x600 displays, but I agree that it's generally too small for today's resolutions.

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.

1pt is a unit of length. One point is 1/72 of an inch. It should be the same height now that it ever was, even on old monitors.

My 24" screen is probably further from my face than my 15" screen used to be (not least because the 15" screen almost completely covered my desk by itself).

Yeah using pt works too. The problem is that everyone uses 12px in their CSS rather than 12pt.

See http://news.ycombinator.com/item?id=5268526

Not in CSS, 1pt is always x pixels regardless of how many DPI you have.

Nope, it's way more complicated than that. Device pixels, CSS pixels, a pixel is not a pixel. PPK on the subject:

http://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-p...

Points are a terrible unit for specifying font sizes for the screen. Use px or proportional units (em, percentages, etc.). Points are for print, not screen.

Readability is useful, though it's not painless to use on most websites.

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.

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

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.

The idea that small font sizes are acceptable because “users can zoom” is fucking ridiculous, and I am extremely disappointed to see it suggested here. That is absolutely the wrong attitude. If a user has to go out of their way to use your interface, you're doing it wrong. No question. Interfaces should bend over backward for their users, not the other way around. Yes, you can't satisfy every edge case, but the default attitude must not be “well, users can just use this workaround”. That thinking is why we have crappy interfaces. If that's your approach for building interfaces, please stop building interfaces, for the sake of the user.

While we're complaining, don't open sites in a new tab just for the hell of it, especially when they're intended to be something you visit then return to. I know where the middle button is.

This is one of the reasons that I can't leave firefox. It's got a really nice feature in the Advanced fonts & colors configuration that lets you set a minimum font size. These days I keep it set to 12pt so that sites can't start putting 2-3pt fonts on there.

Chromium has this feature as well.

I do miss Firefox's ability to set a different font for pages written in different languages though, if only for viewing silly SJIS art...

Chrome's version is confusing and applies oddly. (IME, YMMV, etc.)

Opera has that too.

If you use an absolute font size and get it right, fine. If not, I won't read your site. I'm too lazy to use ⌘-+. Sorry.

(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!).

> Just because my screen is 2560px wide doesn't mean I want to use it all for your site

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.

Also, if you break zooming on my iOS devices, I won't bother to read your website. I find this an exceptionally stupid thing to do.

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.

I don't have an IOS device. What do you mean by broken? Does the font size stay constant while the page elements get bigger, or does zooming not work at all?

Zooming just does nothing. It's meant for web apps that would be inconvenienced by accidental zooming, but developers seem to insist on enabling on everything.

TL;DR: use vh/vw CSS units in your bookmarklets.

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 recommend to check these two articles by Oliver Reichenstein about this topic, one of them he wrote about 7 years ago

http://informationarchitects.net/blog/100e2r

http://informationarchitects.net/blog/responsive-typography-...

Thanks!

I agree that there can be problematic sites with too small fonts, a nearly non existing line height or grey on white background. But to be honest I stopped caring.

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.

Some of this advice differs from the carefully thought out style advice in the HTML5 Boilerplate project,

http://html5boilerplate.com/

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

Only if you stop using fully-justified text first.

What's wrong with justified text? I prefer reading justified text.

Justified text is fine in printed material when a certain amount of control can be exercised to make sure that terrible things don't happen.

Browsers are horrible at justifying text.

huh, initially I thought "It is not THAT big of a problem" but after reading his article (easily) then trying to read an article in some of his example offenders sites...I can see his point.

Consider my eyes opened... (and not squinting.)

funnily, the article itself is an "offending site": http://tinypic.com/view.php?pic=1g14rd&s=6

What sort of browser do you use that doesn't support anti-aliasing of fonts?

I clicked on the Atlantic example and thought 'but that looks the same size as his text' for a moment, before I realised the browser had remembered my zoom level for the Atlantic!

Quite otherwise, I dislike the trend of large font sizes with huge line heights. But is it really an issue today when you can easily zoom in or out to your preferable size on practically any browser/device?

I noticed that if I zoom in, then there is no margin defined on the sides. This makes it quite hard to read both when zoomed in, or it's in a small browser window. Defining a minimum margin would fix this.

It's a personal preference, not a general direction.

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.

You are right simply changing the font size and line height makes a big difference. I always wondered why my fonts where not feeling right. I went with so many different fonts but was still not satisfied . My solution was to just go on the websites I like reading on and open inspector . Crazy how increasing the margin on your paragraphs can make a difference.

So yes I completely agree with you. However I think you should include before and after examples on your article to make it complete

Yeah. The basic thing I evaluate on most "news" sites is I dive in and set their font to 16 or 18px and 1.5em line height. I even leave their fonts in tact, most of the time. It's an instantaneous readability increase.

Thanks for the suggestion, I'll prepare a few side-by-sides.

I found the Atlantic more readable at the smaller type than the larger type. Perhaps it's because it's serif, as opposed to the sans-serif in the other two examples.

Everyone is talking about the font size and how zooming can fix small fonts.

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.

I'm now starting to understand why what I consider to be obscenely large text has been proliferating through the web in recent years. My assumption has been that websites should use 12pt sans-serif fonts for standard content. Maybe my assumptions need to be revised. While it's annoying to me to see websites with text at 16pt, maybe that's what people want these days and I'll just have to suck it up and zoom out.

I redesigned my blog recently[1] and purposely made the type slightly bigger than intuitively felt comfortable. The funny thing is, plenty of people complain about it being too big, but nobody complained when it was way too small.

[1] http://kadavy.net/blog/posts/reverse-engineering-redesign/

Sub-pixel anti-aliasing doesn't seem to work on your site. I find that really annoying. I am using Google Chrome 25 on OS X 10.8.2.

There appears to be a bug!

http://code.google.com/p/chromium/issues/detail?id=172281

removing -webkit-font-smoothing: antialiased in the CSS seems to restore subpixel anti-alising.

Thanks, I'll get rid of that.

Hear, hear! :) I'm really happy to see this get to the front page.

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

From the CSS specification:

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

http://www.w3.org/TR/CSS21/syndata.html#length-units

Thanks! I didn't know that a CSS px wasn't the same as a screen pixel.

Also, on Retina displays, OS X browsers automatically double pixel dimensions.

By default, something declared as 16px is actually rendered as 32px (but sharper).

Points are mostly in the CSS spec for print media rather than screen. Use proportional units (em, keyword, percentage) or px for screen.

I agree that lots of type is set too small. Trying to create global rules for design when clearly something like font size needs to be addressed on a case by case basis depending on what font you are using is not a way to solve the issue.

People are lazy. They want to see how much text is there for them to read before having the slightest intent.

Making text bigger makes that decision more difficult. It also creates the delusion that there is more to read than there actually is.

This is literally a rehashing of this: http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-ti... from 3 weeks ago.

Thanks for pointing it out, I didn't see that article.

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.

Your site is barely readable and unzoomable on my phone where I would normally read a short blog post from an unknown but potentially interesting site. It's a very real glass house situation.

Perhaps it's a failing of your browser? I've set nothing to prevent you from zooming.

Also, what makes it unreadable? I'm aware that I still have some work to do on the stylesheet. I don't have a mobile device, a small-ish screen, or a retina display so my testing of devices is limited. Constructive feedback welcome :)

Couldn't agree more. It's a trend which I've also been noticing - i.e. tiny text or tiny light grey text on a white background. A few CTRL-+'s fix the problem, but I shouldn't really need to do that in the first place.

I totally agree but this kind of post makes no sense because they may not change to do anything about it. I personally use Clearly from Evernote for the old new site and the content is much easier and joyful to read :)

Hilariously, the site is nearly unreadable on my iPhone and two-thirds of the offending sites have larger font sizes on mobile safari.

Quick someone write a "Stop Using Mobile-Hostile Stylesheets" article.

Why em in one case and px in another? Why em at all?

The last month or so, I've taken the author's advice when they start an article with TL;DR. Thanks for saving me time!

What about applications? (I'm referring to short text or even words, like form labels, errors, hints...)

In almost every case, the bad example was more readable to me.

german HN pendant http://hackerbruecke.io/ tried to fix it

And stop vertical videos!

We just went through this like a week or two ago. Yeesh. Every browser I use has support for text resizing, default text sizes, or zoom levels. Android WebKit has double-tap and reflow.

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

The browsers I use most -- Safari on iPhone and iPad -- do not allow this. The only way to increase font size is to zoom the entire page, which often results in lines that are too wide for the screen.

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.

Yes unfortunately there is a set of meta tags you can use to set things like default and max zoom level for the page. If they're both at 1.0, you can't zoom at all. I'm not sure who thought that was a good idea to standardize, but if I meet them they will not be receiving a beer.

There is/was a bug pre iOS 6 where if you set a custom zoom level, some content may be chopped off when you change orientation. Naturally people wanted to stop this happening, so they disabled zooming. Unfortunately this effected every mobile platform.

This trend towards ridiculously large font sizes is becoming exceedingly annoying. There's been so many articles about it, and many pseudo-techy (trendy) blogs are adopting the large size. 16pt minimum? Really? There's a reason that so few sites and text editors use that by default. It may look great on your retina display but on 99% of screens out there it just makes your site look like it's aimed towards kids.

Thing is, most people don't know how to zoom a website on a desktop browser. On mobile browsers it's even worse and almost nobody will bother with the pinching and tapping and panning just to read some text, unless they _really_ have to.

If you are running a website, I encourage you to test different font sizes and measure the difference in engagement. You might be surprised.

Reply on news.ycombinator.com