savorswing.com

Typography

Nice — here’s a ready-to-use Typography guide in English for your recipes site (Savor Swing). It includes recommended font pairings, hierarchy, accessibility tips, and a clean CSS snippet you can drop into your theme. I kept it practical so you can implement it quickly and keep your site looking polished and readable across devices.

1. Goals & tone

Savor Swing is a food & recipe site. Typography should feel:

  • friendly, warm, and approachable
  • highly readable on mobile (most visitors)
  • modern yet slightly organic — a touch of personality without sacrificing legibility

Use a clean sans-serif for UI + body and a friendly serif or display font for headings to add warmth and appetite appeal.

2. Font pairings (Google Fonts — free & easy)

Primary (Body / UI):

  • Inter — excellent readability, modern, great for UI and long reading.

Heading / Accent (optional):

  • Playfair Display — classic, slightly high-contrast serif that pairs beautifully for recipe titles and feature headings.
  • Alternative display: Merriweather (serif) or Poppins (geometric sans) for a more contemporary look.

Recommended Google Fonts import:

/* Put this in <head> or your main CSS file */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

3. Typographic scale & hierarchy

Use a modular scale for consistent rhythm. Below are suggested values (desktop first, then mobile in parentheses).

  • Body text (paragraphs): 16px → 1rem (Mobile: 15px — 0.9375rem)
  • Small text / captions: 13px → 0.8125rem
  • H5 / recipe metadata: 14px → 0.875rem
  • H4 / subheads: 18px → 1.125rem
  • H3 / section headings: 22px → 1.375rem
  • H2 / recipe titles: 28px → 1.75rem
  • H1 / hero title: 42px → 2.625rem

Line-height (important for readability):

  • Body: 1.6
  • Headings: 1.2 – 1.35 (tighter than body)

Letter-spacing:

  • Body: normal (0)
  • Headings: slight negative or small positive depending on font; for Playfair Display keep normal.

4. Readability & accessibility rules

  • Minimum font size for body: 16px on desktop. Avoid default sizes below 15px on mobile.
  • Contrast: ensure text contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • Line length: ideal 60–75 characters per line for paragraphs.
  • Limit decorative display for long bodies — use display fonts for headings only.
  • Use font-weight intentionally: body 400, bold emphasis 600–700.
  • Avoid all-caps for long headings (use sparingly for short labels).

5. UI roles & examples

  • Body: font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  • Headings: font-family: 'Playfair Display', serif; (or Poppins if you prefer sans)
  • Buttons / UI controls: Inter semi-bold (600) with text-transform: none (better legibility)
  • Recipe title: Playfair Display 700, letter-spacing normal, margin-bottom comfortable space
  • Ingredients lists: body font with font-size: 0.95rem, good padding, bullet style clear
  • Step-by-step instructions: slightly larger line-height, left-aligned, numbered lists

6. Practical CSS (drop-in, responsive variables)

Copy into your main CSS file. Adjust color variables to match your theme.

:root{
  /* Colors (example) */
  --text: #111111;
  --muted: #6b6b6b;
  --accent: #c1442b; /* warm accent for buttons/links */
  --bg: #ffffff;

  /* Base sizes */
  --font-base: 16px;
  --scale-0: 0.8125rem; /* 13px */
  --scale-1: 0.875rem;  /* 14px */
  --scale-2: 1rem;      /* 16px */
  --scale-3: 1.125rem;  /* 18px */
  --scale-4: 1.375rem;  /* 22px */
  --scale-5: 1.75rem;   /* 28px */
  --scale-6: 2.625rem;  /* 42px */
}

/* Import Google Fonts (if not already in head) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

html { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-size: var(--font-base); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--text); background:var(--bg); }

body { line-height: 1.6; font-weight: 400; margin:0; padding:0; }

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; color:var(--text); margin:0 0 0.6em 0; line-height:1.2; }

h1 { font-size: var(--scale-6); font-weight:700; }
h2 { font-size: var(--scale-5); font-weight:700; }
h3 { font-size: var(--scale-4); font-weight:600; }
h4 { font-size: var(--scale-3); font-weight:600; }
h5 { font-size: var(--scale-2); font-weight:600; }
h6 { font-size: var(--scale-1); font-weight:600; }

/* Body text */
p { font-size: var(--scale-2); margin: 0 0 1.05em 0; color: var(--text); }

/* Small/caption */
.small, .caption { font-size: var(--scale-0); color: var(--muted); line-height:1.4; }

/* Links & buttons */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons */
.button {
  font-family: inherit;
  font-weight: 600;
  padding: 0.6em 1rem;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
}

/* Recipe title card example */
.recipe-title { margin: 0 0 0.8em 0; }

/* Responsive: slightly adjust base on mobile */
@media (max-width: 768px) {
  :root { --font-base: 15px; }
  h1 { font-size: 2rem; } /* keep hero manageable */
  h2 { font-size: 1.5rem; }
}

7. Micro-typography & touches

  • Use slight text-transform: capitalize; for category badges.
  • For ingredient lists, increase left padding and use line-height: 1.75 to improve scanability.
  • Use font-weight: 600 for emphasis (instead of italics) — italics are harder to read on small screens.
  • Use consistent vertical rhythm: base spacing unit = 8px (margins, paddings).

8. SEO & technical notes

  • Keep long recipe titles readable and avoid stuffing keywords into the visible title — use <h1> for the recipe title, but meta/title tags for SEO keywords.
  • Use semantic HTML: <article>, <header>, <section>, <ol> for steps, <ul> for ingredients.
  • Use font-display: swap (via Google Fonts link param &display=swap) to avoid FOIT (font invisible time).

9. Example HTML snippet (structure)

<article class="recipe">
  <header>
    <h1 class="recipe-title">Classic Lemon Drizzle Cake</h1>
    <p class="caption">Prep: 20 mins • Cook: 45 mins • Serves 8</p>
  </header>

  <section class="ingredients">
    <h2>Ingredients</h2>
    <ul>
      <li>200g self-raising flour</li>
      <li>200g caster sugar</li>
      ...
    </ul>
  </section>

  <section class="instructions">
    <h2>Method</h2>
    <ol>
      <li>Preheat the oven...</li>
      <li>Whisk butter and sugar...</li>
      ...
    </ol>
  </section>
</article>

10. Final tips

  • Test on multiple device sizes — the majority of readers will be on phones.
  • Use the font pairing consistently across the site: body + UI = Inter; headings = Playfair Display.
  • Keep spacing and hierarchy consistent so readers can scan ingredients and instructions quickly.
  • If you want a slightly more “homemade” feel later, consider adding a handwritten accent font for sparing use (e.g., recipe author sign-offs), but limit such fonts to decorative elements only.