Typography

Typography Guide for CookExplore

1. Body Text (Paragraphs)

• Font: Lora, Merriweather, or Roboto (Google Fonts).
• Size:
  • Desktop: 16px–18px
  • Mobile: 15px–16px
• Line Height: 1.6–1.8 (for comfortable reading).
• Color: #333 (dark gray, easier on the eyes than pure black).
• Usage: All recipe text, blog articles, and general content.

---

2. Headings (H1–H6)

• Font: Playfair Display, Poppins, or Montserrat.
• Sizes:
  • H1 → 36px–42px (main page titles)
  • H2 → 28px–32px (section headings)
  • H3 → 22px–26px (subheadings)
  • H4–H6 → 16px–20px (minor headings)
• Weight: 600–700 (Bold).
• Color: #111 (slightly darker than body text for contrast).
• Usage: Recipe titles, blog post titles, and important section headers.

---

3. Accent / Decorative Text

• Font: Dancing Script, Great Vibes, or Pacifico.
• Usage:
  • Personal signature (“By Kristin Durkin”).
  • Quotes or highlighted notes.
  • Small decorative elements (like intro phrases).
• Tip: Use sparingly for emphasis, not for main content.

---

4. Links and Buttons

• Font: Same as body text (Lora/Roboto).
• Default Color: Brand accent (e.g., green #4CAF50 or warm orange #FF7043).
• Hover Effect: Slight color change or underline.
• Weight: Semi-bold for visibility.

---

5. Recipe Formatting

• Ingredients List: Bulleted list, semi-bold text.
• Instructions: Numbered list, clear spacing between steps.
• Notes / Tips: Italic or placed inside a light background box (e.g., #FFF8E1).

---

6. Font Pairing Examples

Here are some recommended Google Font pairings for CookExplore:

• Playfair Display (Headings) + Lora (Body) → Elegant, classic food blog style.
• Montserrat (Headings) + Roboto (Body) → Modern, clean, professional.
• Poppins (Headings) + Merriweather (Body) → Friendly, approachable, readable.

---

✨ Result:

• Headings = Bold, eye-catching, stylish.
• Body = Easy to read for long recipes & blog posts.
• Accent = Adds warmth and personality without being overwhelming.