Typography

Font families, type scale, and usage guidelines.

3
Font Families
8
Type Scales
6
Font Weights
Web
Optimized

Font Families

Trajan Pro 3

Primary display font used for headings and brand elements

Source: Adobe TypekitWeights: Regular, Bold

Example

Green Arch

Usage

  • •Main page headings (h1, h2, h3)
  • •Brand name and logo text
  • •Navigation elements
  • •Call-to-action buttons
  • •Hero section headlines

Open Sans

Body text font used for paragraphs and readable content

Source: Google FontsWeights: 300, 400, 500, 600, 700, 800

Example

Effective pest control solutions for your home and business. Simple scheduling, clear pricing, and results you can count on.

Usage

  • •Paragraph text
  • •Body content
  • •Descriptions and details
  • •Form labels and inputs
  • •Card content

Inter / System Fonts

Fallback font stack for system compatibility

Source: System fontsWeights: Regular, Medium, Semi-bold, Bold

Example

System fallback font stack

Usage

  • •Fallback when primary fonts fail to load
  • •System UI elements
  • •Browser default rendering

Type Scale

Heading 1

Size: text-4xl md:text-5xl

Weight: font-bold

Line Height: leading-tight

Preview

Your Home, Pest-Free. Guaranteed.

Usage

Main page titles, hero headlines

Heading 2

Size: text-3xl md:text-4xl

Weight: font-bold

Line Height: leading-tight

Preview

Our Pest Control Services

Usage

Section titles, page headings

Heading 3

Size: text-2xl md:text-3xl

Weight: font-bold

Line Height: leading-tight

Preview

How It Works

Usage

Subsection titles, card headings

Heading 4

Size: text-xl md:text-2xl

Weight: font-bold

Line Height: leading-tight

Preview

What Sets Us Apart

Usage

Smaller headings, feature titles

Body Large

Size: text-lg md:text-xl

Weight: font-normal

Line Height: leading-relaxed

Preview

Effective pest control solutions for your home and business.

Usage

Large body text, descriptions

Body

Size: text-base

Weight: font-normal

Line Height: leading-relaxed

Preview

We treat all common household and commercial pests including ants, roaches, rodents, spiders, termites, and more.

Usage

Standard paragraph text

Body Small

Size: text-sm

Weight: font-normal

Line Height: leading-relaxed

Preview

Based on 247 verified reviews

Usage

Small text, captions, metadata

Caption

Size: text-xs

Weight: font-normal

Line Height: leading-tight

Preview

Trusted by 1,000+ Customers

Usage

Labels, badges, fine print

Font Loading

Trajan Pro 3

Loaded via Adobe Typekit in the root layout:

<link rel="stylesheet" href="https://use.typekit.net/lrv0shh.css" />

Open Sans

Loaded via Google Fonts in the root layout:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />

CSS Variables

Font families are defined in globals.css:

--font-inter: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', ...; --font-open-sans: 'Open Sans', ...;