7 ms·
The science behind how fonts make you feel
- taeric 13y agoSeeing one of the opening paragraphs say "The right font choice along with the absence of sidebars and popups makes everything feel easier and better to read" while being distracted by the bloody sidebar and ad on this site is rather interesting.
- aaronem 13y agoI had the same thought. It's not that they don't have a point, but one might reasonably wonder why they have a hard time taking their own advice.
- arrrg 13y agoIt appears that this website bought the rights to publish this article from the author. The original article appears to have been posted on the author’s blog quite some time ago: https://ooomf.com/blog/the-science-behind-fonts-and-how-they-make-you-feel/ https://ooomf.com/blog/the-science-behind-fonts-and-how-they... As such criticising contradictions between website design and what the article advocates makes even less sense than it usually does.
- taeric 13y agoWell, in that case it makes it even more amusing. They are paying to get the ability to post a story, but aren't even following it. It would be one thing if they posted some sort of rebuttal, but posting a "best practice" style thing in obvious violation of it is rather amusing. (Granted, it is not a criticism of the article.) I do think there is still more handwaving in the article than I'd care for. In very few cases was it a small change in font that made a difference. And, even then, it is still artistic in nature. Pretty things make people more trusting and happy. Some fonts are prettier than others.
- toggle 13y agoTo be fair, the three sites the author holds up as good examples (Medium, 37signals' blog, and Zen Habits) are not being run for a profit. Having to monetize a site does make it much harder to keep the layout clean -- ads are supposed to catch your eye, after all.
- mcherm 13y agoOh my... the presentation on the original blog is SO much better!
- coldpie 13y ago> 2. Pick a font size bigger than 12pt > However, as more reading shifts to digital and screen resolutions improve, the way we read content is changing. Many designers mention that 16pt font is the new 12pt font. A recent study has also shown that larger font sizes can elicit a stronger emotional connection. This is an interesting one. I have actually found myself frequently using the zoom-out feature of web browsers to make the font type smaller. I viewed the Kickstarter "2013 year" slideshow that's been making the rounds at about 20%, because I found the huge font they used extremely uncomfortable to read. I didn't zoom out this particular article, but playing with the zoom level, I find 80% works about best for me. I wonder why I feel so differently about this issue than current designers do.
- coldpie 13y agoThat aside, > By changing the font and increasing it’s size, our email content felt much better. bad grammar can ruin your article faster than any font choice :)
- roadster72 13y agoTBH, I stopped reading it because I really do not like the font used on the website.
- mkesper 13y agoSeconded, I don't like Serif fonts for non-book reading.
- roadster72 13y agoCorrect, that's what the popular opinion is too. Sans Serif fonts are easier to read on computer monitors because they are less visually complex.
- aaronem 13y agoHow does that follow? Serifs exist because they aid legibility. For what reason would that be true on paper, but false on a computer screen?
- nchlswu 13y agoWhile designers/bloggers tend to cite scientific studies advocating sans over serif (or the other way around depending on the context), no conclusive scientific evidence to prefer one or the other [1] However, the historical reason why sans-serif are generally recommended over a serif on a computer screen was a matter of practicality. The computer monitor simply couldn't replicate the tiny detail required by serifs. Higher resolution screens are becoming more common place, which is why you'll see more serifs in use online (IMO... correlation vs causation and all that). Somewhere along the line someone cited scientific articles to help justify this practice, but I'm convinced it became common place was really for practical reasons/aesthetics more than anything. [1] I haven't personally done a literature review, but this post is great in discussing the conclusiveness around the research (and readability vs legibility vs....) http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/ http://alexpoole.info/blog/which-are-more-legible-serif-or-s...
- noelwelsh 13y agoOne study referenced had 20 participants. Another had 25. These are really small studies! Their small size means there is a high chance that the effect doesn't actually hold. It's fine to say "some small studies suggest this is true", and then use it practice because doing a better study is beyond your means or simply not important. It's fine to do small studies, because it's a cheaper way to look for interesting effects that might then be investigated in more detail. But let's not pretend "science" has decided this issue beyond reasonable doubt. "Science", some amorphous entity quite disconnected from real science, has become a religion of sorts for some non-scientifically minded people. Put "science" is a post title and you'll fool many into thinking you speak from authority. I feel the author is well intentioned here, but has gone far beyond what the science suggests.
- wch 13y agoThose samples might be on the smaller side, but they're not "really small". And no, a small sample size doesn't mean that there's a high chance that there's a false positive. What it does mean is that there's a higher chance for a false negative - that is, the experiment fails to detect a real effect. That's what the standard statistical tests will do.
- noelwelsh 13y agoI agree that the theory says small samples sizes are underpowered. However I believe there are other reasons why small samples over-estimate effects. We should consider effects as random variables -- different portions of the population will respond in different amounts to the experiment. Smaller samples increase the variance in the measurement of the effect. This wouldn't be a problem if we replicated experiments many times, but we don't, and we only see results of experiments we conduct ourselves or those that are published. Add in the tendency for only significant results to be published and you have a biased sampling of effect size. As for really small vs small -- I guess I'm used to web experiments, which typically have 1000+ participants.
- nhaehnle 13y agoWhat you write is not quite wrong, but it must be taken with a spoon of salt due to the way this kind of science is usually done. If you fix a binary hypothesis, and then run your experiment for that specific hypothesis and only that hypothesis, then you're right. In practice, though, people look at data such as from such experiments, and then invent a hypothesis that fits. The space of potential plausible-sounding hypotheses is huge (especially since, in many cases in psychology and related fields, both A and not-A may sound plausible). So the chance that such a small sample appears to show evidence for some plausible-sounding but incorrect hypothesis is actually very high.
- rthomas6 13y agoFollowing the idea that poor layout make a reader feel bad when reading, I wonder if it would be advantageous to purposefully evoke this feeling when writing hit pieces or about something bad that happened?
- gdubs 13y agoSeems to be a technique used in negative political campaign ads.
- Kronopath 13y agoFor those interested in reading more, I must once again recommend Matthew Butterick's online ebook Practical Typography (http://practicaltypography.com/ http://practicaltypography.com/) as a simple, no-nonsense guide to creating good written documents and websites. I used many of the tips and tricks from that to redesign my personal website (http://kronopath.net/blog/dawn-of-a-new-day/ http://kronopath.net/blog/dawn-of-a-new-day/) and I think I got something pretty decent, despite not being a trained designer. Medium was a bit of an inspiration for me as well.
- btbuildem 13y agoFWIW, I routinely use https://www.readability.com/ https://www.readability.com/ - very few websites are actually readable.
- 3stripe 13y agoI would love to see some of the design principles from this article applied to Hacker News.
- dredmorbius 13y agoHere's a rough stab at it: http://stylebot.me/styles/2945 http://stylebot.me/styles/2945
- araes 13y agoThere does seem to be an assumption that making your reader "feel better" while they read is a good thing. However, the tactics in the article may actually be counter to what a lot of websites want - I.E. the Cracked example. Your eyes "squinting and darting", and the need to "second guess what you should be reading" is actually desirable. They want you to read more / different content on their site. Its possibly more desirable for you to feel distracted and vaguely unsatisfied by the experience, because then you're hunting for the next hit. Admittedly, there's still a presentation difference between places like Cracked (fuggly blog style) and sites with similar motives (Reddit / HN). In that case though, the deciding feature is mostly minimalism (list presentation, no huge ads, no content tiles, limited social content links, very light scripting). Similar to why I prefer them over traditional blog layout news sites (Reuters, CNN, ect...) as the initial step of surveying the days events has Way less overhead.
- dredmorbius 13y agoMaybe it's just getting old, but with time I find I've got vastly less patience for cluttered sites. I installed the Stylebot Chrome plugin last May when Google+ rolled out its redesign and my eyes bled. Since then, I've created styles for some 850-odd sites, many quite brief, some longer. The elements I attack: ⚫ Anything that moves. Animations, sliders, pop-ups. ⚫ Fixed elements: headers, footers, fixed-position social bars. ⚫ Fonts. My preferred reading font is 15pt (about 20px on this display). Most sites seem to run between 12-14px, which is painfully small. ⚫ Crappy contrast. Backgrounds should be light. ⚫ Anything "social". If I want to share your content, I've got a perfectly good URL with which to do it. ⚫ Interstitials. If you're relying on those for advertising or messaging, I'll see them precisely once. ⚫ Sidebars. I either nuke them entirely, or de-columnize the page. See: http://www.reddit.com/r/dredmorbius/comments/1tniu3/user_site_restyling_multicolumn_vs_fullwidth/ http://www.reddit.com/r/dredmorbius/comments/1tniu3/user_sit... ⚫ I find call-outs and images floated to the right rather than the left less annoying (at least in ltr languages). So I move those elements to float right, clear right, and pad with 10px (or 0.5 em), add a 1px border, and a 20px (or 1em) margin. Often a shadow drop for images just for grins (see above). ⚫ I find a blue link color is far less distracting than other alternatives. Many sites seem to prefer red/orange links (they stand out), my usual preference these days is for #1e6b8c (or something close to it). ⚫ I've found both drop caps and bold leading lines useful in some cases for affordance -- especially in streams of aggregated content where practice of the originating source doesn't include strong ledes, these at least allow you to find the start of a post easily. The saddest overall impression is that most web design is actively hostile to reading.
- toggle 13y agoHe's wrong when he says that Medium uses a 22pt font. They have a 22 PIXEL font. 22px is much smaller than 22pt. (37signals' blog and Zen Habits also have a 20-something pixel font size, not 20-something points). Otherwise, this was a pretty decent overview. A lot of programming-focused sites ignore good practices about line lengths and font size.
- Uncompetative 13y agohttps://ooomf.com/blog/the-science-behind-fonts-and-how-they-make-you-feel/ https://ooomf.com/blog/the-science-behind-fonts-and-how-they... Do yourself a favour and read it here as it was intended.
- userbinator 13y agoI've set my browser to use a fixed-width font (similar to the X terminal ones but with some minor improvements like slashed zero) and override the sizes, precisely so I don't have to deal with some horrible choices some websites make. I use what works best for me.
- dredmorbius 13y agoI'd done that for quite a while, but found it broke far too many navigation elements. You can accomplish that, though, either through your browser preferences, by using a userContent.css override stylesheet, or with site-specific stylesheet overrides (I use Stylebot for this, Stylish is another option). But, absolute agreement on the crappy design decisions many sites make.