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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
IMO, serifs are usually better for body text since character differentiation is stronger. They're just easier to read. Alternative fonts (like console monospace) for preformatted/code styles makes sense to me though.
Thanks for the input.
I agree with Chris. I love using monospace fonts personally, and legibility is very good both in small and large screens. One of MY favs is Inconsolata monospace font. I find the sans-serif fonts sometimes to be a bit too bland. To me the text can look washed over sometimes. I find monospace fonts to be great for developer-related sites. However, monospace is not for every type of site. Hope this helps!
When a piece of body text has a large enough font, and lots of breathing room around it )like the text above, and like the text on Medium), I think serif works quite well. It feels more peaceful, like reading a book, you will take the time to read it.
Sans serif works better for UI elements, small text, or just when you have a lot of content that the user has to browse through as fast as possible.
Are you just going to do system-default
sans-serifor are you investigating alternative webfonts? Roboto and Open Sans are great, and it'd be interesting to at least check them out!This is our current font stack:
All system fonts with various fallbacks, all the way down to
sans-serif. We'd rather avoid using webfonts for performance purposes, but it's all on the table in one way or another.Yeah, I absolutely understand your performance concerns. In a pretty much text-only site, however, I wouldn't blame you guys for using a webfont.
The only reason why I'd go as far as to suggest webfonts is because I personally really don't dig Arial, which is probably what it'll fall back to on Windows 😬
Why not a have a user-set preference?
If an article writer sets a particular font, then use that. Otherwise, unset text uses the preference.
I think overall web trends have been moving toward sans serif, but I know many people have strong preference.
Comic Sans Ms is fine too :v
So the comments are san-serif already. Which has a weird vibe to me.
I'd say do the san-serif throughout.
Why not go hardcore/meta and make it monospaced? ;) Fira Mono is the place to be these days!
Ooo, there's also Fira Sans. It'd be nice to go with something other than Helvetica...start to give the site its own unique feel.
I like serif fonts for online content. I find them more pleasing to read. The non-serif ones look cheaper, less formal -- like a chat site and not an article site.
I'm ok with any font but it would be great if we can consider monospace, Source Code Pro ftw!!! jk
Oh, and by the way, MathJax support is a good thing to consider as well.
PLEASE
I juste read this, then the first comment. The sans-serif in the comment made me feel uncomfortable.