4 ms·

How Typography Affects Readers

45 points by ankitoberoi 13y ago

JeroenRansijn 13y ago
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/ http://ia.net/blog/100e2r/)
- Pitarou 13y ago
  I'll say this much. The article you linked to is much, much easier on the eyes.
dingaling 13y ago
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.
thenerdfiles 13y ago
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/ http://opendyslexic.org/ [1]: http://antijingoist.github.io/Eulexia/ http://antijingoist.github.io/Eulexia/ [2]: http://antijingoist.github.io/AlphaSymbolic/ http://antijingoist.github.io/AlphaSymbolic/ [3]: http://www.studiostudio.nl/ http://www.studiostudio.nl/ [4]: http://webjournal.nerdfiles.net/the-semantic-web/ http://webjournal.nerdfiles.net/the-semantic-web/
- porker 13y ago
  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.
  - thenerdfiles 13y ago
    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?
    - porker 13y ago
      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!
exizt88 13y ago
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.aspx http://www.microsoft.com/typography/ctfonts/wordrecognition....
maho 13y ago
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.
- ankitoberoi 13y ago
  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/21265f29764195b7a2985887cf62e7daebdf6f27 http://www.browserstack.com/screenshots/21265f29764195b7a298... http://www.browserstack.com/screenshots/a81e07f3288687d3fc0f5344c554a9ff3686c911 http://www.browserstack.com/screenshots/a81e07f3288687d3fc0f... Would you be kind enough to upload a screenshot of the blurry font? :)
  - maho 13y ago
    Sure! Here is what I see (with scripts enabled): http://postimg.org/image/572wjz4rp/ 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/ 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/ http://postimg.org/image/4cl9wjwql/ Maybe my eyes need recalibration, but personally I find times much easier to read, mostly due to its crispness.
RamiK 13y ago
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.
JoeAltmaier 13y ago
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.
- ankitoberoi 13y ago
  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.
  - JoeAltmaier 13y ago
    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.
    - ankitoberoi 13y ago
      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.
kszx 13y ago
Ironically, the font family "Karla" on that blog makes the text quite difficult to read. (http://www.google.com/fonts/specimen/Karla 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)
jakewalker 13y ago
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-people-hearken-o-earth/ http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-... Part Two: http://opinionator.blogs.nytimes.com/2012/08/09/hear-all-ye-people-hearken-o-earth-part-2/ 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.]
cpsempek 13y ago
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.

45 points by ankitoberoi 13y ago

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/ http://ia.net/blog/100e2r/)

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

dingaling 13y ago

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.

thenerdfiles 13y ago

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/ http://opendyslexic.org/ [1]: http://antijingoist.github.io/Eulexia/ http://antijingoist.github.io/Eulexia/ [2]: http://antijingoist.github.io/AlphaSymbolic/ http://antijingoist.github.io/AlphaSymbolic/ [3]: http://www.studiostudio.nl/ http://www.studiostudio.nl/ [4]: http://webjournal.nerdfiles.net/the-semantic-web/ http://webjournal.nerdfiles.net/the-semantic-web/

porker 13y ago
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.
- thenerdfiles 13y ago
  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?
  - porker 13y ago
    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!

exizt88 13y ago

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.aspx http://www.microsoft.com/typography/ctfonts/wordrecognition....

maho 13y ago

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.

ankitoberoi 13y ago
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/21265f29764195b7a2985887cf62e7daebdf6f27 http://www.browserstack.com/screenshots/21265f29764195b7a298... http://www.browserstack.com/screenshots/a81e07f3288687d3fc0f5344c554a9ff3686c911 http://www.browserstack.com/screenshots/a81e07f3288687d3fc0f... Would you be kind enough to upload a screenshot of the blurry font? :)
- maho 13y ago
  Sure! Here is what I see (with scripts enabled): http://postimg.org/image/572wjz4rp/ 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/ 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/ http://postimg.org/image/4cl9wjwql/ Maybe my eyes need recalibration, but personally I find times much easier to read, mostly due to its crispness.

RamiK 13y ago

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.

JoeAltmaier 13y ago

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.

ankitoberoi 13y ago
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.
- JoeAltmaier 13y ago
  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.
  - ankitoberoi 13y ago
    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.

kszx 13y ago

Ironically, the font family "Karla" on that blog makes the text quite difficult to read. (http://www.google.com/fonts/specimen/Karla 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)

jakewalker 13y ago

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-people-hearken-o-earth/ http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-... Part Two: http://opinionator.blogs.nytimes.com/2012/08/09/hear-all-ye-people-hearken-o-earth-part-2/ 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.]

cpsempek 13y ago

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.