Your No BS Guide to Website Font Pairings (and Sizes That Won’t Make People Squint)

Fonts: They’re not just pretty letters. The typefaces you choose tell a whole story—before anyone even reads a word.

Let’s start with the basics. Serif fonts (think Times New Roman or Playfair Display) have little feet. They give off classic, elegant, I-read-hardcovers vibes. Sans-serif fonts (like Arial or Helvetica)? Clean, modern, and minimal. Like a freshly organized Notion board. 

Now, should you mix or match? The general rule of thumb: opposites attract. Pairing a serif headline with a sans-serif body (or vice versa) keeps things fresh and balanced. Too much of the same? It can look a little meh. But hey—two fonts from the same fam can work if they have enough contrast in weight or size. The key is visual hierarchy. Your fonts should guide people through your content without making their eyes bleed.

Still stressing? Pick one bold font for headlines, one clean font for body copy, and call it a day. You don’t need a whole font circus. 

Now, let’s talk sizing—because tiny text is the fastest way to lose a visitor. Here’s a quick cheat sheet for accessible design on Squarespace: 

• H1: 4rem (48pt) bold 

• H2: 2.7rem (32pt) bold 

• H3: 2rem (24pt) bold 

• H4: 1.5rem (18pt) bold, weight 400

But remember—no font is created equal. Some look chunkier than others at the same size. Test, tweak, repeat. Accessibility > aesthetics. When in doubt, go bigger, bolder, and more readable. And yes, you can still be stylish and user friendly. 

Wanting further creative guidance you can trust? We’re just a click away from turning your font chaos into a typeface triumph.