DEV Community

Ben Halpern
Ben Halpern

Posted on

Considering changing to sans-serif for post body

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)

Collapse
 
ben profile image
Ben Halpern

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-weight of 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.

Collapse
 
michael profile image
Michael Lee 🍕

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.

Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
karfau profile image
Christian Bewernitz • Edited

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.

Collapse
 
csallen profile image
Courtland Allen • Edited

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.

Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
eljayadobe profile image
Eljay-Adobe

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.

Collapse
 
tterb profile image
Brett Stevenson

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.

Collapse
 
kuldar profile image
Kuldar 🇪🇺

Stylebot is great for "fixing" sites for yourself. Been using it a lot for minor tweaks.

Collapse
 
timothymehlhorn profile image
Tim Mehlhorn

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.

Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
galdin profile image
Galdin Raphael

One thing to consider here is that post-authors might want to be able to view the serif and sans versions of their posts.

Collapse
 
lynnetye profile image
Lynne Tye • Edited

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 😂

Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
lynnetye profile image
Lynne Tye

Oooooooh! That's fancy. I like it.

Collapse
 
acharraggi profile image
Mike Silversides

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.

Collapse
 
_shuriken_ profile image
AlessandroPellizzari

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!

Collapse
 
ben profile image
Ben Halpern

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.

Collapse
 
backendandbbq profile image
Viach Kakovskyi

Good idea!

Interesting, that I implemented these this week because someone sent me the link.

Collapse
 
kathryngrayson profile image
Kathryn Grayson Nanz

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! :)

Collapse
 
jacoby profile image
Dave Jacoby

Aesthetically, I've always been a fan of sans serif over serif, but by all means, err toward accessibility.

Collapse
 
ben profile image
Ben Halpern

Very valuable comment. Good input.

Collapse
 
codemouse92 profile image
Jason C. McDonald

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!

Collapse
 
jlhcoder profile image
James Hood

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.

Collapse
 
liquid_chickens profile image
Chris Dodds

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.

Collapse
 
ben profile image
Ben Halpern

Thanks for the input.

Collapse
 
letsbsocial1 profile image
Maria Campbell

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!

Collapse
 
eerk profile image
eerk

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.

Collapse
 
pgsil profile image
Pedro Gonçalves

Are you just going to do system-default sans-serif or are you investigating alternative webfonts? Roboto and Open Sans are great, and it'd be interesting to at least check them out!

Collapse
 
ben profile image
Ben Halpern • Edited

This is our current font stack:

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

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.

Collapse
 
pgsil profile image
Pedro Gonçalves

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 😬

Collapse
 
val_baca profile image
Valentin Baca

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.

Collapse
 
arximughal profile image
Muhammad Arslan Aslam • Edited

Comic Sans Ms is fine too :v