Skip to main content
The Adosa Real Estate website uses a sophisticated typography system built around the Onest font family with fluid scaling using CSS clamp() for optimal readability across all devices.

​
Font Family

The entire site uses the Onest font family from Google Fonts, providing a modern, clean, and highly readable aesthetic.

​
Font Loading

Fonts are loaded in BaseLayout.astro with optimized preconnect:
BaseLayout.astro
<!-- Preconnect to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap"
  rel="stylesheet"
/>

​
CSS Variables

Font family is defined in theme variables:
theme.css
:root {
  --font-heading: 'Onest', sans-serif;
  --font-body: 'Onest', sans-serif;
  --font-main: var(--font-body); /* Alias for compatibility */
}

​
Fluid Typography Scale

The typography system uses clamp() for fluid scaling between mobile and desktop sizes:

​
Heading Styles

global.css
h1 {
  font-size: clamp(2.5rem, 5vw, var(--font-size-h1));
  font-weight: 700;
  line-height: 1.3;
}

h2 {
  font-size: clamp(2rem, 4vw, var(--font-size-h2));
  font-weight: 600;
  line-height: 1.3;
}

h3 {
  font-size: clamp(1.5rem, 3vw, var(--font-size-h3));
  font-weight: 600;
  line-height: 1.3;
}
The clamp() function automatically scales typography between minimum (mobile) and maximum (desktop) values based on viewport width.

​
Typography Scale Reference

H1 - Hero Headings

Desktop: 4.5rem (72px)
Mobile: 2.8rem (44.8px)
Weight: 700
Line Height: 1.3

H2 - Section Headings

Desktop: 3.5rem (56px)
Mobile: 2.2rem (35.2px)
Weight: 600
Line Height: 1.3

H3 - Subsection Headings

Desktop: 2rem (32px)
Mobile: 1.5rem (24px)
Weight: 600
Line Height: 1.3

Paragraph - Body Text

Desktop: 1.1rem (17.6px)
Line Height: 1.6
Opacity: 0.9 for subtle hierarchy

​
Font Weights

Onest supports a variable font weight range from 100-900: 
h1, h2, h3, h4, h5, h6 {
  font-weight: 600; /* Default heading weight */
}

h1 {
  font-weight: 700; /* Heavier weight for hero */
}

p, body {
  font-weight: 400; /* Normal weight for body */
}

​
Available Font Weights

WeightNameUsage
100-300Thin/LightDecorative elements
400RegularBody text, paragraphs
500MediumButtons, subtle emphasis
600SemiboldHeadings (H2-H6)
700BoldHero headings (H1)
800-900BlackReserved for special emphasis

​
Line Heights

Optimized for readability:
global.css
body {
  line-height: 1.6; /* Body text */
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3; /* Tighter for headings */
}

​
Text Styling

​
Letter Spacing

Subtle letter spacing for improved readability:
global.css
body {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

​
Text Colors

h1, h2, h3, h4, h5, h6 {
  color: var(--color-4); /* Primary text color */
}

p {
  color: var(--color-4);
  opacity: 0.9; /* Subtle hierarchy */
}
global.css
a {
  color: var(--color-3); /* Gold accent */
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.7;
}

​
Utility Classes

​
Text Alignment

.text-center {
  text-align: center;
}

​
Text Colors

.text-secondary {
  color: var(--color-2);
}

​
Dark Theme Text

global.css
.theme-dark p,
.theme-dark h2,
.theme-dark h3 {
  color: var(--color-4);
}

​
Text Reveal Animations

Typography can be animated with GSAP-powered reveal effects: 
<div class="text-reveal-wrapper">
  <h1 class="text-reveal">Luxury Properties</h1>
</div>
global.css
.text-reveal-wrapper {
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.text-reveal {
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}
See the Animations guide for more details.

​
Responsive Behavior

​
Mobile Typography

On screens below 768px:
global.css
@media (max-width: 768px) {
  h1 { font-size: var(--font-size-h1); /* 2.8rem */ }
  h2 { font-size: var(--font-size-h2); /* 2.2rem */ }
  h3 { font-size: var(--font-size-h3); /* 1.5rem */ }
  p  { font-size: var(--font-size-p); }
}
Always test typography on both mobile and desktop to ensure proper readability and hierarchy.

​
Usage Examples

​
Hero Section Typography

<section class="hero">
  <div class="text-reveal-wrapper">
    <h1 class="text-reveal">Premium Real Estate</h1>
  </div>
  <div class="text-reveal-wrapper">
    <p class="text-reveal">Discover luxury living on the Costa del Sol</p>
  </div>
</section>

​
Section Headings

<section>
  <h2>Featured Properties</h2>
  <p class="text-secondary">
    Explore our exclusive selection of premium homes
  </p>
</section>

​
Dark Theme Typography

<section data-theme="dark" class="theme-dark">
  <h2>Exceptional Service</h2>
  <p>Over 20 years of experience in luxury real estate</p>
</section>

​
Best Practices

Always use proper heading hierarchy (H1 → H2 → H3) for accessibility and SEO
Use the clamp() values defined in global.css instead of creating custom responsive sizes
Ensure sufficient contrast between text and background colors, especially with opacity: 0.9 on paragraphs
Verify typography renders correctly on actual mobile devices, not just browser dev tools
The global text-wrap: balance setting improves text layout—avoid overriding unless necessary

Theme System

Learn about color variables and theming

Animations

Add text reveal animations

Build docs developers (and LLMs) love

Get started for freeTalk to us