Early on with this site, I made the decision to go with the serif font for the post's body. I thought it was a good look for a lot of articles, and also implicitly positioned ourselves as a viable Medium alternative.
But a lot of types of content really look bad with this font choice, and a sans-serif, similar to the comments, makes more sense in our opinion.
This is a one-line change, but not something we'd make lightly because these are your posts and we don't want to catch people off guard.
How do folks feel about this?
Top comments (40)
For what it's worth, I think the posts that most need this are the more "casual" posts, as opposed to full-on articles.
Here's a case study:
Current CSS
Proposed change
The proposal also includes an adjustment to the
font-weightof the title. And this doesn't imply we're totally settled on which sans-serif, but that's the one we've used throughout the site at the moment.Funny that you're considering this as this is something I actually implemented on my personal site as well. Previously, I did the same where headers were sans-serif and the body copy was serif. I just enjoyed the reading experience overall and it looked aesthetically pleasing. Upon doing some light research, there is a reason why serif fonts are good for long reads.
But for the recent redesign (which I pushed out last week...need to blog about it), I pushed out the opposite because over time I felt like serif often didn't pair well visually with monotype fonts used for code. Or I think I'm just getting old and wanted a super simple look and feel.
Ultimately I think the choice should be what allows the user to consume the content in the easiest manner.
Another option is have it be an option for the user to decide. If it's a single line of code, why not have an option in a user's settings where they can choose and store that option in local storage or a cookie. I suppose the considerations for this would be that you'd potentially have to serve up two sets of fonts vs one. But might be a nice little option for the user to choose for themselves.
I've thought about this. No technical limitations here, given our approach/implementation, but I would be concerned about the user experience of switching between fonts. I think there's a lot of benefits in having the reader know what to expect in this regard from post to post.
If it would be an option for the user, then the reader should be able to decide what he likes better, right? Not the writer.
Update: not a question any more, as it is answered further down in the comments.
I think your serif font looks great, and I'm curious what types of content it's worse for besides code and headers, which you're already using monospace and sans-serif for, respectively.
I switched the font on Indie Hackers articles over from sans-serf to serif a few weeks back. While it doesn't look quite as good as it used to, it still looks good, and the readability improvements are worth it (example).
Looking at the comments here, I find the sans-serif font harder to read than the main post body. Although maybe that's just the specific font choice, line height, etc.
One potential issue is that we don't distinguish between "articles" and other types of content. For example, this post is the same as any other article, but on IndieHackers it would not be. And maybe that's a line of thought we should explore further.
Could it be a user preference setting?
I much prefer serif fonts, and I wish that both the post and the comments were all serif.
Of course I can fix it myself by Chrome ➤ View ➤ Developer Tools and tweak the CSS. But that's a bit of a hassle. (I think there's a Chrome add-in which can post-load twiddle the CSS on a site-by-site basis. I remember I had one for Firefox, back in the day.)
In either event, I'd definitely vote against Comic Sans.
Since the replies seem pretty evenly split, I think that this would be the best solution. This could also be used to improve accessibility for dyslexic users by featuring a font like dyslexia to cater to dyslexic users.
Stylebot is great for "fixing" sites for yourself. Been using it a lot for minor tweaks.
I personally love the serif body text, but I’m a bit biased with a old-school printing-making background.
I agree that a user setting would be an awesome thing (much like reader-view on mobile safari). With caches (normal and service worker’s) the FOUT can be reduced to just when choicing the setting. The user setting could also lay the groundwork for a possible dark theme.
I hadn't thought about the user setting for the reader angle and you're definitely in the right about how it would be a clear stepping stone towards dark theme options. Really it's all about how the reader wants to consume it. This is really good food for thought.
One thing to consider here is that post-authors might want to be able to view the serif and sans versions of their posts.
I personally find sans serif to be more readable, but reading the comments here are really interesting! It's not an obvious choice.
While it'd be "cool" to give authors the option, you probably shouldn't for branding/consistency purposes. I trust whatever you decide, as long as it's not Papyrus 😂
Lol, yeah this thread has been really eye-opening. We can't be so democratic about every single change, but I had a feeling this might strike a chord. I'm fascinated by the proposals to give readers the option. It's a slippery slope into configuration hell, but I think it's actually a pretty neat idea.
Oooooooh! That's fancy. I like it.
Serif vs San-serif is unclear according to this 2012 usability article.
nngroup.com/articles/serif-vs-sans...
With high PPI screens more common especially on mobile, you can probably go either way, unless you know you have a lot of low PPI desktop users.
Focus on finding a font that's readable that fits your branding.
Maybe you can find a serif font that works for more types of articles.
Or maybe go with san-serif for low PPI screens and serif for high PPI screens.
I personally find the serif font to be decent-to-good on hi-definition screens (retina or 4k), but much less readable on "normal" screens (720 or 1080).
Especially because the font is too big, so I have to scale down the whole website to 90% (on 22-24") to make it readable.
If I may add a suggestion: on a 7-8" tablet the website scales the font to a huge size, maybe because it thinks it's a phone, and I can't scale it. It makes it unreadable, unless you hold your tablet at an arm's lenght.
Would it be possible to disable this feature and just stick to a fixed size (15-16px, maybe)?
Thanks!
Yeah, it would be a possibility. In the meantime, thanks for the input to make us aware of this so we can look into immediate fixes that should at least remedy the poorly-handled screen size defaults.
Good idea!
Interesting, that I implemented these this week because someone sent me the link.
There's been some research done that indicates sans serif fonts are better for accessibility – they're more legible on digital screens, and dyslexics especially have an easier time reading them (because they have less "distracting" decorative elements).
accessibility.psu.edu/legibility/f...
I'd say it would be a positive change! :)
Aesthetically, I've always been a fan of sans serif over serif, but by all means, err toward accessibility.
Very valuable comment. Good input.
I concur! I am dyslexic, and I indeed find sans serif to be easier to read.
That said, one must be caution about which sans serif is used. If you choose one which has little difference between capital i, lowercase L, and number 1, it can be harder to read!
Personally, I like the Source Sans Pro and Cabin fonts, which are both free. They're clean, and each letter is clearly distinguishable. If you switch to sans serif, PLEASE consider using one of these in a webkit!
I’ve read this too. My personal blog that sources my entries on this site uses sans-serif for the post body on screens, so no objections here.