Typography should feel natural, like words flowing on a page. Notice how this paragraph has comfortable line height and optimal character width. The text includes strong emphasis, italic styling, and links that invite exploration.

A second paragraph demonstrates the vertical rhythm between blocks of text. The spacing isn't cramped, nor is it too generous. It breathes.

Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects. Dieter Rams

Inline code like const fluid = true; integrates naturally with prose.

// Code blocks have room to breathe
function createTheme(name, tokens) {
  return {
    name,
    ...tokens,
    apply: () => {
      document.documentElement.dataset.theme = name;
    }
  };
}

• Modern CSS features: layers, custom properties, container queries
• Semantic HTML: meaningful elements over div soup
• Progressive enhancement: works without JavaScript
  • Base functionality first
  • JavaScript enhances, never gates
• Accessibility built-in, not bolted on

1. Define your design tokens
2. Apply semantic structure
3. Let the cascade do the work

Fluid

Flowing freely, adaptable, natural in movement.

Semantic

Relating to meaning; using elements for their intended purpose.

Progressive Enhancement

Building a solid foundation, then adding layers of capability.

You can highlight important information with the mark element.

Horizontal rules provide visual separation without being heavy-handed.