Alternate Pairing for a More Modern Look
If you want a slightly sleeker, minimalist style:
| Element | Font |
|---|---|
| Base | Inter Regular |
| Headings | Cormorant Garamond Bold |
| Breadcrumbs | Inter Medium, Small‑Caps |
🎯 Styling Tips
- Line Height: Body text 1.6–1.75 for readability.
- Weight Contrast: Always keep headings at least 200 weight heavier than body font for hierarchy clarity.
- Color Harmony: Use your existing gold (#C9A54A) for headings or hover states to reinforce brand luxury.
- Breadcrumb Separator: Use a thin slash
/or a minimalist chevron›in light grey for subtle navigation.
💡 If you want, I can mock up your exact theme’s typography CSS so you or your developer can paste it into Elementor or the theme customizer — everything will render exactly as planned without guesswork.
Do you want me to prep that ready‑to‑use CSS next?
each heading size, line height, letter spacing, style eatc
Alright Sujan — here’s a refined typography spec sheet so your brand feels cohesive, balanced, and premium across Base font, Headings (H1–H6), H1 Title Above Content, and Breadcrumbs. I’ve kept your existing Lato + Playfair Display pairing, but tuned the sizes, line heights, letter spacing, and text transforms for optimal readability and hierarchy.
📐 Full Typography System
| Element | Font | Size (px) | Weight | Line Height | Letter Spacing | Style / Transform | Notes |
|---|---|---|---|---|---|---|---|
| Body / Base | Lato Regular | 16–17 | 400 | 1.65 | 0em | Normal | Comfortable for long reading; slight size bump (17px) for large screens |
| H1 | Playfair Display Bold | 40 | 700 | 1.25 | -0.01em | Normal | Hero & page titles; tighter spacing for elegance |
| H2 | Playfair Display SemiBold | 34 | 600 | 1.3 | -0.005em | Normal | Great for section headers |
| H3 | Playfair Display SemiBold | 28 | 600 | 1.35 | 0em | Normal | Sub‑sections & feature titles |
| H4 | Playfair Display Medium | 24 | 500 | 1.4 | 0em | Normal | Card headers, widget titles |
| H5 | Playfair Display Medium | 20 | 500 | 1.45 | 0.01em | Normal | Labels, small section headings |
| H6 | Playfair Display Regular | 18 | 400 | 1.5 | 0.015em | Uppercase | Accent headings, metadata labels |
📌 Title Above Content (Page Title)
- Font: Playfair Display Bold
- Size: Match H1 (40px) for consistency
- Weight: 700
- Line Height: 1.25
- Letter Spacing: -0.01em
- Transform: Normal
- Breadcrumbs Below: See below
🧭 Breadcrumbs
- Font: Lato Regular / Medium
- Size: 14px
- Line Height: 1.4
- Letter Spacing: 0.05em
- Transform: All‑Caps or Small‑Caps for subtle separation
- Separator:
›or/in light grey (#B3B3B3)
🎯 Styling Principles
- Visual Hierarchy: H1 should feel like a visual anchor — 2.3–2.4× body size.
- Readability First: Keep line heights generous below 28px size; tighter for display sizes.
- Elegant Spacing: Slightly negative tracking for large Playfair headings adds sophistication.
- Responsive Scaling: Reduce ~10–15% on mobile for H1–H3 to keep balance.
💡 If you want, I can give you a ready‑to‑paste CSS snippet for Elementor or your theme customizer so these styles apply globally — no manual tweaks per section. That way your travel site will instantly lock into a consistent brand voice.