Hacker News new | ask | show | jobs
by nrbafna 4787 days ago
On a unrelated note.

Adding a few lines of css (setting body width, font-size to 16, line-height to 1.4, Georgia for font and larger font size for headings ) makes for a decent reading experience.

http://imgur.com/a/KtaEC/

2 comments

My recommendations, for a more pleasurable reading experience:

    body {
      width: 70%;
      font-size: 20px;
      margin: auto;
      font-family: sans-serif;
      line-height: 30px;
    }
Pedantic nitpick incoming

Sans-serifs are generally harder to read. Note, for example, how virtually all books are set in serifs. The primary reason sans-serifs are widely used in computers is the lack of decent display resolution required to display the actual serifs. So if you are using a larger font size to read something off the screen, there is no reason not to use a serifed typeface.

This might very well be a myth. See e.g. http://alexpoole.info/blog/which-are-more-legible-serif-or-s....
Everything that has to do with the perception might very well be a myth :)

However, in typography and type designer circles it is commonly accepted that Serifs are superior for consuming large quantities of text. Also in layman terms - serifs make the glyphs more distinct and easier to recognize at a glance, in contrast to the sans where there are several glyph pairs that look virtually the same.

"Commonly accepted" isn't worth much when it conflicts with actual science. Lots of things commonly accepted are simply incorrect.
Please don't pull a Wikipedia on me here. As an old physicist joke goes -

  Experimental physicist comes to a theoretical physicist office,
  bring a graph from a recent experiment and asks for a help with
  interpreting the results. 

  - Well, it's all rather obvious. Here's a peak, here's a dip,
    because of this, that and third.

  - Hold it, hold it... you are looking at it upside down.

  - Ah, right, right. *Rotates the graph*. Oh, it's now even more 
    obvious than before.
In other words, the "actual science" you are referring to frequently ends up to be nothing more than a matter of interpretation and a subject to all sorts of biases. Especially when it concerns something as unquantifiable as "comfort of reading". Just pick up a couple of fiction books, one set in serif and another in sans-serif, go through a pageful of text and see for yourself.
My university teacher who was a fan of LaTex, taught web development and actually had a job outside the uni, told us that Serif fonts look bad and unreadable on computer displays. He said the reason is resolution. Books don't have DPI limits, and you can have a serif font look good to the tiniest detail.
I think `width: 70%;` is a bad idea. If you have a very wide screen, 70% of it is too much and on a mobile device you don't want to waste 30%.
It's a catch-22 pretty much. If you set it as pixels, it can be either too narrow (600 px on a full hd in full screen, though lines that are too wide/long suck too) or too wide (which leads to scroll bars).

Setting it as a percentage will obviously always make it look the same since it scales. However, a percentage on a huge screen usually makes it too wide to read lines comfortably.

You pretty much have to pick your poison, though IMO about 600 px is the maximum width for a line before it's horrible to read on a full hd screen.

This is a solved problem.

   max-width: 600px;
This stops your text from being excessively wide, but also doesn't prevent smaller screens from making it more narrow.
Thats a pretty good way, but it's not dpi independent.
That's partially true. A CSS pixel isn't necessarily the same as a screen pixel. A Mac with a retina display set to "native" resolution, for example, should actually make that 1200 pixels wide (max). In general, though, I think most browsers will treat a css pixel as a screen pixel.

Of course you could also use points or ems if you prefer.

Or just resize your window and increase the font size.
It does work as a one time thing.

But, having an extension like Stylebot installed and using a tiny custom CSS does offer an advantage - the CSS applies across the domain and takes effect every time the page is loaded.

For example, see this gallery - http://imgur.com/a/MxFtD

Yes, though it's slightly more complex than that: if you've got multiple tabs open, you'll probably want to resize the window again to view the other tabs, and (at least in Chrome) if you open a new tab or window it'll also have that increased font-size which you'll have to decrease again.