DM Serif Display and DM Sans Font Pairing

DM Serif Display and DM Sans come from the same studio, Colophon Foundry, and it shows. DM Serif Display, set at 400 for headings, is a high-contrast serif with sharp, refined details, while DM Sans handles body text in a low-contrast geometric style. Together they look polished and elegant, a strong match for business sites, boutique shops and creative portfolios.

Why DM Serif Display and DM Sans Work Together

DM Serif Display is a display serif with strong thick and thin contrast: heavy vertical strokes, fine hairlines and crisp serifs that look best at large sizes. DM Sans is a geometric sans serif with round bowls, open shapes and very little variation in stroke thickness. The heading draws attention with its contrast, and the body stays calm and even.

What makes this pair feel so settled is that the two families share proportions. Their letters have a similar width and a compatible x-height, so a serif heading and the sans paragraph under it line up visually even though they belong to different classifications. You get the clear difference of serif against sans without the slight mismatch that sometimes happens when two unrelated families meet. The overall mood is refined but friendly rather than formal.

Where DM Serif Display and DM Sans Work Best

This combination fits an interior design studio homepage, a skincare or candle shop, or a photographer’s or architect’s portfolio where large headings sit above short project notes. Business sites that want to look premium without feeling stiff, such as a boutique law practice or a wedding planner, also do well with it. DM Sans is plain enough for product details, prices and navigation.

Weights and Sizes to Use

DM Serif Display comes in one weight, 400, plus an italic, so hierarchy has to come from size rather than weight. Keep it at 28px or larger, and aim for headings at least twice the size of your body text. A heading line height of 1.1 to 1.2 suits it. DM Sans is a variable font with weights from 100 to 1000 and an optical size axis, so set body text at 400 with 700 for bold, at 16 to 18px with a line height around 1.6.

Things to Watch

The fine hairlines of DM Serif Display thin out at small sizes, so do not use it for navigation, buttons or captions; give those jobs to DM Sans. Because the two fonts are so well matched, a timid size difference can make the page look flat, so be generous with heading sizes. The italic is attractive for a pull quote, but use it sparingly so it stays special.