12 curated heading + body font pairings for modern websites and design systems.
Pairing principles
Good pairings have contrast without chaos. Heading should differ in weight/style from body. Same x-height helps consistency. Common patterns: serif + sans, bold display + light body, or two fonts from the same superfamily.
FAQ
Single font OK?
Yes but weaker hierarchy. Use different weights/sizes to compensate.
More than 2 fonts?
Usually causes disharmony. Stick to 2 and vary size/weight.
Free?
Yes, all Google Fonts SIL OFL.
Page weight?
~50-150KB per font. Use 2-3 weights max per font.