Pairing these two types of font is not something new. I'm saying two because this is what I usually do or see but you can obviously pair more than two fonts together and also can probably apply some of the basic guidelines we'll cover here to those multiple pairings.
The Serif/Sans Serif combo has been around for a while since you get the best of both categories in the same design. The refined more classic look of the serif always creates a good contrast with a more modern and sleek sans serif. Although this might sound easy, not all serifs go well with all sans serifs.
Before digging deeper into specific font pairings, here are 4 basic principles to follow when thinking of pairing the two main typeface categories. Keep in mind that those are just some reference points for when you start a new design and are not meant to be regarded as definitive rules.
In some occasion font superfamilies have Serif equivalents of their sans-serifs. For example, Source. It comes in three families, sans, mono and serif. Usually, these glyphs stem from the same initial design and will therefore provide some visual coherence while bringing some contrast to the pairing. It's always fun to work with a typeface with so many weights and options and it often makes the pairing that much easier.
Which brings us to my next point:
This is perhaps the single, best rule of thumb you can apply: contrast. Contrast can make or break a font serif to sans serif pairing, in fact, any pairing whatsoever. Use bolder weights for titles and lighter for body text or vice versa. Contrast can also be applied to the levels of details a font has. A quirky, display serif, in most cases, won't pair well with a quirky sans serif even if it's a bit more subtle to start with. It will most likely make the design too visually busy. Here's an example to show you how contrast can help in font pairings.