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