Google Web Fonts Typographic Project

That seems like a perfectly reasonable request, though it’s surprisingly difficult to give a helpful response. Typography is a craft that has quite a big jump from generic rules of thumb that most designers would probably agree with up to designing a detailed typographical treatment for a specific project. There’s always a danger of giving safe but clichéd suggestions on one hand or giving very specific but therefore not very reusable suggestions on the other.

That said, for something like a traditional business report that includes long form text and needs a bit of structure, a reasonably safe plan is to combine a clean, relatively heavy, sans-serif face for the headings with a traditional, medium weight, medium contrast, serif face for the body text. For commercial fonts, some classic combinations might be Adobe’s Myriad (sans) and Minion (serif), or Gotham (sans) and Mercury (serif) from Hoefler & Co. If you’re looking for freely available web fonts, you could try the heavier weights of something like Open Sans or Montserrat for the sans, and perhaps something like Crimson Text or Libre Baskerville for the serif.

To make things less formal/traditional, you can soften the look in a lot of ways. Instead of choosing a clean sans-serif with sharp angles, you could choose something a little rounded or even something slightly quirky, say Adobe’s Cronos Pro. Another possibility is to go for something either more condensed (narrow) or expanded (wide), and perhaps use all-caps or play with letter spacing effects; something like Oswald is a popular choice for a dedicated bold and relatively narrow web font, but many of the larger font families both in print and for the web also include variants with different widths that can be useful here. Yet another option is to go with a lighter weight rather than a heavy one to get some contrast for the titles, often in combination with a much larger font size.

For a less formal/traditional serif, you might choose something with lower contrast than the examples I gave before, perhaps something like Merriweather as a free web font or Adobe’s Chaparral Pro in print. These often have more slab (flat/boxy) serifs than more traditional fonts as well, which helps with the informality. Again, there are also serif fonts with softer curves and less pronounced serif details, say Bree Serif, or with slightly unusual but not overpowering details, say Alegreya.

Of course, you don’t have to stick to sans headings and serif body text either. A popular alternative for less formal articles is to reverse the traditional roles and use a serif font for things like titles or headings and a sans for the body text, possibly in combination with some of the other ideas like using a low contrast slab serif or a softer or rounded sans.

Perhaps the most helpful thing about slightly less formal feature articles is that if you are doing a custom magazine layout or web page, you often have a lot of scope for choosing a very individual look for things like the main titles/headline and breaking away from the classic sans vs. serif dichotomy altogether. You might be able to pick a distinctive display face, designed for use in short settings and often at very large sizes, that reflects the subject matter, and perhaps choose companion fonts for body text and things like any subheadings or pull quotes that continue the theme by echoing or complementing your showpiece font. This is where you really need a bit of experience to know what’s out there and some good taste in how to find workable combinations, so it’s impossible to give much good general advice, but it’s also where a lot of the most fun and creative typography gets done if you decide to explore the field further.

These are just a few relatively simple and generic ideas, but perhaps they’ll be useful for someone. :-)

https://abookapart.com/products/on-web-typography

My understanding is that the main problem is incompatibilities between the CSS and TeX layout models. That's not to say that there isn't still plenty of room for improvement, however.

(And apologies if I've completely misunderstood the intent of your question!)

[1] https://drafts.csswg.org/css-fonts-3/#font-variant-ligatures...

Ligatures are their own font characters. That is, an s-t font ligature is not recognized as an s and a t except visually. So, some things break:

1) search of text. "step" become a font-dependent codepoint followed by "tep"

2) accessibility for handicapped users. Readers generally cannot correctly translate ligatures.

3) browsers do not guarantee to handle your ligature correctly, especially older versions of browsers.

So, for the small increment in esthetics, you're creating a small pile of annoyances for readers and affecting the ability to find docs on your site via search engines.

For these reasons, you don't frequently find ligatures in Web pages.

http://nedbatchelder.com/blog/201604/latos_unfortunate_ligat...

For example, near the bottom-right corner of https://fonts.google.com/specimen/Montserrat we can see that the license used is the SIL Open Font License. And from the SIL fonts FAQ[1]:

Please feel free to use SIL fonts in printed publications and PDF documents, including PDF documents posted on web pages. Such use is within the intended use of SIL fonts. No additional license or fee is required to use the fonts in a printed publication.

[1] http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=...