Typography is the silent hero of every web design. In the ReeniClone portfolio we chose Rajdhani for headings and Rubik for body copy. This combination delivers high‑contrast visual hierarchy while staying legible on all devices. Below we dissect why these fonts work together and how you can apply the same principles.
Why Rajdhani Works for Headlines
Rajdhani is a condensed, geometric sans‑serif with a strong, industrial feel. Its large, bold weights (H1 ~60 px, H2 ~110 px) do three things:
- Grab attention: The condensed width lets you fit long titles in limited space.
- Reflect brand personality: The sharp corners echo the futuristic aesthetic of a tech‑focused portfolio.
- Maintain readability: Even at 110 px, the open counters prevent the text from feeling cramped.
Rubik for Body Text: Comfort and Clarity
Rubik’s slightly rounded terminals soften the harshness of Rajdhani, creating a comfortable reading experience. It works well in:
- Paragraphs (16‑18 px) with line‑height 1.6 for optimal scanning.
- Lists and captions where consistency with headings is essential.
- Forms and UI controls, ensuring legibility on small screens.
Balancing Scale and Spacing
When mixing two typefaces, spacing becomes critical. Here are the settings we applied on ReeniClone:
- Headings:
letter-spacing: -0.5pxfor tighter visual density. - Body:
letter-spacing: 0.2pxto improve readability on dark backgrounds. - Section margins: 40 px top & bottom to keep the layout airy.
Responsive Typography
Using Elementor’s responsive controls, we set different font sizes for each breakpoint:
| Device | H1 | H2 | Body |
|---|---|---|---|
| Desktop | 60 px | 110 px | 18 px |
| Tablet | 48 px | 90 px | 16 px |
| Mobile | 36 px | 70 px | 15 px |
This scaling ensures headings remain dominant without overwhelming the screen.
Practical Implementation Tips
- Load fonts via Google Fonts or self‑hosted
@font-faceto avoid flash‑of‑unstyled‑text (FOUT). - Set
font-display: swapfor performance. - Use Elementor’s Global Fonts panel to update both fonts site‑wide with one click.
Conclusion
By pairing a strong, futuristic heading font (Rajdhani) with a clean, readable body font (Rubik), you give your portfolio a professional edge that’s both eye‑catching and user‑friendly. Apply these guidelines to any dark‑themed site and watch your content hierarchy come alive.