Typography

Our typography system that balances professional expertise with approachable readability across all content.

Font Families

Montserrat

Category: Sans Serif

Usage: Headings

Weights: 300, 400, 500, 600, 700, 800

A distinctive, modern geometric sans-serif used for headings and display text. Provides strong visual hierarchy and brand personality.

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

300 Weight

400 Weight

500 Weight

600 Weight

700 Weight

800 Weight

Inter

Category: Sans Serif

Usage: Body text and UI elements

Weights: 300, 400, 500, 600

A highly readable, neutral sans-serif optimized for body text and user interfaces. Designed specifically for digital screens.

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

300 Weight

400 Weight

500 Weight

600 Weight

System UI

Category: System

Usage: Fallback

Weights: 400, 500, 600, 700

Fallback system fonts that provide excellent performance and native feel across different platforms.

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Live Examples

How the typography system appears on houseplans.net

Modern House Plans for Contemporary Living

Discover our collection of thoughtfully designed house plans that blend functionality with modern aesthetics.

Design Principles

Our contemporary house plans emphasize open layouts, natural light, and seamless indoor-outdoor living. Each design is carefully crafted to maximize space efficiency while maintaining aesthetic appeal.

Open Floor Plans

Open concept designs create a sense of spaciousness and facilitate better family interaction. These layouts are perfect for entertaining and modern family life.

Key Features

• Spacious living areas with high ceilings
• Large windows for natural light optimization
• Seamless indoor-outdoor flow
• Flexible spaces for modern living

Interface Elements

Search House Plans

Contextual Actions

Plan Card Layout

[Plan Image]

The Meridian

3 bed • 2.5 bath • 2,247 sq ft

This stunning modern farmhouse combines rustic charm with contemporary convenience. Features include an open great room, gourmet kitchen, and spacious master suite.

$1,299

Type Scale

Headings

2.25rem / font-bold

Montserrat

This is h1 heading text

Primary page headings and hero titles

1.875rem / font-semibold

Montserrat

This is h2 heading text

Section headings and sub-titles

1.5rem / font-semibold

Montserrat

This is h3 heading text

Subsection headings

1.25rem / font-medium

Montserrat

This is h4 heading text

Card titles and smaller headings

1.125rem / font-medium

Montserrat

This is h5 heading text

Component headings

1rem / font-medium

Montserrat

This is h6 heading text

Small headings and labels

Body Text

Large

1.125rem / font-normal

Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Large body text for emphasis or lead paragraphs

Base

1rem / font-normal

Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Default body text size

Small

0.875rem / font-normal

Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Secondary text, captions, and metadata

0.75rem / font-normal

Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Fine print, badges, and micro-copy

Special Text

Button

0.875rem / font-medium

Inter

Button labels and call-to-action text

Input

0.875rem / font-normal

Inter

Form inputs and placeholders

Navigation

0.875rem / font-medium

Inter

Navigation Link

Navigation links and menu items

Font Weights

Light

300

The quick brown fox jumps over the lazy dog

Light weight for subtle text

Normal

400

The quick brown fox jumps over the lazy dog

Normal weight for body text

Medium

500

The quick brown fox jumps over the lazy dog

Medium weight for emphasis

Semibold

600

The quick brown fox jumps over the lazy dog

Semibold for headings and important text

Bold

700

The quick brown fox jumps over the lazy dog

Bold for strong emphasis

Line Heights

None

1 / leading-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Tight line height for headlines

Tight

1.25 / leading-tight

Tight line height for large text

Snug

1.375 / leading-snug

Snug line height for headings

Normal

1.5 / leading-normal

Normal line height for body text

Relaxed

1.625 / leading-relaxed

Relaxed line height for comfortable reading

Loose

2 / leading-loose

Loose line height for increased readability

Implementation

✓ Best Practices

Use Montserrat for all headings (H1-H6)
Use Inter for all body text and UI elements
Maintain consistent heading hierarchy
Keep body text between 45-75 characters per line
Use appropriate line heights for readability
Test across different screen sizes
Maintain adequate contrast ratios
Use contextual colors for success, danger, info, and warning states

✗ Avoid

Mixing font families within content
Using Montserrat for long-form body text
Skipping heading levels
Making body text smaller than 14px
Using excessive font weight variations
Ignoring accessibility requirements
Using brand colors for system feedback messages

Contextual Colors in Typography

Success Message

Your house plan has been successfully saved to your favorites.

Error Message

Unable to process your request. Please check your connection and try again.

Warning Message

This plan is currently out of stock. Consider similar alternatives below.

Info Message

New house plans are added every week. Subscribe to get notified.

CSS Classes

.font-heading { font-family: 'Montserrat', sans-serif; }

.font-body { font-family: 'Inter', sans-serif; }