How Typography Affects Readers | Hacker News Reader

How Typography Affects Readers

adpushup.com

45 pointsankitoberoi22 comments

I did not finish that article precisely because of their fonts.

When I first opened the page, the text was displayed in a "Times" font, which looked very crisp but surprisingly bland, considering the topic of the text. I have NoScript running and I realized it was probably blocking the script that downloads a custom font. (In this case, "Karla" from googleapis.) Digging deeper, their css rules don't specify a fallback font (the css file does, but it is overwritten by an inline style), so Firefox defaulted to the 'Times' font.

Ok, I thought, let me see that font-magic they are talking about in action, and I enabled scripts on adpushup.com. The result was... suboptimal. The letter spacing was huge and the fonts were extremely blurry.

I probably can't blame them for the fact the font displayed blurry. (A Firefox problem? Maybe Windows? I don't know what is going on in the background.) But I can, and I do, blame them for not being aware of the blurriness problem (Windows XP + Firefox can't be such a rare combination) and for not specifying a proper fallback font.

Well, those two things bugged me enough to stop reading.

Hi,

Thanks for pointing this out. XP+FF is indeed important, it is about 4% of our traffic. The CSS fallback is being fixed.

The font looks same on 7 & XP both: http://www.browserstack.com/screenshots/21265f29764195b7a298... http://www.browserstack.com/screenshots/a81e07f3288687d3fc0f...

Would you be kind enough to upload a screenshot of the blurry font? :)

Sure! Here is what I see (with scripts enabled):

http://postimg.org/image/572wjz4rp/

It's similar to what browserstack shows (the wavy look of the top bar of the capital T in the headline, the "hat" on the capital O in the text), but in some ways it looks worse on my system, especially the bold face:

http://postimg.org/image/r4zddrjs5/

Note the jaggy lower part of the bold, lower case y, and how the bottom of the bold lower case e and the top of the bold lower case t are thinning out precariously..

Times, on the other hand, does not look blurry:

http://postimg.org/image/4cl9wjwql/

Maybe my eyes need recalibration, but personally I find times much easier to read, mostly due to its crispness.

It looks hideous on OS X 10.9 in Safari.

But the ideas are good and sound.

And chrome on 10.9 is just as bad. It's painful to read.

And Firefox on 10.9 as well. The font didn't seem to anti-alias well, making it painful to read.

Ironically, the font family "Karla" on that blog makes the text quite difficult to read. (http://www.google.com/fonts/specimen/Karla)

They might benefit from inspecting their own quotations more closely: "when it is a good design, the reader has to feel comfortable because the letter is both banal and beautiful." (Frutiger)

I don't agree with a lot of the explanations/guidelines this article gives.

An actually good article about guidelines for Typography: [The 100% Easy-2-Read Standard](http://ia.net/blog/100e2r/)

I'll say this much. The article you linked to is much, much easier on the eyes.

The New York Times ran a series of stories last year by Errol Morris that suggested that the use of certain fonts resulted in the reader being more likely to believe what was written. The articles reference other similar research; I found the whole thing fascinating.

Part One: http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-...

Part Two: http://opinionator.blogs.nytimes.com/2012/08/09/hear-all-ye-...

[EDIT: And of course, now that I dig into the article, I see that it references these Errol Morris articles, too.]

I've personally seen proper typesetting with Baskerville or Computer Modern using TeX changing "needs more work" draft essays into an "Excellent" mark without content changes. More so, just using paragraph indentation instead of spacing was enough at times.

Any article on typography that uses word shape as an actual model of word recognition instantly loses my attention. For better approaches, see http://www.microsoft.com/typography/ctfonts/wordrecognition....

Does anyone know if the laws that require tobacco companies, for instance, to place health warnings on cigarette boxes also specify the appearance of the label (e.g., font family or size). If not, this article seems to suggest that companies should seek out typography, such as comic sans, that would lessen the negative effects of such labels.

How do dyslexic fonts like OpenDyslexic[0], Eulexia[1], and AlphaSymbolic[2] fit into all of this talk on normative typesetting ? And the internal rift of Open Source latent to this discussion, with fonts like Dyslexie[3] ?

The underlying question here is the need to expose and enhance accessibility around typefaces and metanotational typefaces. I believe that we should not design to our demographic, because how do we truly know? Rather we should make it possible for our demographic, whoever it is, to preferrentially set typefaces to their cognitive and aesthetic needs, to shape the stage of reception.

I say this primarily for the fact that many designs I do come across in websites, once I apply a font like OpenDyslexic using browser extensions, for instance, those designs fail, become distorted, elements shift about, become hidden or obscured, etc.

Adding to that: what about color? Contrast? Do certain fonts work better on inverted or otherwise?

I want to ask: What if that Higgs boson article had been set in OpenDyslexic? I run a similar experiment on my own blog[4], where I set a font tailored for dyslexics as the primary font (with hooks to change contrast and to set AlphaSymbolic in the "sticky footer"): I receive similarly negative responses.

Does our industry even have the conceptual layout to meaningfully ask these types of questions, and does it have the economic and aesthetic infrastructure to initiate and sincerely act upon whatever answers and strategies we decide upon?

[0]: http://opendyslexic.org/

[1]: http://antijingoist.github.io/Eulexia/

[2]: http://antijingoist.github.io/AlphaSymbolic/

[3]: http://www.studiostudio.nl/

[4]: http://webjournal.nerdfiles.net/the-semantic-web/

All I can add is my partner is a dyslexia teacher and assessor, and we tested those fonts on a range of pupils when building her latest website. None aided our sample.

Dyslexia is a very broad definition, and I can imagine they could work for certain types of dyslexia but not others.

I'm curious to know the scope and concrete findings and anecdotal findings/reports of your tests.

What was the nature of the literature/content on the website? Longform? Marketing? Blurbs? Did you test for memory? Comprehension? Speed?

Aside from aiding, did the fonts hurt comprehension? Hurt readability?

There were no concrete findings - these were informal tests in a field where concrete findings are nigh-on impossible.

The website is a mix of marketing and longform, advertising dyslexia services. Often it's read by the parent of a dyslexic so there's two audiences to address. Of the dyslexics we tested with, all found the fonts hurt readability and they were seeing individual letters (instead of words) more than they were with a standard font (Source Sans Pro). The parents we also tested found the 'Dyslexic' fonts very hard to read. So for our small sample of children it didn't help, and in this situation wasn't worth pursuing.

Most of these children IIRC find a coloured overlay is all they need to read acceptably; colour and contrast is another thing I'd have liked to test but there's only so much you can subject children (who aren't your own) to!

Is it possible to determine what proportion of browsers actually accept the specified fonts and colours into which designers pour so much time and thought?

'Ignore fonts specified by websites' is one of the quickest usability configurations, particularly for people with impaired vision.

I'm not sure about the 'research' part of this article. That Twitter exploded when Higgs was announced in Comic Sans? So what? Its a hot button, and a flash-mob flaming on it is not much of a datapoint.

This Case Study of Higgs simply proves why selecting an appropriate font is important. This is followed by data of experiments done by Errol Morris.

It proves nothing - Comic Sans is a hot-button, a singularity. If they had used Ariel instead of Courier, would Twitter have exploded? No? It had nothing to do with the effectiveness of the font, it was just a nerd thing.

Exploded? No.

But that's what we've been trying to find with this article: How Typography affects users.

From the different researches cited in the articles (all backed with data), font selection did seem to make a difference. Maybe Little.

Reply on news.ycombinator.com