Montserrat + Merriweather
A crisp geometric heading against a sturdy screen-optimized serif body creates contrast without feeling mismatched. Great for: Portfolios & personal sites.
A heading that sets the tone
Body text needs to disappear into the reading experience rather than compete with it. This paragraph is set in Merriweather at a comfortable line height, so you can judge how the two fonts sit together across real sentences rather than a single line of type.
CSS
h1, h2, h3 {
font-family: Montserrat, sans-serif;
font-weight: 700;
}
body, p {
font-family: Merriweather, serif;
font-weight: 400;
line-height: 1.6;
}