I am slightly hesitant to force authors to think about how their posts will look like in different fonts, and different styles. While I don’t expect this to be a problem most of the time, there are posts that I write where the font choice would matter for how the content comes across.
Medium allows the writer to chose between a sans-serif and a serif font, which I like a bit more, but I would expect would not really satisfy Alicorn’s preferences.
Maintaining multiple themes also adds a lot of design constraints and complexity to updating various parts of the page. The width of a button might change with different fonts, and depending on the implementation, you might end up needing to add special cases for each theme choice, which I would really prefer to avoid.
Overall, my hypothesis is that Alicorn might not dislike serif-fonts in general, but might be unhappy about our specific choice of serif fonts, which is indeed very serify. I would be curios whether she also has a similar reaction to the default Medium font, for example displayed in this post: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
As with many such things, there are standard, canonical solutions to your concerns.
In this case, the answer is “select pairs/sets of fonts that are specifically designed to have the same width in both the serif and the sans variants”. There are many such “font superfamilies”. If you’d like, I can draw up a list of recommendations. (It would be helpful if you could let me know your constraints w.r.t. licensing and budget.)
Theme variants do not have to be comprehensive redesigns. It is eminently possible to design a set themes that will not lead to the content being perceived very differently depending on the active theme.
P.S.:
Overall, my hypothesis is that Alicorn might not dislike serif-fonts in general, but might be unhappy about our specific choice of serif fonts, which is indeed very serify.
I suspect the distinction you’re looking for, here, is between transitional serifs (of which Charter, the Medium font, is one, although it’s also got slab-serif elements) and the quite different old-style serifs (of which ET Book, the current LW 2.0 font, is one). (There are also other differences, orthogonal to that distinction—such as ET Book’s considerably smaller x-height—which also affect readability.)
Alicorn, if you’re reading this, I wonder what your reaction is to the font used on this website:
P.P.S.: It is also possible that the off-black text color is negatively impacting readability! (Especially since it can interact in a somewhat unfortunate manner with certain text rendering engines.)
Alicorn, what OS and browser are you viewing the LW 2.0 site on?
FYI, your assessment is in the extreme minority; most people who have seen that site have responded very positively to the font choice (and the typography in general). This suggests that your preferences are unusual, in this sphere.
I say this, not to suggest that your preference / reaction is somehow “wrong” (that would be silly!), but a) to point out the the danger in generalizing from one’s own example (typical mind blah blah), and b) to underscore the importance of user choice and customization options!
rest of this response is not specifically for Alicon but is re: this whole comment thread
This is still a gold standard of UX design: sane defaults plus good[1] customizability.
[1] “Good” here means:
comprehensive
intuitive
non-overwhelming (i.e. layered)
Note, these are ideals, not basic requirements; every step we take toward the ideal is a good step. So by no means should you (the designer/developer) ever feel like “comprehensive customizability is an unreachable goal; there’s no reason to bother, since Doing It Right™ is too much effort”! So in this case, just offering a couple of themes, which are basic variations on each other (different-but-matching font choices, a different color scheme), is already a great thing and will greatly improve the user experience.
The Merriweather and Merriweather Sans fonts (available for free via Google Fonts) are, as you can see, designed to be identical in width, line spacing, etc. They are quite interchangeable, in body text, UI, etc. Both are quite readable, and aesthetically pleasing.
(As a bonus, active on that page is a tiny bit of JavaScript trickery that sets different body text font weights depending on whether the client is running on a Mac, Windows, or Linux platform, to ensure that everyone sees basically the same thing, and enjoys equally good text readability, despite differences in text rendering engines. Take a look at the page source to see how it’s done!)
UPDATE 2: A couple of mockups (linking to individual images because Imgur’s zoom sucks otherwise). Be sure to zoom in on each image (i.e. view at full magnification):
1. OS (and version), browser (and version), device/display, etc.?
(General note: folks, please, please include this information whenever you say anything to a web designer/developer/etc. about how a website looks or works for you!!)
2. Great! If one of them feels clear, then this goes to show exactly what I was saying: user choice is good.
I am slightly hesitant to force authors to think about how their posts will look like in different fonts, and different styles. While I don’t expect this to be a problem most of the time, there are posts that I write where the font choice would matter for how the content comes across.
Medium allows the writer to chose between a sans-serif and a serif font, which I like a bit more, but I would expect would not really satisfy Alicorn’s preferences.
Maintaining multiple themes also adds a lot of design constraints and complexity to updating various parts of the page. The width of a button might change with different fonts, and depending on the implementation, you might end up needing to add special cases for each theme choice, which I would really prefer to avoid.
Overall, my hypothesis is that Alicorn might not dislike serif-fonts in general, but might be unhappy about our specific choice of serif fonts, which is indeed very serify. I would be curios whether she also has a similar reaction to the default Medium font, for example displayed in this post: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
As with many such things, there are standard, canonical solutions to your concerns.
In this case, the answer is “select pairs/sets of fonts that are specifically designed to have the same width in both the serif and the sans variants”. There are many such “font superfamilies”. If you’d like, I can draw up a list of recommendations. (It would be helpful if you could let me know your constraints w.r.t. licensing and budget.)
Theme variants do not have to be comprehensive redesigns. It is eminently possible to design a set themes that will not lead to the content being perceived very differently depending on the active theme.
P.S.:
I suspect the distinction you’re looking for, here, is between transitional serifs (of which Charter, the Medium font, is one, although it’s also got slab-serif elements) and the quite different old-style serifs (of which ET Book, the current LW 2.0 font, is one). (There are also other differences, orthogonal to that distinction—such as ET Book’s considerably smaller x-height—which also affect readability.)
Alicorn, if you’re reading this, I wonder what your reaction is to the font used on this website:
https://www.readthesequences.com
P.P.S.: It is also possible that the off-black text color is negatively impacting readability! (Especially since it can interact in a somewhat unfortunate manner with certain text rendering engines.)
Alicorn, what OS and browser are you viewing the LW 2.0 site on?
I do not like the readthesequences font. It feels like I’m back in grad school and also reading is suddenly harder.
I’m on a Mac ’fox.
Ok, thanks!
FYI, your assessment is in the extreme minority; most people who have seen that site have responded very positively to the font choice (and the typography in general). This suggests that your preferences are unusual, in this sphere.
I say this, not to suggest that your preference / reaction is somehow “wrong” (that would be silly!), but a) to point out the the danger in generalizing from one’s own example (typical mind blah blah), and b) to underscore the importance of user choice and customization options!
rest of this response is not specifically for Alicon but is re: this whole comment thread
This is still a gold standard of UX design: sane defaults plus good[1] customizability.
[1] “Good” here means:
comprehensive
intuitive
non-overwhelming (i.e. layered)
Note, these are ideals, not basic requirements; every step we take toward the ideal is a good step. So by no means should you (the designer/developer) ever feel like “comprehensive customizability is an unreachable goal; there’s no reason to bother, since Doing It Right™ is too much effort”! So in this case, just offering a couple of themes, which are basic variations on each other (different-but-matching font choices, a different color scheme), is already a great thing and will greatly improve the user experience.
The Medium font is much less bad but still not great.
Update: I have a recommendation for you!
Take a look at this page: https://wiki.obormot.net/Reference/MerriweatherFontsDemo
The Merriweather and Merriweather Sans fonts (available for free via Google Fonts) are, as you can see, designed to be identical in width, line spacing, etc. They are quite interchangeable, in body text, UI, etc. Both are quite readable, and aesthetically pleasing.
(As a bonus, active on that page is a tiny bit of JavaScript trickery that sets different body text font weights depending on whether the client is running on a Mac, Windows, or Linux platform, to ensure that everyone sees basically the same thing, and enjoys equally good text readability, despite differences in text rendering engines. Take a look at the page source to see how it’s done!)
UPDATE 2: A couple of mockups (linking to individual images because Imgur’s zoom sucks otherwise). Be sure to zoom in on each image (i.e. view at full magnification):
LW 2.0 with Merriweather:
One
Two
Three
Four
Five
Six
Seven
LW 2.0 with Merriweather Sans:
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
When I compare the two examples, the second one feels “clear”, while the first one feels “smudgy”. I have to focus more to read the first one.
EDIT: Windows 10, Firefox 55.0.3, monitor 1920x1080 px
1. OS (and version), browser (and version), device/display, etc.?
(General note: folks, please, please include this information whenever you say anything to a web designer/developer/etc. about how a website looks or works for you!!)
2. Great! If one of them feels clear, then this goes to show exactly what I was saying: user choice is good.