How Do I Choose Typography for My Website?
Choose website typography by pairing one serif headline with one sans-serif body, setting body at 16-18px, hitting 1.5 line height, and limiting to two typefaces. With Tampa-friendly font picks.
Choose website typography by following five rules: pair one serif (or strong sans) for headlines with one sans-serif for body, set body text at 16-18px minimum, keep line height at 1.5x, limit yourself to two typefaces (max three with a mono accent), and test on a real phone before committing. Most Tampa SMB sites get this wrong by using the default theme font and never auditing readability.
Why typography is more important than it looks
Type does 70% of the visual work on a website. If the type is wrong, no amount of color or imagery will save the design. If the type is right, the design can be plain and still feel professional.
Most “ugly” SMB websites in Tampa are typography failures — body text too small, line lengths too long, headline font that doesn’t match the brand. Fix the type and the whole site reads as more credible.
The five rules
1. Pair one display with one body face
The classic working pair: a serif headline (editorial confidence) with a sans-serif body (legibility). Or a strong geometric sans for headlines with a humanist sans for body.
Reliable pairings for SMB websites:
- Playfair Display + Inter — editorial confidence, modern body
- Fraunces + Inter — distinctive serif with strong sans
- Source Serif + Source Sans — neutral, professional
- Libre Caslon Text + Source Sans — traditional, trustworthy
- DM Serif Display + DM Sans — modern, friendly
- Söhne (or Inter) for both — sans-on-sans, clean and modern
Avoid: all-caps sans-serif “tech bro” stacks for SMB service businesses. Reads as cold and generic.
2. Body text 16-18px minimum
12-14px body is a legacy of the 2000s and reads as amateur today. Phones, retina screens, and older eyes need bigger type. 16px is the floor. 18px is better for content-heavy pages.
3. Line height 1.5x
Text crammed together at 1.2x line height is hard to scan. 1.5-1.65x for body, 1.1-1.3x for headlines. Sub-headers somewhere in between.
4. Limit to two typefaces
One headline face, one body face. Add a third only if you have a specific reason (a mono for code, a script for a one-off accent). Five-typeface sites look like a high school yearbook.
5. Test on a real phone
Most type problems show up on mobile. Tap targets, line length, hierarchy collapse, reflow. Test on an actual iPhone or Android — not a Chrome desktop emulator.
Typography settings that matter
| Setting | Recommended | |—|—| | Body size | 16-18px | | Line height (body) | 1.5-1.65 | | Line length | 50-75 characters | | H1 size | 36-56px (mobile 28-36px) | | H2 size | 28-40px | | H3 size | 20-28px | | Paragraph spacing | 0.75-1.5em | | Letter spacing (body) | 0 — leave it alone | | Letter spacing (all-caps) | +0.05-0.1em — only on all-caps |
Font sources
- Google Fonts — free, fast, broad selection. Default starting point.
- Adobe Fonts — if you have Creative Cloud, broader options
- Type foundries (Klim, Pangram Pangram, Typotheque) — premium quality, $50-$300 license. Worth it for premium brands.
Self-host fonts (don’t load them from a CDN you don’t control) for GDPR compliance and speed.
What this means for your Tampa business
Your typography says more about your brand than your logo does. A law firm using Comic Sans loses credibility instantly. A med spa using a chunky industrial sans-serif feels wrong. The type has to match the category.
A reliable starting point for most Tampa SMB sites:
- Professional services (legal, accounting, consulting) — Fraunces + Inter or Playfair + Source Sans
- Health/wellness (med spa, dental, PT) — DM Serif Display + DM Sans, or Cormorant + Lato
- Home services (HVAC, roofing, plumbing) — Inter or Söhne for both, or a strong slab serif headline + Inter body
- Restaurants/hospitality — distinctive serif (Fraunces, Bricolage Grotesque) + clean sans
- Tech/SaaS — Inter, Söhne, or General Sans for both
The most common Tampa typography mistakes
- Theme defaults — using whatever Astra, Divi, or Generate Press came with
- Body text under 16px
- Three+ fonts on one page
- Cursive scripts for brand names (“welcome to our family”)
- All-caps body text — never readable, always exhausting
- Font weight contrast too low (everything at 400, no hierarchy)
Fix any of these and the site immediately reads as more polished.
Get a straight answer for your project
Stuck on a type pairing? Send us your current site and your category — we’ll reply with two pairing options that work for your brand within one business day.
Got a more specific question about your project?
Send the details — we reply within one business day with a straight answer, no sales theater. Or book the 30-minute discovery call directly.