I find these pairings interesting, and thank the authors. Having knowledgeable and experienced people make suggestions is neat, really great.
FWIW, what would help me most (not that the authors are obliged to provide it; I'm not saying that) is if someone in that category would give some guidelines under what circumstances certain parings are reasonable. Kind of a white-wine-with-fish thing.
For instance, "sober, as with a business report" or "lighter, such as a human-interest story" would help those of us who are, sigh, completely without a clue.
Yeah, he has a whole rant about referral sites generating traffic but not interest. It's actually a good read, if a bit sour. However, I don't think that should color the opinion of the book, as it still is one of the best modern, freely available typography resources around (in my opinion).
For instance, "sober, as with a business report" or "lighter, such as a human-interest story" would help those of us who are, sigh, completely without a clue.
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. :-)
Wow, this is really beautiful. One thing I feel lets it down is that "text-align: justify" still isn't on par with print quality in browsers. It is getting better, but it's still a way behind pdflatex+microtype.
I'm sure there's work being done by talented people, but it's a hard problem, and maybe there's been compromise between speed and quality stuck?
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.
My problem with google fonts is not how to pair them but how differently they appear on different OS/browser combinations.
Something like Lato can look great but its relative weight on OSX Safari vs. Chome Windows is so different that I just don't think it can be used in production.
Yes! I love typography and try to start the design of my personal projects with font choice and positioning. I'm a developer, though, so I can never match two fonts well. This site is fantastic.
Great examples of font pairings—web fonts have come a long way! I like the parallel trend of web sites/frameworks like Medium, WordPress, Bootstrap, GitHub, etc moving to using native system fonts, though[0]. Make websites look good on all platforms and load quickly.
Be careful with ligatures in Web pages. They have downsides, which might not initially be apparent.
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.
The trick is to use a font that has ligatures, but not to use the ligature characters directly. Let the presentation choose the glyphs to display, and let the encoded characters remain separate as they should. CSS handles this with "font-variant-ligatures" (works in some browsers). I just did a test in Chrome on OS X; toggling between "font-variant-ligatures: common-ligatures" and "font-variant-ligatures: none" changed the presentation, but it did not negatively impact the accessibility, searchability, etc. as the ligature characters would. Automatic glyph substitution in presentation yay; encoded character substitution nay.
Unfortunately that's a pretty big matrix of possibilities, since different fonts have different support for ligatures, and the ligatures that will actually be seen are dependent on a combination of the page designer's intent and browser capabilities.[1]
(And apologies if I've completely misunderstood the intent of your question!)
For any given font, the license is specified on the font's specimen page.
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.
FWIW, what would help me most (not that the authors are obliged to provide it; I'm not saying that) is if someone in that category would give some guidelines under what circumstances certain parings are reasonable. Kind of a white-wine-with-fish thing.
For instance, "sober, as with a business report" or "lighter, such as a human-interest story" would help those of us who are, sigh, completely without a clue.