CookFluent Typography Guide
1. Font Families
- Headings (H1–H6):
- Primary:
Playfair Display, serif — elegant, modern, and perfect for recipe titles. - Fallback:
Georgia, serif
- Primary:
- Body Text:
- Primary:
Roboto, sans-serif — clean and highly readable for long articles and instructions. - Fallback:
Arial, sans-serif
- Primary:
- Accent / Callouts (Optional):
Dancing ScriptorPacifico— for recipe notes, quotes, or decorative text. Use sparingly.
2. Font Sizes
| Element | Font Size | Line Height | Notes |
|---|---|---|---|
| H1 (Main Titles) | 48px | 1.2 | Used for recipe or page titles |
| H2 (Subheadings) | 32px | 1.3 | Section headings |
| H3 | 24px | 1.4 | Sub-sections |
| H4 | 20px | 1.4 | Minor headings |
| H5 | 18px | 1.4 | Small headings |
| H6 | 16px | 1.4 | Tiny headings / labels |
| Paragraph / Body Text | 16px | 1.6 | Main content for readability |
| Captions / Notes | 14px | 1.5 | Photo captions, recipe notes |
| Buttons / Calls-to-Action | 16px | 1.5 | Clear and clickable |
3. Font Weights
- Headings:
700–900(bold for strong emphasis) - Body Text:
400–500(regular to medium for readability) - Accent Text:
400–500oritalicfor notes and quotes
4. Colors & Typography
- Primary Text: #333333 (dark gray for readability)
- Secondary Text / Notes: #555555
- Headings / Accents: #2C3E50 (deep navy) or a dark warm color matching your brand aesthetic)
- Links / Buttons: #E94E77 (your accent color for call-to-action)
- Hover Links: #D63C61
5. Line Spacing & Paragraphs
- Use 1.5–1.6 line-height for body text.
- Add 20px–30px margin between paragraphs for easy reading.
- Avoid very long blocks of text; break recipes into steps, bullet points, or numbered lists.
6. Special Typography for Recipes
- Ingredients: Bold or use a slightly larger font (16–18px).
- Instructions / Steps: Numbered lists with line spacing 1.6 for clarity.
- Tips / Notes: Italics or a different color (#555555) for emphasis.
This typography system ensures CookFluent feels professional, modern, and easy to read on all devices.