Typography

Fonts #

moo-theme uses three font families:

• Fraunces — headings (h1–h6). A display serif with warmth and personality.
• Cormorant Garamond — body text, navigation, and UI. An elegant text serif.
• Courier New — code blocks and the claude shortcode.

Both web fonts are loaded from Google Fonts.

Type scale #

The type scale uses Utopia fluid clamp values. Text scales smoothly between viewport widths of 320px and 1240px:

Prose elements #

All content renders inside a .prose wrapper. Here’s how standard elements look:

Headings #

Headings h2–h4 show a # anchor link on hover for deep linking.

Paragraphs #

Body text is left-aligned for readability (per WCAG 1.4.8). The maximum line length is 68 characters (--measure: 68ch).

Lists #

• Unordered lists use default bullets
• With consistent spacing

1. Ordered lists work too
2. With the same spacing

Blockquotes #

Blockquotes get an orange left border and a muted background. They’re italic by default.

Code #

Inline code gets a subtle background and border. Code blocks get a left accent border:

func main() {
    fmt.Println("Hello from moo-theme")
}

Tables #

Horizontal rules #

A simple line with generous spacing.