Two fonts that contrast without clashing. Live demo uses Clash Display (display) + Satoshi (body) from Fontshare.
Using two complementary fonts together — one for headings and display text, one for body text and UI. The heading font should have strong personality and visual impact. The body font should be highly readable at small sizes and in paragraphs. The two should contrast but not clash. Using more than two fonts on a website almost always looks amateur.
Clash Display is loaded from Fontshare for the headline. Satoshi for the body. Notice the contrast and harmony.
By Hannah Kveld · Photography by Theo Mårsson
Most things you wait for are not worth the wait. A small minority are. The whole project of design is learning to tell which is which, then having the courage to build for the second category even when the first one pays your rent.
This issue is about patience. Not the patience of the customer, who is paid for their wait in product. The patience of the maker, who is paid for their wait in nothing but the chance to put a better thing into the world.
Pairing a strong display font (Clash) with a clean, modern body face (Satoshi) lets you set editorial-feeling articles without losing the readability that long-form prose needs.
Use these font pairings for this website: import Clash Display from Fontshare CDN (https://api.fontshare.com/v2/css?f[]=clash-display@700&display=swap) for all headings at font-weight:700. Import Satoshi from Fontshare (https://api.fontshare.com/v2/css?f[]=satoshi@400,500&display=swap) for body text at font-weight:400 for paragraphs and 500 for UI labels. Apply Clash Display to all h1, h2, h3 elements with letter-spacing:-0.03em. Apply Satoshi to body, p, button, input with line-height:1.6.