CSS Lesson 7 – Typography Basics | Dataplexa

CSS PROPERTIES

Typography Basics

Style text with font families, sizes, weights, and spacing to create beautiful readable content.

Typography is how your website talks to visitors. Think of it like choosing the perfect outfit — the right font can make your content feel professional, friendly, playful, or elegant. The WanderLust team knows that beautiful typography makes travel destinations feel more enticing and booking forms easier to read.

    selector
    {
    font-family
    :
    'Arial', sans-serif
    ;
    }
  

What to style

Typography property

Font choice & fallback

Typography controls how text looks and feels. Every font choice affects readability — pick fonts that match your website's personality while keeping content easy to scan.

Font Families

Font families are groups of fonts that share similar designs. Like choosing between handwriting and typewriter text, each family creates a different mood. Browsers need backup options when your first choice isn't available.

/* WanderLust headings use modern sans-serif fonts */
h1 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Body text uses readable system fonts */
p {
  font-family: Georgia, 'Times New Roman', serif;
}

/* Navigation uses web-safe fonts */
nav {
  font-family: Verdana, Geneva, sans-serif;
}

What just happened?

Each element got a different font family with fallbacks. The heading uses Helvetica for modern appeal, body text uses Georgia for readability, and navigation uses Verdana for clarity. Try this: Change one font family to see how it affects the overall feel.

Font families fall into categories. sans-serif fonts (without decorative lines) feel modern and clean. serif fonts (with decorative lines) feel traditional and trustworthy. Always include a category as your final fallback.

Common Font Categories

Sans-serif

Clean, modern fonts without decorative strokes. Perfect for headings and digital reading.

Serif

Traditional fonts with decorative strokes. Excellent for long-form reading and formal content.

Monospace

Fixed-width fonts where every character takes equal space. Essential for displaying code.

Cursive

Script-like fonts that mimic handwriting. Use sparingly for decorative elements only.

Font Size and Weight

Font size controls how big text appears, while font weight controls how thick or thin letters look. Think of size like turning up volume and weight like making text bold or light.

/* WanderLust destination pages need clear hierarchy */
.hero-title {
  font-size: 48px;
  font-weight: 900; /* Extra bold for impact */
}

.section-heading {
  font-size: 24px;
  font-weight: 700; /* Bold but not overpowering */
}

.body-text {
  font-size: 16px;
  font-weight: 400; /* Normal reading weight */
}

.caption {
  font-size: 14px;
  font-weight: 300; /* Light for subtle information */
}

What just happened?

Different font sizes and weights created a clear hierarchy. The hero title dominates with large size and heavy weight, while the caption stays subtle with smaller, lighter text. Try this: Change the hero title to font-weight: 300 and see how it loses impact.

Font weight uses numbers from 100 (ultra-light) to 900 (ultra-bold). Most fonts support 400 (normal) and 700 (bold). Some fonts offer the full range for fine-tuned control over text emphasis.

Line Height and Letter Spacing

Line height controls vertical space between lines of text — like double-spacing in a document. Letter spacing adjusts horizontal space between individual letters. Both affect readability dramatically.

/* WanderLust wants comfortable reading experience */
.readable-paragraph {
  font-size: 16px;
  line-height: 1.6; /* 60% more space than font size */
  letter-spacing: 0.02em; /* Slight letter spacing */
}

.tight-heading {
  font-size: 32px;
  line-height: 1.2; /* Tighter for headings */
  letter-spacing: -0.01em; /* Slightly closer letters */
}

.spaced-navigation {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.1em; /* Wide spacing for clarity */
  text-transform: uppercase;
}

What just happened?

Each text element got custom spacing for its purpose. The paragraph uses comfortable line height for reading, the heading uses tight spacing for impact, and navigation uses wide letter spacing for elegance. Try this: Change the paragraph line-height to 1.0 and notice how cramped it becomes.

Line height typically ranges from 1.2 (tight) to 1.8 (loose). Body text usually works best around 1.5-1.6, while headings can go tighter at 1.2-1.3. Letter spacing uses `em` units — positive values spread letters apart, negative values pull them closer.

Text Alignment and Decoration

Text alignment positions text within its container — like choosing left, center, or right alignment in a word processor. Text decoration adds visual effects like underlines, strikethrough, or removes default link styling.

/* WanderLust homepage needs varied text alignment */
.hero-section {
  text-align: center; /* Center for maximum impact */
}

.destination-card {
  text-align: left; /* Left for easy reading */
}

.testimonial {
  text-align: right; /* Right for elegant quotes */
}

.price-original {
  text-decoration: line-through; /* Strike through old price */
  color: #64748b;
}

.clean-link {
  text-decoration: none; /* Remove default underline */
  color: #0ea5e9;
}

What just happened?

Different text alignments created visual hierarchy and flow. The hero centers for impact, the card aligns left for readability, and the testimonial aligns right for elegance. Text decoration struck through the old price and cleaned up the link styling. Try this: Change the testimonial to text-align: center and see how it affects the design balance.

Text alignment affects readability and visual flow. Center alignment works great for headlines and calls-to-action. Left alignment is most readable for paragraphs. Right alignment creates elegant emphasis but should be used sparingly.

Text Transform Options

Text transform changes letter casing without rewriting HTML content. Perfect for styling navigation menus, buttons, or creating consistent formatting across your site.

/* WanderLust navigation and buttons need consistent casing */
.main-nav {
  text-transform: uppercase; /* MAKES TEXT ALL CAPS */
  letter-spacing: 0.05em;
}

.page-title {
  text-transform: capitalize; /* Capitalizes First Letter Of Each Word */
}

.fine-print {
  text-transform: lowercase; /* makes everything lowercase */
}

.brand-name {
  text-transform: none; /* Preserves original casing */
}

Typography Best Practices

Good typography creates hierarchy, improves readability, and reinforces your brand personality. These guidelines help you make smart choices that enhance user experience rather than distract from your content.

Typography Golden Rules

Limit font families: Use maximum 2-3 fonts per site to maintain consistency
Create hierarchy: Make headings significantly larger than body text
Mind line length: Keep paragraphs around 45-75 characters wide for comfortable reading
Test on devices: Typography that looks great on desktop might be too small on mobile

Responsive Typography

Text needs to scale appropriately across different screen sizes. What's readable on desktop might be tiny on mobile, while mobile-optimized text might feel huge on large screens.

/* WanderLust responsive text sizing */
.hero-title {
  font-size: 32px; /* Base mobile size */
  line-height: 1.2;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 48px; /* Larger on tablets */
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 64px; /* Largest on desktop */
  }
}

Good typography feels invisible when done right — readers focus on your content, not fighting to read it. Start with system fonts and comfortable sizes, then refine based on your specific needs and brand personality.

Quiz

Up Next: CSS Box Model

Master padding, margins, borders, and content areas to control element spacing and layout precisely.

← Previous Course Index Next →