Content Formatting & Typography Guide

import Callout from ’../../../components/content/Callout.astro’; import SummaryBox from ’../../../components/content/SummaryBox.astro’; import CategoryHeader from ’../../../components/content/CategoryHeader.astro’;

Content Formatting & Typography Guide

This guide covers the enhanced typography system and content formatting components available for creating readable, skim-able documentation.

Enhanced Typography System

The site now uses the Inter font family with optimized line height (1.7), responsive sizing (16px base, 17px on larger screens), and a maximum content width of 65 characters for optimal reading.

Key Typography Features

• Custom Font Stack: Inter font for improved readability
• Responsive Typography: Larger text on wider screens
• Optimal Line Length: 65-character maximum width for comfortable reading
• Enhanced Spacing: Consistent spacing system throughout
• Improved Heading Hierarchy: Clear visual distinction between heading levels

Content Components

Callout Boxes

Use callout components to highlight important information, tips, warnings, or notes.

Callouts grab attention and make key information stand out from regular content. Use note callouts for additional context or supplementary information. Warning callouts are perfect for cautions or important considerations. Danger callouts should be used for critical information that users must not miss.

Summary Boxes

Use summary boxes to provide quick overviews or key takeaways.

- Use consistent formatting throughout your content - Break up long paragraphs into shorter, digestible chunks - Utilize headings and subheadings for better structure - Include callout boxes for important information

Category Headers

Use category headers to organize related content sections.

This helps readers quickly scan and navigate to relevant sections of your content.

Content Structure Best Practices

Headings and Hierarchy

Use a clear heading hierarchy to organize your content:

• H1: Main page title (one per page)
• H2: Major sections
• H3: Subsections within major sections
• H4: Specific topics within subsections

Paragraph Formatting

• Keep paragraphs to 2-4 sentences maximum
• Use white space effectively between sections
• Start with the most important information
• Use transition words to guide readers

Lists Organization

Organize lists with clear categories and consistent formatting:

Category 1: Essential Items

• Item 1: Brief description of the item’s purpose
• Item 2: Clear explanation of benefits and use cases

Category 2: Advanced Features

• Feature 1: Technical details for experienced users
• Feature 2: Integration capabilities and options

Formatting Examples

Before (Dense, Hard to Scan)

Here is a long paragraph that contains a lot of information without proper formatting or visual breaks which makes it difficult for readers to quickly scan and find the information they need especially when they are looking for specific details or trying to understand the main points of the content.

After (Well-Formatted, Easy to Scan)

This content uses proper spacing, clear headings, and visual elements to improve readability and skim-ability.

Key information is presented in:

• Bite-sized paragraphs that are easy to digest
• Clear headings that guide the reader through the content
• Visual elements like callouts that draw attention to important points
• Consistent formatting that creates a professional appearance

Usage Guidelines

When to Use Callouts

• Tips: Helpful advice, best practices, shortcuts
• Notes: Additional context, references, supplementary info
• Warnings: Potential issues, things to be careful about
• Danger: Critical information, consequences, important requirements

When to Use Summary Boxes

• Quick overviews at the beginning of long content
• Key takeaways at the end of sections
• Action items or next steps
• Reference information for quick lookup

Content Organization

1. Start with a clear introduction that sets expectations
2. Use consistent heading structure throughout
3. Break up long content with subheadings and visual elements
4. End with summaries or next steps
5. Include relevant links to additional resources

Testing Your Content

After implementing these formatting guidelines:

- [ ] Content is easy to scan quickly - [ ] Important information stands out visually - [ ] Paragraphs are concise and focused - [ ] Headings create clear structure - [ ] Callouts are used appropriately - [ ] Content flows logically

Test your content on different devices and screen sizes to ensure the responsive typography works effectively across all platforms.