Skip to content
8531 TeamSite

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

Section titled “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

Section titled “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

Section titled “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

Section titled “Content Components”

Callout Boxes

Section titled “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

Section titled “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

Section titled “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

Section titled “Content Structure Best Practices”

Headings and Hierarchy

Section titled “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

Section titled “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

Section titled “Lists Organization”

Organize lists with clear categories and consistent formatting:

Category 1: Essential Items

Section titled “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

Section titled “Category 2: Advanced Features”
  • Feature 1: Technical details for experienced users
  • Feature 2: Integration capabilities and options

Formatting Examples

Section titled “Formatting Examples”

Before (Dense, Hard to Scan)

Section titled “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)

Section titled “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

Section titled “Usage Guidelines”

When to Use Callouts

Section titled “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

Section titled “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

Section titled “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

Section titled “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.