8 ms·

Stop Using Small Font Sizes

159 points by aranjedeath 14y ago

redegg 14y ago
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.
rurounijones 14y ago
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.)
- _ZeD_ 14y ago
  funnily, the article itself is an "offending site": http://tinypic.com/view.php?pic=1g14rd&s=6 http://tinypic.com/view.php?pic=1g14rd&s=6
  - aranjedeath 14y ago
    What sort of browser do you use that doesn't support anti-aliasing of fonts?
- bazzargh 14y ago
  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!
ibudiallo 14y ago
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
- aranjedeath 14y ago
  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.
georgemcbay 14y ago
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.
- martinced 14y ago
  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.
  - coldtea 14y ago
    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.
    - ciupicri 14y ago
      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 http://lcdtech.no-ip.info/en/tests/color-shift.htm [2] http://hardforum.com/showpost.php?p=1034585910&amp%3bpostcount=7%253C http://hardforum.com/showpost.php?p=1034585910&amp%3bpos... [3] http://www.tftcentral.co.uk/reviews/dell_u2412m.htm http://www.tftcentral.co.uk/reviews/dell_u2412m.htm
mtitus16 14y ago
This is literally a rehashing of this: http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-tiny-tiny-type http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-ti... from 3 weeks ago.
- aranjedeath 14y 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.
  - john_butts 14y ago
    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.
    - aranjedeath 14y ago
      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 :)
CharlesW 14y ago
Only if you stop using fully-justified text first.
- dgunn 14y ago
  What's wrong with justified text? I prefer reading justified text.
  - andyharl 14y ago
    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.
drivebyacct2 14y ago
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+-.
- joblessjunkie 14y ago
  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.
  - aranjedeath 14y ago
    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.
  - keeperofdakeys 14y ago
    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.
- Jam0864 14y ago
  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.
bradwestness 14y ago
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.
- pmb 14y ago
  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.
  - gurkendoktor 14y ago
    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).
  - bradwestness 14y ago
    Yeah using pt works too. The problem is that everyone uses 12px in their CSS rather than 12pt.
    - dchest 14y ago
      See http://news.ycombinator.com/item?id=5268526 http://news.ycombinator.com/item?id=5268526
  - Too 14y ago
    Not in CSS, 1pt is always x pixels regardless of how many DPI you have.
dgunn 14y ago
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.
- rhizome 14y ago
  And zoom does not function correctly on the default Android browser.
  - jay_kyburz 14y ago
    And if I pinch zoom in I can't see the whole line.
    - jsnell 14y ago
      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).
      - rhizome 14y ago
        For me and my Nexus 4, double-tap re-zooms to the width of the element tapped.
- Kerrick 14y ago
  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.
- lmm 14y ago
  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.
andyharl 14y ago
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.
crazygringo 14y ago
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.
- 001sky 14y ago
  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.
- aranjedeath 14y ago
  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.
  - crazygringo 14y ago
    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.
arxanas 14y ago
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.
jbondeson 14y ago
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.
tokenadult 14y ago
Some of this advice differs from the carefully thought out style advice in the HTML5 Boilerplate project, http://html5boilerplate.com/ 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.seomoz.org/blog/seo-of-responsive-web-design http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/responsive-web-design is the way to go.
gte910h 14y ago
In almost every case, the bad example was more readable to me.
bcoates 14y ago
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.
luser001 14y ago
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).
- mortehu 14y ago
  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 http://www.w3.org/TR/CSS21/syndata.html#length-units
  - luser001 14y ago
    Thanks! I didn't know that a CSS px wasn't the same as a screen pixel.
    - nathos 14y ago
      Also, on Retina displays, OS X browsers automatically double pixel dimensions. By default, something declared as 16px is actually rendered as 32px (but sharper).
- steveax 14y ago
  Points are mostly in the CSS spec for print media rather than screen. Use proportional units (em, keyword, percentage) or px for screen.
simcop2387 14y ago
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.
- ANTSANTS 14y ago
  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...
  - DanBC 14y ago
    Chrome's version is confusing and applies oddly. (IME, YMMV, etc.)
- aw3c2 14y ago
  Opera has that too.
keeperofdakeys 14y ago
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.
diiiimaaaa 14y ago
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/100e2r http://informationarchitects.net/blog/responsive-typography-the-basics/ http://informationarchitects.net/blog/responsive-typography-...
- aranjedeath 14y ago
  Thanks!
jwr 14y ago
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.
- signed0 14y ago
  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?
  - nwh 14y ago
    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.
cynwoody 14y ago
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!).
- lloeki 14y ago
  > 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.
fallenhitokiri 14y ago
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.
shurcooL 14y ago
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.
Legion 14y ago
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.
Kiro 14y ago
Why em in one case and px in another? Why em at all?
tzaman 14y ago
What about applications? (I'm referring to short text or even words, like form labels, errors, hints...)
Suncho 14y ago
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.
raingrove 14y ago
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.
- aranjedeath 14y ago
  There appears to be a bug! http://code.google.com/p/chromium/issues/detail?id=172281 http://code.google.com/p/chromium/issues/detail?id=172281
  - raingrove 14y ago
    removing -webkit-font-smoothing: antialiased in the CSS seems to restore subpixel anti-alising.
    - aranjedeath 14y ago
      Thanks, I'll get rid of that.
dredmorbius 14y ago
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/ 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.
motters 14y ago
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.
znowi 14y ago
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?
HiFish 14y ago
german HN pendant http://hackerbruecke.io/ http://hackerbruecke.io/ tried to fix it
nXqd 14y ago
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 :)
smoyer 14y ago
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!
pinouchon 14y ago
And stop vertical videos!
alecperkins 14y ago
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.
kadavy 14y ago
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/ http://kadavy.net/blog/posts/reverse-engineering-redesign/
jqrd 14y ago
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;

159 points by aranjedeath 14y ago

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.

rurounijones 14y ago

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

_ZeD_ 14y ago
funnily, the article itself is an "offending site": http://tinypic.com/view.php?pic=1g14rd&s=6 http://tinypic.com/view.php?pic=1g14rd&s=6
- aranjedeath 14y ago
  What sort of browser do you use that doesn't support anti-aliasing of fonts?
bazzargh 14y ago
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!

ibudiallo 14y ago

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

aranjedeath 14y ago
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.

georgemcbay 14y ago

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.

martinced 14y ago
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.
- coldtea 14y ago
  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.
  - ciupicri 14y ago
    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 http://lcdtech.no-ip.info/en/tests/color-shift.htm [2] http://hardforum.com/showpost.php?p=1034585910&amp%3bpostcount=7%253C http://hardforum.com/showpost.php?p=1034585910&amp%3bpos... [3] http://www.tftcentral.co.uk/reviews/dell_u2412m.htm http://www.tftcentral.co.uk/reviews/dell_u2412m.htm

mtitus16 14y ago

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

aranjedeath 14y 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.
- john_butts 14y ago
  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.
  - aranjedeath 14y ago
    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 :)

CharlesW 14y ago

Only if you stop using fully-justified text first.

dgunn 14y ago
What's wrong with justified text? I prefer reading justified text.
- andyharl 14y ago
  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.

drivebyacct2 14y ago

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

joblessjunkie 14y ago
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.
- aranjedeath 14y ago
  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.
- keeperofdakeys 14y ago
  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.
Jam0864 14y ago
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.

bradwestness 14y ago

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.

pmb 14y ago
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.
- gurkendoktor 14y ago
  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).
- bradwestness 14y ago
  Yeah using pt works too. The problem is that everyone uses 12px in their CSS rather than 12pt.
  - dchest 14y ago
    See http://news.ycombinator.com/item?id=5268526 http://news.ycombinator.com/item?id=5268526
- Too 14y ago
  Not in CSS, 1pt is always x pixels regardless of how many DPI you have.

dgunn 14y ago

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.

rhizome 14y ago
And zoom does not function correctly on the default Android browser.
- jay_kyburz 14y ago
  And if I pinch zoom in I can't see the whole line.
  - jsnell 14y ago
    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).
    - rhizome 14y ago
      For me and my Nexus 4, double-tap re-zooms to the width of the element tapped.
Kerrick 14y ago
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.
lmm 14y ago
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.

andyharl 14y ago

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.

crazygringo 14y ago

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.

001sky 14y ago
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.
aranjedeath 14y ago
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.
- crazygringo 14y ago
  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.

arxanas 14y ago

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.

jbondeson 14y ago

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.

tokenadult 14y ago

Some of this advice differs from the carefully thought out style advice in the HTML5 Boilerplate project, http://html5boilerplate.com/ 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.seomoz.org/blog/seo-of-responsive-web-design http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/responsive-web-design is the way to go.

gte910h 14y ago

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

bcoates 14y ago

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.

luser001 14y ago

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

mortehu 14y ago
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 http://www.w3.org/TR/CSS21/syndata.html#length-units
- luser001 14y ago
  Thanks! I didn't know that a CSS px wasn't the same as a screen pixel.
  - nathos 14y ago
    Also, on Retina displays, OS X browsers automatically double pixel dimensions. By default, something declared as 16px is actually rendered as 32px (but sharper).
steveax 14y ago
Points are mostly in the CSS spec for print media rather than screen. Use proportional units (em, keyword, percentage) or px for screen.

simcop2387 14y ago

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.

ANTSANTS 14y ago
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...
- DanBC 14y ago
  Chrome's version is confusing and applies oddly. (IME, YMMV, etc.)
aw3c2 14y ago
Opera has that too.

keeperofdakeys 14y ago

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.

diiiimaaaa 14y ago

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/100e2r http://informationarchitects.net/blog/responsive-typography-the-basics/ http://informationarchitects.net/blog/responsive-typography-...

aranjedeath 14y ago
Thanks!

jwr 14y ago

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.

signed0 14y ago
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?
- nwh 14y ago
  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.

cynwoody 14y ago

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

lloeki 14y ago
> 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.

fallenhitokiri 14y ago

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.

shurcooL 14y ago

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.

Legion 14y ago

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.

Kiro 14y ago

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

tzaman 14y ago

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

Suncho 14y ago

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.

raingrove 14y ago

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.

aranjedeath 14y ago
There appears to be a bug! http://code.google.com/p/chromium/issues/detail?id=172281 http://code.google.com/p/chromium/issues/detail?id=172281
- raingrove 14y ago
  removing -webkit-font-smoothing: antialiased in the CSS seems to restore subpixel anti-alising.
  - aranjedeath 14y ago
    Thanks, I'll get rid of that.

dredmorbius 14y ago

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

motters 14y ago

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.

znowi 14y ago

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?

HiFish 14y ago

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

nXqd 14y ago

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

smoyer 14y ago

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!

pinouchon 14y ago

And stop vertical videos!

alecperkins 14y ago

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.

kadavy 14y ago

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/ http://kadavy.net/blog/posts/reverse-engineering-redesign/

jqrd 14y ago

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;