So, I should probably post the answer I've learned since originally asking my question.
tl;dr: it's expensive to create fonts that render well at screen resolutions without font smoothing, so most makers of web fonts don't even try. There's no way to make a badly hinted font look acceptable without font smoothing.
The core problem is that it appears that creating a font that looks nice on a screen is expensive. The shapes of the letters are stored as mathematically-defined curves that can be scaled to any resolution, but at low resolutions those curves don't nicely fall on the right pixels, so they require something called font hinting to display crisply. Font hinting can be done manually, by hand, or automatically, by a computer program such as ttfautohint.
The best results are from manually hinted fonts. Microsoft spent a lot of money to manually hint the fonts that are traditionally included with Windows, so they display very nicely even without ClearType/Font Smoothing.
Automatically hinted fonts are greatly inferior. Most of them require some kind of ClearType/Font Smoothing to have an acceptable display result at low resolution, because their raw form looks like the crap in the screenshot I included in my original question, with double-thick lines and the like.
That used to not be a very big issue, because most web pages were designed to use fonts that were already present on the user's computer, and those were usually high-quality. Then web fonts were invented, which let every website designer ignore the user's high-quality local fonts and instead use some lower-quality font they liked the look of. This also encouraged the use of custom fonts for things like UI icons and logos.
So, if you hate ClearType/Font Smoothing and have a standard-resolution display, you're SOL unless you try to wrest control of font choice from the web pages you're viewing. That's going to be a difficult and long battle, since text usually renders perfectly fine with local fonts, but you still need the web fonts for icons. You probably don't want to use the browser flags to completely disable webfonts. Here are a couple tools that will help.
Chrome: Font Blocker. This tool will allow to right click on some text and block the custom font used. It will work on many webpages, but increasingly has problems with Google's properties.
Firefox: Font blocker foxified. This tool appears to be the same Chrome extension above, but packaged for Firefox. It works the same way.
I do wish someone would create something like an ad-blocker for web fonts, that would use a community managed list of font substitutions and page fixes to make the web easily browsable without non-icon web fonts.
Eventually, the move to higher display pixel density will render this problem moot.
Best Answer
The first picture is probably a mockup made by an ad-agency which uses Macs all day long and can't begin to understand why anyone would want to suffer the terrible font rendering of Windows.
I'm using MacType as well, and it makes things tolerable, but never reaches the quality of actual Macintosh font rendering. I was hoping Windows 10 would offer a proper font rendering, but not yet at least.
Windows is a work in progress, so perhaps one day, but for now we have to suffer this hack they call ClearType.