Markdown Print Styles and PDF Formatting: Complete Guide for Professional Document Output and Print-Ready Publications

Print styles and PDF formatting for Markdown documents enable professional document output that maintains design consistency, typography excellence, and layout precision across digital screens and physical publications. While Markdown provides semantic structure ideal for web display, specialized CSS print media queries and PDF generation techniques ensure optimal presentation when documents transition from screen to paper or professional PDF distribution.

Why Master Print Styles for Markdown?

Professional print formatting provides essential benefits for document publication:

Professional Publications: Create print-ready documents that maintain brand standards and typography excellence
Consistent Output: Ensure reliable formatting across different PDF generators and printing systems
Cost-Effective Publishing: Optimize layouts for efficient paper usage and reduced printing costs
Accessibility Compliance: Implement print styles that support high contrast and readable typography
Cross-Platform Reliability: Generate consistent results across browsers and PDF conversion tools

Understanding Print CSS Fundamentals

Print Media Queries and Page Control

CSS print media queries provide comprehensive control over document appearance in print format:

/* comprehensive-print-styles.css - Professional print formatting */

/* Print-specific CSS variables */
@media print {
  :root {
    --print-font-family: Georgia, 'Times New Roman', serif;
    --print-font-size: 12pt;
    --print-line-height: 1.4;
    --print-margin: 1in;
    --print-header-height: 0.5in;
    --print-footer-height: 0.5in;
    
    --print-primary-color: #000000;
    --print-secondary-color: #333333;
    --print-accent-color: #666666;
    --print-border-color: #000000;
    
    --print-heading-size-h1: 18pt;
    --print-heading-size-h2: 16pt;
    --print-heading-size-h3: 14pt;
    --print-heading-size-h4: 12pt;
  }
  
  /* Page setup and margins */
  @page {
    size: 8.5in 11in; /* US Letter size */
    margin: var(--print-margin);
    
    /* Headers and footers */
    @top-left {
      content: "Document Title";
      font: 10pt var(--print-font-family);
      color: var(--print-secondary-color);
    }
    
    @top-right {
      content: "Page " counter(page);
      font: 10pt var(--print-font-family);
      color: var(--print-secondary-color);
    }
    
    @bottom-center {
      content: "© 2025 Company Name - Confidential";
      font: 8pt var(--print-font-family);
      color: var(--print-accent-color);
    }
  }
  
  /* A4 page size alternative */
  @page :first {
    size: A4;
    margin-top: 2in; /* Extra space for letterhead */
  }
  
  /* Chapter pages */
  @page chapter {
    @bottom-center {
      content: none;
    }
    
    @top-left {
      content: attr(data-chapter-title);
    }
  }
  
  /* Base document styles */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  body {
    font-family: var(--print-font-family);
    font-size: var(--print-font-size);
    line-height: var(--print-line-height);
    color: var(--print-primary-color);
    background: white;
    margin: 0;
    padding: 0;
  }
  
  /* Typography optimization for print */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--print-font-family);
    font-weight: bold;
    color: var(--print-primary-color);
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-top: 24pt;
    margin-bottom: 12pt;
  }
  
  h1 {
    font-size: var(--print-heading-size-h1);
    page-break-before: always;
    counter-reset: section;
  }
  
  h1:first-child {
    page-break-before: avoid;
    margin-top: 0;
  }
  
  h2 {
    font-size: var(--print-heading-size-h2);
    page-break-before: avoid;
    counter-increment: section;
    counter-reset: subsection;
  }
  
  h2::before {
    content: counter(section) ". ";
  }
  
  h3 {
    font-size: var(--print-heading-size-h3);
    counter-increment: subsection;
  }
  
  h3::before {
    content: counter(section) "." counter(subsection) " ";
  }
  
  h4 {
    font-size: var(--print-heading-size-h4);
  }
  
  /* Paragraph and text formatting */
  p {
    margin: 0 0 12pt 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    orphans: 3;
    widows: 3;
  }
  
  p:last-child {
    margin-bottom: 0;
  }
  
  /* List formatting */
  ul, ol {
    margin: 12pt 0;
    padding-left: 24pt;
    page-break-inside: avoid;
  }
  
  li {
    margin-bottom: 6pt;
    page-break-inside: avoid;
    orphans: 2;
    widows: 2;
  }
  
  /* Table formatting */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 12pt 0;
    page-break-inside: avoid;
    font-size: 10pt;
  }
  
  table, th, td {
    border: 1pt solid var(--print-border-color);
  }
  
  th {
    background: #f0f0f0 !important;
    font-weight: bold;
    padding: 6pt;
    text-align: left;
  }
  
  td {
    padding: 4pt 6pt;
    vertical-align: top;
  }
  
  /* Table headers on new pages */
  thead {
    display: table-header-group;
  }
  
  tfoot {
    display: table-footer-group;
  }
  
  /* Code formatting */
  code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10pt;
    background: #f5f5f5;
    padding: 1pt 2pt;
    border: 0.5pt solid #cccccc;
  }
  
  pre {
    background: #f8f8f8;
    border: 1pt solid #cccccc;
    padding: 8pt;
    margin: 12pt 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    page-break-inside: avoid;
    font-family: 'Courier New', Courier, monospace;
    font-size: 9pt;
    line-height: 1.2;
  }
  
  pre code {
    background: none;
    border: none;
    padding: 0;
  }
  
  /* Blockquote formatting */
  blockquote {
    border-left: 3pt solid var(--print-border-color);
    margin: 12pt 0 12pt 12pt;
    padding-left: 12pt;
    font-style: italic;
    page-break-inside: avoid;
  }
  
  /* Image handling */
  img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  
  figure {
    margin: 12pt 0;
    page-break-inside: avoid;
    text-align: center;
  }
  
  figcaption {
    font-size: 10pt;
    font-style: italic;
    margin-top: 6pt;
    text-align: center;
  }
  
  /* Hide web-only elements */
  .no-print,
  .screen-only,
  nav,
  .navigation,
  .sidebar,
  .advertisement,
  .social-share,
  button:not(.print-button),
  input[type="search"],
  .search-form {
    display: none !important;
  }
  
  /* Show print-only elements */
  .print-only {
    display: block !important;
  }
  
  /* URL display for links */
  a:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: var(--print-secondary-color);
    text-decoration: none;
  }
  
  a[href^="#"]:after,
  a[href^="javascript:"]:after,
  a[href=""]:after {
    content: "";
  }
  
  /* Page break controls */
  .page-break-before {
    page-break-before: always;
  }
  
  .page-break-after {
    page-break-after: always;
  }
  
  .page-break-inside-avoid {
    page-break-inside: avoid;
  }
  
  .keep-together {
    page-break-inside: avoid;
    display: block;
  }
  
  /* Chapter and section breaks */
  .chapter {
    page: chapter;
    page-break-before: always;
  }
  
  .section {
    page-break-before: avoid;
  }
  
  /* Table of contents styling */
  .toc {
    page-break-after: always;
  }
  
  .toc-entry {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6pt;
    border-bottom: 1pt dotted var(--print-accent-color);
    padding-bottom: 2pt;
  }
  
  .toc-title {
    flex-grow: 1;
    margin-right: 12pt;
  }
  
  .toc-page {
    flex-shrink: 0;
    font-weight: bold;
  }
  
  /* Print optimization for specific content types */
  .callout,
  .alert,
  .note {
    border: 2pt solid var(--print-border-color);
    padding: 8pt;
    margin: 12pt 0;
    background: #f9f9f9 !important;
    page-break-inside: avoid;
  }
  
  .callout-title {
    font-weight: bold;
    margin-bottom: 6pt;
  }
  
  /* Footnote styling */
  .footnote {
    font-size: 9pt;
    margin-top: 24pt;
    border-top: 1pt solid var(--print-border-color);
    padding-top: 6pt;
  }
  
  .footnote-ref {
    vertical-align: super;
    font-size: 8pt;
    line-height: 0;
  }
  
  /* Index styling */
  .index {
    column-count: 2;
    column-gap: 24pt;
    column-rule: 1pt solid var(--print-accent-color);
  }
  
  .index-entry {
    margin-bottom: 3pt;
    text-indent: -12pt;
    margin-left: 12pt;
  }
  
  .index-subentry {
    margin-left: 12pt;
    font-size: 10pt;
  }
}

/* High-resolution print styles */
@media print and (min-resolution: 300dpi) {
  body {
    font-size: 11pt;
  }
  
  h1 { font-size: 17pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 13pt; }
  
  code, pre {
    font-size: 8pt;
  }
}

/* Print styles for different paper sizes */
@media print and (width: 210mm) { /* A4 width */
  :root {
    --print-margin: 25mm;
  }
  
  @page {
    size: A4;
    margin: var(--print-margin);
  }
}

@media print and (width: 8.5in) { /* US Letter width */
  :root {
    --print-margin: 1in;
  }
  
  @page {
    size: letter;
    margin: var(--print-margin);
  }
}

Advanced Page Layout and Typography

Professional document formatting with sophisticated layout control:

/* advanced-print-layout.css - Enterprise document formatting */

@media print {
  /* Document structure variables */
  :root {
    --document-title: "Technical Documentation";
    --document-version: "v2.1";
    --document-date: "September 2025";
    --company-name: "Professional Publishing";
    
    --page-number-format: decimal;
    --chapter-number-format: upper-roman;
    --section-number-format: decimal;
  }
  
  /* Multi-page document structure */
  @page cover {
    margin: 0;
    
    @top-left { content: none; }
    @top-right { content: none; }
    @bottom-center { content: none; }
  }
  
  @page toc {
    @top-left {
      content: "Table of Contents";
    }
    
    @bottom-center {
      content: "Page " counter(page, lower-roman);
    }
  }
  
  @page chapter:first {
    margin-top: 2in;
    
    @top-left { content: none; }
  }
  
  @page chapter:left {
    margin-left: 1.5in;
    margin-right: 1in;
    
    @top-left {
      content: var(--document-title);
    }
    
    @top-right { content: none; }
  }
  
  @page chapter:right {
    margin-left: 1in;
    margin-right: 1.5in;
    
    @top-left { content: none; }
    
    @top-right {
      content: "Chapter " counter(chapter, var(--chapter-number-format));
    }
  }
  
  /* Advanced counters */
  body {
    counter-reset: chapter 0 page 1;
  }
  
  .cover-page {
    page: cover;
    page-break-after: always;
  }
  
  .table-of-contents {
    page: toc;
    counter-reset: page 1;
    page-break-after: always;
  }
  
  .chapter {
    page: chapter;
    page-break-before: always;
    counter-increment: chapter;
    counter-reset: section 0 subsection 0;
  }
  
  /* Chapter title pages */
  .chapter-title {
    font-size: 24pt;
    font-weight: bold;
    text-align: center;
    margin-top: 2in;
    margin-bottom: 1in;
    page-break-after: avoid;
  }
  
  .chapter-title::before {
    content: "Chapter " counter(chapter, var(--chapter-number-format));
    display: block;
    font-size: 18pt;
    font-weight: normal;
    margin-bottom: 0.5in;
    color: var(--print-secondary-color);
  }
  
  .chapter-summary {
    font-style: italic;
    text-align: center;
    margin: 1in 2in;
    page-break-after: always;
  }
  
  /* Advanced section numbering */
  .section-header {
    counter-increment: section;
    counter-reset: subsection 0;
  }
  
  .section-header::before {
    content: counter(chapter) "." counter(section) " ";
    font-weight: bold;
  }
  
  .subsection-header {
    counter-increment: subsection;
  }
  
  .subsection-header::before {
    content: counter(chapter) "." counter(section) "." counter(subsection) " ";
  }
  
  /* Professional table formatting */
  .data-table {
    font-size: 9pt;
    margin: 18pt 0;
    width: 100%;
  }
  
  .data-table th {
    background: #e0e0e0 !important;
    font-weight: bold;
    text-align: center;
    padding: 8pt 6pt;
    border: 1pt solid var(--print-border-color);
  }
  
  .data-table td {
    padding: 4pt 6pt;
    border: 0.5pt solid var(--print-accent-color);
    text-align: left;
  }
  
  .data-table .numeric {
    text-align: right;
    font-family: 'Courier New', monospace;
  }
  
  .data-table .centered {
    text-align: center;
  }
  
  /* Table captions and numbering */
  .table-caption {
    font-weight: bold;
    margin-bottom: 6pt;
    text-align: center;
    counter-increment: table;
  }
  
  .table-caption::before {
    content: "Table " counter(chapter) "-" counter(table) ": ";
  }
  
  /* Figure numbering and captions */
  .figure {
    counter-increment: figure;
    text-align: center;
    page-break-inside: avoid;
    margin: 18pt 0;
  }
  
  .figure-caption {
    font-style: italic;
    font-size: 10pt;
    margin-top: 6pt;
    counter-increment: figure;
  }
  
  .figure-caption::before {
    content: "Figure " counter(chapter) "-" counter(figure) ": ";
    font-weight: bold;
  }
  
  /* Code listing formatting */
  .code-listing {
    page-break-inside: avoid;
    counter-increment: listing;
  }
  
  .code-listing-title {
    font-weight: bold;
    margin-bottom: 6pt;
    border-bottom: 1pt solid var(--print-accent-color);
    padding-bottom: 3pt;
  }
  
  .code-listing-title::before {
    content: "Listing " counter(chapter) "-" counter(listing) ": ";
  }
  
  .code-listing pre {
    margin-top: 0;
    border: 1pt solid var(--print-border-color);
    background: #f8f8f8 !important;
  }
  
  /* Cross-references */
  .ref-chapter::before {
    content: "Chapter " target-counter(attr(href), chapter);
  }
  
  .ref-section::before {
    content: "Section " target-counter(attr(href), chapter) "." target-counter(attr(href), section);
  }
  
  .ref-page::after {
    content: " (page " target-counter(attr(href), page) ")";
    font-style: italic;
    color: var(--print-secondary-color);
  }
  
  /* Appendix formatting */
  .appendix {
    page-break-before: always;
    counter-reset: section 0;
    counter-increment: appendix;
  }
  
  .appendix-title::before {
    content: "Appendix " counter(appendix, upper-alpha) ": ";
  }
  
  /* Glossary and index */
  .glossary-term {
    font-weight: bold;
    text-indent: -18pt;
    margin-left: 18pt;
    margin-bottom: 6pt;
  }
  
  .glossary-definition {
    margin-bottom: 12pt;
    margin-left: 18pt;
  }
  
  /* Bibliography and references */
  .bibliography {
    page-break-before: always;
  }
  
  .reference {
    text-indent: -24pt;
    margin-left: 24pt;
    margin-bottom: 12pt;
    counter-increment: reference;
  }
  
  .reference::before {
    content: "[" counter(reference) "] ";
    font-weight: bold;
  }
  
  /* Mathematical equations */
  .equation {
    text-align: center;
    margin: 18pt 0;
    counter-increment: equation;
  }
  
  .equation::after {
    content: " (" counter(chapter) "." counter(equation) ")";
    float: right;
    margin-right: 12pt;
  }
  
  /* Warning and note boxes */
  .warning-box {
    border: 2pt solid #cc0000 !important;
    background: #ffe6e6 !important;
    padding: 12pt;
    margin: 18pt 0;
    page-break-inside: avoid;
  }
  
  .warning-box::before {
    content: "⚠ WARNING: ";
    font-weight: bold;
    color: #cc0000;
  }
  
  .note-box {
    border: 1pt solid var(--print-accent-color);
    background: #f0f0f0 !important;
    padding: 8pt;
    margin: 12pt 0;
    font-size: 10pt;
  }
  
  .note-box::before {
    content: "Note: ";
    font-weight: bold;
  }
  
  /* Signature lines */
  .signature-line {
    border-bottom: 1pt solid var(--print-border-color);
    width: 3in;
    height: 24pt;
    margin: 24pt 0 6pt 0;
    display: inline-block;
  }
  
  .signature-label {
    font-size: 10pt;
    color: var(--print-secondary-color);
  }
  
  /* Legal document formatting */
  .legal-section {
    margin-left: 0.5in;
    text-indent: -0.5in;
  }
  
  .legal-subsection {
    margin-left: 1in;
    text-indent: -0.5in;
  }
  
  .legal-paragraph {
    margin-left: 1.5in;
    text-indent: -0.5in;
  }
}

PDF Generation and Automation

Command-Line PDF Generation

Automated PDF generation from Markdown using various tools:

#!/bin/bash
# markdown-to-pdf-generator.sh - Professional PDF generation script

# Configuration variables
INPUT_DIR="./markdown-docs"
OUTPUT_DIR="./pdf-output"
STYLES_DIR="./print-styles"
TEMPLATE_DIR="./pdf-templates"

# Pandoc-based PDF generation
generate_pdf_pandoc() {
    local input_file="$1"
    local output_file="$2"
    local template="${3:-default}"
    
    echo "Generating PDF with Pandoc: $input_file -> $output_file"
    
    pandoc "$input_file" \
        --pdf-engine=xelatex \
        --template="$TEMPLATE_DIR/${template}.latex" \
        --css="$STYLES_DIR/print-styles.css" \
        --metadata-file="$TEMPLATE_DIR/metadata.yaml" \
        --table-of-contents \
        --toc-depth=3 \
        --number-sections \
        --highlight-style=tango \
        --variable geometry:margin=1in \
        --variable fontsize:12pt \
        --variable documentclass:article \
        --variable papersize:letter \
        --filter pandoc-crossref \
        --filter pandoc-citeproc \
        --output "$output_file"
}

# Puppeteer-based PDF generation
generate_pdf_puppeteer() {
    local input_file="$1"
    local output_file="$2"
    
    echo "Generating PDF with Puppeteer: $input_file -> $output_file"
    
    node -e "
const puppeteer = require('puppeteer');
const markdown = require('markdown-it')();
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  
  const page = await browser.newPage();
  
  // Read and convert Markdown
  const markdownContent = fs.readFileSync('$input_file', 'utf8');
  const htmlContent = markdown.render(markdownContent);
  
  // Read CSS styles
  const printStyles = fs.readFileSync('$STYLES_DIR/comprehensive-print-styles.css', 'utf8');
  const layoutStyles = fs.readFileSync('$STYLES_DIR/advanced-print-layout.css', 'utf8');
  
  // Create complete HTML document
  const fullHtml = \`
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Document</title>
    <style>
        \${printStyles}
        \${layoutStyles}
        
        @media screen {
            body { 
                max-width: 8.5in; 
                margin: 0 auto; 
                padding: 1in;
                background: white;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body class='typography-enhanced'>
    \${htmlContent}
</body>
</html>\`;
  
  await page.setContent(fullHtml, { waitUntil: 'networkidle2' });
  
  await page.pdf({
    path: '$output_file',
    format: 'Letter',
    margin: {
      top: '1in',
      right: '1in',
      bottom: '1in',
      left: '1in'
    },
    printBackground: true,
    preferCSSPageSize: true,
    displayHeaderFooter: true,
    headerTemplate: \`
      <div style='font-size: 10px; width: 100%; text-align: center; color: #666;'>
        <span class='title'></span>
      </div>\`,
    footerTemplate: \`
      <div style='font-size: 10px; width: 100%; text-align: center; color: #666;'>
        Page <span class='pageNumber'></span> of <span class='totalPages'></span>
      </div>\`
  });
  
  await browser.close();
  console.log('PDF generated successfully');
})();
" 2>/dev/null
}

# WeasyPrint-based PDF generation
generate_pdf_weasyprint() {
    local input_file="$1"
    local output_file="$2"
    
    echo "Generating PDF with WeasyPrint: $input_file -> $output_file"
    
    # Convert Markdown to HTML first
    local html_file="${input_file%.*}.html"
    
    python3 -c "
import markdown
from weasyprint import HTML, CSS
from weasyprint.text.fonts import FontConfiguration

# Read Markdown file
with open('$input_file', 'r', encoding='utf-8') as f:
    md_content = f.read()

# Convert to HTML
md = markdown.Markdown(extensions=[
    'toc',
    'tables', 
    'fenced_code',
    'codehilite',
    'attr_list'
])
html_content = md.convert(md_content)

# Create complete HTML document
full_html = f'''
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Document</title>
    <link rel='stylesheet' href='$STYLES_DIR/comprehensive-print-styles.css'>
    <link rel='stylesheet' href='$STYLES_DIR/advanced-print-layout.css'>
</head>
<body>
    {html_content}
</body>
</html>
'''

# Generate PDF
font_config = FontConfiguration()
html_doc = HTML(string=full_html, base_url='$PWD/')
css_files = [
    CSS('$STYLES_DIR/comprehensive-print-styles.css'),
    CSS('$STYLES_DIR/advanced-print-layout.css')
]

html_doc.write_pdf(
    '$output_file',
    stylesheets=css_files,
    font_config=font_config
)

print('PDF generated successfully with WeasyPrint')
"
}

# Prince XML-based PDF generation (commercial)
generate_pdf_prince() {
    local input_file="$1"
    local output_file="$2"
    
    echo "Generating PDF with Prince XML: $input_file -> $output_file"
    
    # Convert Markdown to HTML
    local html_file="${input_file%.*}.html"
    markdown "$input_file" > "$html_file"
    
    # Generate PDF with Prince
    prince \
        --css="$STYLES_DIR/comprehensive-print-styles.css" \
        --css="$STYLES_DIR/advanced-print-layout.css" \
        --media=print \
        --pdf-profile="PDF/A-1a" \
        --pdf-title="Professional Document" \
        --pdf-author="Document Generator" \
        --pdf-keywords="Markdown, PDF, Professional" \
        --pdf-creator="Prince XML" \
        "$html_file" \
        --output="$output_file"
    
    # Clean up temporary HTML
    rm "$html_file"
}

# Batch processing function
process_markdown_files() {
    local method="${1:-pandoc}"
    local template="${2:-default}"
    
    # Create output directory
    mkdir -p "$OUTPUT_DIR"
    
    # Process all Markdown files
    find "$INPUT_DIR" -name "*.md" -type f | while read -r input_file; do
        local filename=$(basename "$input_file" .md)
        local output_file="$OUTPUT_DIR/${filename}.pdf"
        
        case "$method" in
            "pandoc")
                generate_pdf_pandoc "$input_file" "$output_file" "$template"
                ;;
            "puppeteer")
                generate_pdf_puppeteer "$input_file" "$output_file"
                ;;
            "weasyprint")
                generate_pdf_weasyprint "$input_file" "$output_file"
                ;;
            "prince")
                generate_pdf_prince "$input_file" "$output_file"
                ;;
            *)
                echo "Unknown method: $method"
                echo "Available methods: pandoc, puppeteer, weasyprint, prince"
                return 1
                ;;
        esac
        
        # Validate PDF generation
        if [ -f "$output_file" ]; then
            local file_size=$(stat -f%z "$output_file" 2>/dev/null || stat -c%s "$output_file" 2>/dev/null)
            if [ "$file_size" -gt 1024 ]; then
                echo "✓ Successfully generated: $output_file ($file_size bytes)"
            else
                echo "✗ Failed to generate valid PDF: $output_file"
            fi
        else
            echo "✗ PDF generation failed: $output_file"
        fi
    done
}

# Quality assurance checks
validate_pdf_output() {
    local pdf_file="$1"
    
    echo "Validating PDF: $pdf_file"
    
    # Check file exists and has content
    if [ ! -f "$pdf_file" ]; then
        echo "✗ PDF file does not exist"
        return 1
    fi
    
    local file_size=$(stat -f%z "$pdf_file" 2>/dev/null || stat -c%s "$pdf_file" 2>/dev/null)
    if [ "$file_size" -lt 1024 ]; then
        echo "✗ PDF file too small ($file_size bytes)"
        return 1
    fi
    
    # Validate PDF structure
    if command -v pdfinfo >/dev/null 2>&1; then
        local page_count=$(pdfinfo "$pdf_file" 2>/dev/null | grep "Pages:" | awk '{print $2}')
        if [ "$page_count" -gt 0 ]; then
            echo "✓ PDF contains $page_count pages"
        else
            echo "✗ PDF appears to be corrupted"
            return 1
        fi
    fi
    
    # Check for text content
    if command -v pdftotext >/dev/null 2>&1; then
        local text_length=$(pdftotext "$pdf_file" - 2>/dev/null | wc -c)
        if [ "$text_length" -gt 100 ]; then
            echo "✓ PDF contains text content ($text_length characters)"
        else
            echo "⚠ PDF may not contain extractable text"
        fi
    fi
    
    echo "✓ PDF validation completed"
}

# Main execution
main() {
    local method="${1:-pandoc}"
    local template="${2:-default}"
    local validate="${3:-false}"
    
    echo "=== Markdown to PDF Generator ==="
    echo "Method: $method"
    echo "Template: $template"
    echo "Input Directory: $INPUT_DIR"
    echo "Output Directory: $OUTPUT_DIR"
    echo "=================================="
    
    # Check dependencies
    case "$method" in
        "pandoc")
            if ! command -v pandoc >/dev/null 2>&1; then
                echo "Error: Pandoc is not installed"
                exit 1
            fi
            ;;
        "puppeteer")
            if ! command -v node >/dev/null 2>&1; then
                echo "Error: Node.js is not installed"
                exit 1
            fi
            ;;
        "weasyprint")
            if ! command -v python3 >/dev/null 2>&1; then
                echo "Error: Python 3 is not installed"
                exit 1
            fi
            ;;
        "prince")
            if ! command -v prince >/dev/null 2>&1; then
                echo "Error: Prince XML is not installed"
                exit 1
            fi
            ;;
    esac
    
    # Process files
    process_markdown_files "$method" "$template"
    
    # Validate output if requested
    if [ "$validate" = "true" ]; then
        echo "=== Validating Generated PDFs ==="
        find "$OUTPUT_DIR" -name "*.pdf" -type f | while read -r pdf_file; do
            validate_pdf_output "$pdf_file"
        done
    fi
    
    echo "=== Generation Complete ==="
}

# Execute if script is run directly
if [ "${BASH_SOURCE[0]}" = "${0}" ]; then
    main "$@"
fi

GitHub Actions Workflow for PDF Generation

Automated PDF generation in CI/CD pipelines:

# .github/workflows/generate-pdfs.yml
name: Generate PDF Documentation

on:
  push:
    branches: [main]
    paths: ['docs/**/*.md']
  pull_request:
    branches: [main]
    paths: ['docs/**/*.md']
  workflow_dispatch:
    inputs:
      pdf_method:
        description: 'PDF generation method'
        required: true
        default: 'puppeteer'
        type: choice
        options:
          - 'puppeteer'
          - 'pandoc'
          - 'weasyprint'

jobs:
  generate-pdfs:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout repository
      uses: actions/checkout@v4
      
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'
        cache: 'npm'
        
    - name: Install Node.js dependencies
      run: |
        npm install -g puppeteer markdown-it
        npm install puppeteer markdown-it
        
    - name: Setup Python
      uses: actions/setup-python@v4
      with:
        python-version: '3.11'
        cache: 'pip'
        
    - name: Install Python dependencies
      run: |
        pip install weasyprint markdown beautifulsoup4
        
    - name: Install Pandoc
      uses: r-lib/actions/setup-pandoc@v2
      with:
        pandoc-version: 'latest'
        
    - name: Install LaTeX for Pandoc
      run: |
        sudo apt-get update
        sudo apt-get install -y texlive-latex-recommended \
                               texlive-latex-extra \
                               texlive-fonts-recommended \
                               texlive-xetex
    
    - name: Create output directories
      run: |
        mkdir -p pdf-output
        mkdir -p pdf-reports
        
    - name: Generate PDFs with Puppeteer
      if: github.event.inputs.pdf_method == 'puppeteer' || github.event.inputs.pdf_method == ''
      run: |
        node generate-pdfs.js
        
    - name: Generate PDFs with Pandoc
      if: github.event.inputs.pdf_method == 'pandoc'
      run: |
        for file in docs/**/*.md; do
          filename=$(basename "$file" .md)
          pandoc "$file" \
            --pdf-engine=xelatex \
            --css=styles/print-styles.css \
            --table-of-contents \
            --number-sections \
            --variable geometry:margin=1in \
            --output "pdf-output/${filename}.pdf"
        done
        
    - name: Generate PDFs with WeasyPrint
      if: github.event.inputs.pdf_method == 'weasyprint'
      run: |
        python generate-pdfs-weasyprint.py
        
    - name: Validate PDF files
      run: |
        echo "=== PDF Generation Report ===" > pdf-reports/generation-report.txt
        echo "Generated at: $(date)" >> pdf-reports/generation-report.txt
        echo "Method: $" >> pdf-reports/generation-report.txt
        echo "" >> pdf-reports/generation-report.txt
        
        total_files=0
        successful_files=0
        
        for pdf in pdf-output/*.pdf; do
          if [ -f "$pdf" ]; then
            total_files=$((total_files + 1))
            file_size=$(stat -c%s "$pdf")
            
            if [ "$file_size" -gt 1024 ]; then
              successful_files=$((successful_files + 1))
              echo "✓ $(basename "$pdf"): $file_size bytes" >> pdf-reports/generation-report.txt
            else
              echo "✗ $(basename "$pdf"): Failed ($file_size bytes)" >> pdf-reports/generation-report.txt
            fi
          fi
        done
        
        echo "" >> pdf-reports/generation-report.txt
        echo "Summary: $successful_files/$total_files files generated successfully" >> pdf-reports/generation-report.txt
        
        # Fail if no PDFs were generated successfully
        if [ "$successful_files" -eq 0 ]; then
          echo "Error: No PDFs were generated successfully"
          exit 1
        fi
        
    - name: Upload PDF artifacts
      uses: actions/upload-artifact@v3
      with:
        name: generated-pdfs-$
        path: pdf-output/
        retention-days: 30
        
    - name: Upload generation report
      uses: actions/upload-artifact@v3
      with:
        name: pdf-generation-report
        path: pdf-reports/
        retention-days: 7
        
    - name: Comment on PR with results
      if: github.event_name == 'pull_request'
      uses: actions/github-script@v6
      with:
        script: |
          const fs = require('fs');
          const report = fs.readFileSync('pdf-reports/generation-report.txt', 'utf8');
          
          github.rest.issues.createComment({
            issue_number: context.issue.number,
            owner: context.repo.owner,
            repo: context.repo.repo,
            body: `## PDF Generation Report
            
\`\`\`
${report}
\`\`\`

Download the generated PDFs from the workflow artifacts.`
          });

Platform-Specific Implementation

Jekyll PDF Generation Plugin

Jekyll plugin for automated PDF generation:

# _plugins/pdf_generator.rb
require 'puppeteer-ruby'
require 'kramdown'
require 'liquid'

module Jekyll
  class PDFGenerator < Generator
    safe true
    priority :low

    def generate(site)
      @site = site
      @config = site.config['pdf_generator'] || {}
      
      # Skip if PDF generation is disabled
      return unless @config['enabled']
      
      # Create PDF output directory
      pdf_dir = File.join(site.dest, 'pdfs')
      FileUtils.mkdir_p(pdf_dir)
      
      # Generate PDFs for specified collections
      collections_to_process = @config['collections'] || ['posts']
      
      collections_to_process.each do |collection_name|
        collection = site.collections[collection_name]
        next unless collection
        
        collection.docs.each do |doc|
          generate_pdf_for_document(doc, pdf_dir)
        end
      end
      
      # Generate combined PDFs if configured
      generate_combined_pdfs(pdf_dir) if @config['combined_pdfs']
    end
    
    private
    
    def generate_pdf_for_document(doc, output_dir)
      return unless should_generate_pdf?(doc)
      
      begin
        Jekyll.logger.info "PDF Generator:", "Processing #{doc.relative_path}"
        
        # Prepare HTML content
        html_content = prepare_html_content(doc)
        
        # Generate PDF filename
        pdf_filename = "#{doc.basename_without_ext}.pdf"
        pdf_path = File.join(output_dir, pdf_filename)
        
        # Generate PDF using Puppeteer
        generate_pdf_with_puppeteer(html_content, pdf_path, doc)
        
        Jekyll.logger.info "PDF Generator:", "Generated #{pdf_filename}"
        
      rescue StandardError => e
        Jekyll.logger.error "PDF Generator:", "Failed to generate PDF for #{doc.relative_path}: #{e.message}"
      end
    end
    
    def should_generate_pdf?(doc)
      # Check if document should be converted to PDF
      return false if doc.data['pdf'] == false
      return true if doc.data['pdf'] == true
      
      # Default behavior based on configuration
      @config['auto_generate'] != false
    end
    
    def prepare_html_content(doc)
      # Get the rendered content
      content = doc.content
      
      # Apply PDF-specific transformations
      content = transform_content_for_pdf(content, doc)
      
      # Create complete HTML document
      template = get_pdf_template
      
      # Prepare template variables
      template_vars = {
        'title' => doc.data['title'] || doc.basename_without_ext,
        'author' => doc.data['author'] || @site.config['author'],
        'date' => doc.data['date']&.strftime('%B %d, %Y') || '',
        'description' => doc.data['description'] || '',
        'content' => content,
        'print_styles' => get_print_styles,
        'site' => @site.config
      }
      
      # Render template
      liquid_template = Liquid::Template.parse(template)
      liquid_template.render(template_vars)
    end
    
    def transform_content_for_pdf(content, doc)
      # Convert relative URLs to absolute
      base_url = @site.config['url'] || ''
      content = content.gsub(/href="\//, "href=\"#{base_url}/")
      content = content.gsub(/src="\//, "src=\"#{base_url}/")
      
      # Add print-specific classes
      content = content.gsub(/<h([1-6])/, '<h\1 class="pdf-heading"')
      content = content.gsub(/<table/, '<table class="pdf-table"')
      content = content.gsub(/<pre/, '<pre class="pdf-code"')
      
      # Handle page breaks
      content = content.gsub(/<!-- page-break -->/, '<div class="page-break-before"></div>')
      
      content
    end
    
    def get_pdf_template
      template_path = @config['template'] || File.join(@site.source, '_layouts', 'pdf.html')
      
      if File.exist?(template_path)
        File.read(template_path)
      else
        default_pdf_template
      end
    end
    
    def default_pdf_template
      <<~HTML
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="author" content="">
            <meta name="description" content="">
            <style>
                
            </style>
        </head>
        <body>
            <header class="pdf-header">
                <h1></h1>
                
                
            </header>
            
            <main class="pdf-content">
                <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">Markdown Text Styling and Formatting: Complete Guide for Professional Typography and Visual Hierarchy</h1>
    <p class="post-meta"><time class="dt-published" datetime="2025-09-17T00:00:00+00:00" itemprop="datePublished">
        Sep 17, 2025
      </time>• 
          <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span class="p-author h-card" itemprop="name">Matthew Rathbone</span></span></p>
  </header>

  <div class="post-content e-content" itemprop="articleBody">
    <p>Advanced text styling and formatting in Markdown transforms basic content into professionally designed documents with sophisticated typography, visual hierarchy, and enhanced readability that engages readers while maintaining semantic structure. While standard Markdown provides fundamental text formatting capabilities, advanced techniques using CSS integration, custom styling, and platform-specific features enable precise typographic control that rivals traditional publishing systems.</p>

<h2 id="why-master-advanced-text-styling-in-markdown">Why Master Advanced Text Styling in Markdown?</h2>

<p>Professional text formatting provides essential benefits for content creation:</p>

<ul>
  <li><strong>Visual Hierarchy</strong>: Clear typography establishes content structure and guides reader attention</li>
  <li><strong>Professional Appearance</strong>: Sophisticated formatting elevates document quality and credibility</li>
  <li><strong>Enhanced Readability</strong>: Strategic styling improves comprehension and reduces reading fatigue</li>
  <li><strong>Brand Consistency</strong>: Custom typography maintains visual identity across documentation</li>
  <li><strong>Accessibility Enhancement</strong>: Proper text styling improves content accessibility for diverse audiences</li>
</ul>

<h2 id="foundation-text-styling-techniques">Foundation Text Styling Techniques</h2>

<h3 id="standard-markdown-text-formatting">Standard Markdown Text Formatting</h3>

<p>Basic Markdown provides essential text styling options:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Fundamental Text Styling Elements</span>

<span class="gu">## Basic Text Emphasis</span>
<span class="p">-</span> <span class="gs">**Bold text**</span> using double asterisks or underscores
<span class="p">-</span> <span class="ge">*Italic text*</span> using single asterisks or underscores  
<span class="p">-</span> <span class="gs">***Bold and italic**</span><span class="err">*</span> combining both markers
<span class="p">-</span> ~~Strikethrough text~~ using double tildes
<span class="p">-</span> <span class="sb">`Inline code`</span> using backticks

<span class="gu">## Extended Text Formatting</span>
<span class="p">-</span> ==Highlighted text== (platform-dependent)
<span class="p">-</span> ++Underlined text++ (platform-dependent)
<span class="p">-</span> ^^Superscript^^ text formatting
<span class="p">-</span> ~~Subscript~~ text formatting

<span class="gu">## Character Escaping</span>
Use backslashes to display literal characters:
<span class="p">-</span> <span class="se">\*</span>Literal asterisk<span class="se">\*</span>
<span class="p">-</span> <span class="se">\_</span>Literal underscore<span class="se">\_</span>
<span class="p">-</span> <span class="se">\`</span>Literal backtick<span class="se">\`</span>
<span class="p">-</span> <span class="se">\#</span>Literal hash symbol<span class="se">\#</span>

<span class="gu">## Typography Examples</span>
This paragraph demonstrates <span class="gs">**strong emphasis**</span> for important concepts, <span class="ge">*subtle emphasis*</span> for key terms, and <span class="sb">`code references`</span> for technical elements. The combination creates <span class="gs">***powerful emphasis**</span><span class="err">*</span> when needed, while ~~strikethrough~~ indicates deprecated or incorrect information.
</code></pre></div></div>

<h3 id="advanced-character-sets-and-special-symbols">Advanced Character Sets and Special Symbols</h3>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Professional Typography Characters</span>

<span class="gu">## Quotation Marks</span>
<span class="p">-</span> "Standard straight quotes"
<span class="p">-</span> "Smart opening quote and closing quote"
<span class="p">-</span> 'Single smart quotes'
<span class="p">-</span> «French guillemets»
<span class="p">-</span> ‹Single guillemets›

<span class="gu">## Mathematical and Scientific Notation</span>
<span class="p">-</span> Fractions: ½, ⅓, ¼, ¾, ⅛
<span class="p">-</span> Superscripts: x², y³, E=mc²
<span class="p">-</span> Subscripts: H₂O, CO₂, CH₄
<span class="p">-</span> Mathematical symbols: ±, ×, ÷, ≠, ≤, ≥, ∞
<span class="p">-</span> Greek letters: α, β, γ, δ, π, σ, λ, μ

<span class="gu">## Currency and Business Symbols</span>
<span class="p">-</span> Currency: $, €, £, ¥, ₹, ₿
<span class="p">-</span> Business: ©, ®, ™, §, ¶
<span class="p">-</span> Arrows: →, ←, ↑, ↓, ↔, ⇒, ⇐

<span class="gu">## Punctuation and Spacing</span>
<span class="p">-</span> Em dash: — (longer dash for breaks)
<span class="p">-</span> En dash: – (shorter dash for ranges) 
<span class="p">-</span> Ellipsis: … (three periods)
<span class="p">-</span> Non-breaking space:   (prevents line breaks)
<span class="p">-</span> Thin space:   (narrow spacing)

<span class="gu">## Example Usage</span>
The quarterly revenue increased 25%—a significant improvement over last year's performance. The temperature range was 68°F–72°F throughout the testing period. The company's R&amp;D budget allocation follows the 70–20–10 rule: 70% for core products, 20% for emerging technologies, and 10% for breakthrough research.
</code></pre></div></div>

<h2 id="css-integration-for-advanced-typography">CSS Integration for Advanced Typography</h2>

<h3 id="inline-styling-for-immediate-control">Inline Styling for Immediate Control</h3>

<p>HTML and CSS integration within Markdown content:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Advanced Typography with CSS Integration</span>

<span class="gu">## Custom Font Styling</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-family: 'Georgia', serif; font-size: 1.2em; color: #2c3e50; font-weight: 300;"</span><span class="nt">&gt;</span>
This paragraph uses custom typography with Georgia serif font, increased size, custom color, and lighter font weight to create sophisticated text styling that enhances readability and visual appeal.
<span class="nt">&lt;/span&gt;</span>

<span class="gu">## Text Decoration Combinations</span>
<span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2em; border-radius: 8px; font-family: 'Helvetica Neue', sans-serif;"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h3</span> <span class="na">style=</span><span class="s">"margin-top: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.3); font-weight: 300; letter-spacing: 2px;"</span><span class="nt">&gt;</span>FEATURED ANNOUNCEMENT<span class="nt">&lt;/h3&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"font-size: 1.1em; line-height: 1.6; margin-bottom: 0;"</span><span class="nt">&gt;</span>This content block demonstrates advanced typography with custom fonts, text shadows, letter spacing, and gradient backgrounds for professional document presentation.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="gu">## Drop Caps and Initial Styling</span>
<span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"font-size: 16px; line-height: 1.6;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"float: left; font-size: 4em; line-height: 0.8; padding-right: 8px; padding-top: 4px; font-family: Georgia, serif; color: #3182ce; font-weight: bold;"</span><span class="nt">&gt;</span>T<span class="nt">&lt;/span&gt;</span>his paragraph demonstrates a traditional drop cap technique where the first letter is significantly larger and styled differently from the rest of the text. This classical typography approach draws reader attention and creates visual interest at the beginning of important sections or articles.
<span class="nt">&lt;/p&gt;</span>

<span class="gu">## Professional Text Highlighting</span>
Here is some text with <span class="nt">&lt;mark</span> <span class="na">style=</span><span class="s">"background: #fff3cd; color: #856404; padding: 2px 4px; border-radius: 3px;"</span><span class="nt">&gt;</span>professional highlighting<span class="nt">&lt;/mark&gt;</span> and <span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"background: #e8f4fd; color: #1f2937; padding: 2px 6px; border-radius: 3px; border-left: 3px solid #3b82f6;"</span><span class="nt">&gt;</span>important information<span class="nt">&lt;/span&gt;</span> styling.
</code></pre></div></div>

<h3 id="external-stylesheet-integration">External Stylesheet Integration</h3>

<p>Comprehensive typography system for consistent formatting:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* advanced-typography.css - Professional text styling system */</span>

<span class="c">/* Import professional fonts */</span>
<span class="k">@import</span> <span class="sx">url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Crimson+Text:ital,wght@0,400;0,600;1,400&amp;display=swap')</span><span class="p">;</span>

<span class="c">/* Root typography variables */</span>
<span class="nd">:root</span> <span class="p">{</span>
  <span class="py">--font-primary</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s2">'Segoe UI'</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="py">--font-serif</span><span class="p">:</span> <span class="s2">'Crimson Text'</span><span class="p">,</span> <span class="n">Georgia</span><span class="p">,</span> <span class="s2">'Times New Roman'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
  <span class="py">--font-mono</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="s2">'SF Mono'</span><span class="p">,</span> <span class="s2">'Monaco'</span><span class="p">,</span> <span class="s2">'Cascadia Code'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
  
  <span class="py">--text-primary</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="py">--text-secondary</span><span class="p">:</span> <span class="m">#4b5563</span><span class="p">;</span>
  <span class="py">--text-muted</span><span class="p">:</span> <span class="m">#9ca3af</span><span class="p">;</span>
  <span class="py">--text-accent</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
  
  <span class="py">--font-size-xs</span><span class="p">:</span> <span class="m">0.75rem</span><span class="p">;</span>
  <span class="py">--font-size-sm</span><span class="p">:</span> <span class="m">0.875rem</span><span class="p">;</span>
  <span class="py">--font-size-base</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span>
  <span class="py">--font-size-lg</span><span class="p">:</span> <span class="m">1.125rem</span><span class="p">;</span>
  <span class="py">--font-size-xl</span><span class="p">:</span> <span class="m">1.25rem</span><span class="p">;</span>
  <span class="py">--font-size-2xl</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span>
  <span class="py">--font-size-3xl</span><span class="p">:</span> <span class="m">1.875rem</span><span class="p">;</span>
  <span class="py">--font-size-4xl</span><span class="p">:</span> <span class="m">2.25rem</span><span class="p">;</span>
  
  <span class="py">--line-height-tight</span><span class="p">:</span> <span class="m">1.25</span><span class="p">;</span>
  <span class="py">--line-height-normal</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
  <span class="py">--line-height-relaxed</span><span class="p">:</span> <span class="m">1.625</span><span class="p">;</span>
  <span class="py">--line-height-loose</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
  
  <span class="py">--letter-spacing-tight</span><span class="p">:</span> <span class="m">-0.025em</span><span class="p">;</span>
  <span class="py">--letter-spacing-normal</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="py">--letter-spacing-wide</span><span class="p">:</span> <span class="m">0.025em</span><span class="p">;</span>
  <span class="py">--letter-spacing-wider</span><span class="p">:</span> <span class="m">0.05em</span><span class="p">;</span>
  <span class="py">--letter-spacing-widest</span><span class="p">:</span> <span class="m">0.1em</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Base typography */</span>
<span class="nt">body</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-primary</span><span class="p">);</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-base</span><span class="p">);</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-normal</span><span class="p">);</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-primary</span><span class="p">);</span>
  <span class="nl">font-feature-settings</span><span class="p">:</span> <span class="s2">'kern'</span> <span class="m">1</span><span class="p">,</span> <span class="s2">'liga'</span> <span class="m">1</span><span class="p">,</span> <span class="s2">'clig'</span> <span class="m">1</span><span class="p">,</span> <span class="s2">'calt'</span> <span class="m">1</span><span class="p">;</span>
  <span class="nl">text-rendering</span><span class="p">:</span> <span class="n">optimizeLegibility</span><span class="p">;</span>
  <span class="nl">-webkit-font-smoothing</span><span class="p">:</span> <span class="n">antialiased</span><span class="p">;</span>
  <span class="nl">-moz-osx-font-smoothing</span><span class="p">:</span> <span class="n">grayscale</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Heading typography */</span>
<span class="nc">.typography-enhanced</span> <span class="nt">h1</span><span class="o">,</span>
<span class="nc">.typography-enhanced</span> <span class="nt">h2</span><span class="o">,</span>
<span class="nc">.typography-enhanced</span> <span class="nt">h3</span><span class="o">,</span>
<span class="nc">.typography-enhanced</span> <span class="nt">h4</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-primary</span><span class="p">);</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-tight</span><span class="p">);</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-tight</span><span class="p">);</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-primary</span><span class="p">);</span>
  <span class="nl">margin-top</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.75em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">h1</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-4xl</span><span class="p">);</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">-0.02em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">h2</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-3xl</span><span class="p">);</span>
  <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
  <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">h3</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-2xl</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">h4</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-xl</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Paragraph and text styling */</span>
<span class="nc">.typography-enhanced</span> <span class="nt">p</span> <span class="p">{</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">1.25em</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-relaxed</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nc">.lead</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-xl</span><span class="p">);</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-relaxed</span><span class="p">);</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-secondary</span><span class="p">);</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">300</span><span class="p">;</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Text size utilities */</span>
<span class="nc">.text-xs</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-xs</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-sm</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-sm</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-base</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-base</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-lg</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-lg</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-xl</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-xl</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-2xl</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-2xl</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-3xl</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-3xl</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-4xl</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-4xl</span><span class="p">);</span> <span class="p">}</span>

<span class="c">/* Font weight utilities */</span>
<span class="nc">.font-thin</span> <span class="p">{</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">100</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.font-light</span> <span class="p">{</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">300</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.font-normal</span> <span class="p">{</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">400</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.font-medium</span> <span class="p">{</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.font-semibold</span> <span class="p">{</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.font-bold</span> <span class="p">{</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.font-extrabold</span> <span class="p">{</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">800</span><span class="p">;</span> <span class="p">}</span>

<span class="c">/* Line height utilities */</span>
<span class="nc">.leading-tight</span> <span class="p">{</span> <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-tight</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.leading-normal</span> <span class="p">{</span> <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-normal</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.leading-relaxed</span> <span class="p">{</span> <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-relaxed</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.leading-loose</span> <span class="p">{</span> <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-loose</span><span class="p">);</span> <span class="p">}</span>

<span class="c">/* Letter spacing utilities */</span>
<span class="nc">.tracking-tight</span> <span class="p">{</span> <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-tight</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.tracking-normal</span> <span class="p">{</span> <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-normal</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.tracking-wide</span> <span class="p">{</span> <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-wide</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.tracking-wider</span> <span class="p">{</span> <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-wider</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.tracking-widest</span> <span class="p">{</span> <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-widest</span><span class="p">);</span> <span class="p">}</span>

<span class="c">/* Text color utilities */</span>
<span class="nc">.text-primary</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-primary</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-secondary</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-secondary</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-muted</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-muted</span><span class="p">);</span> <span class="p">}</span>
<span class="nc">.text-accent</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span> <span class="p">}</span>

<span class="c">/* Special text styling */</span>
<span class="nc">.text-serif</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-serif</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.text-mono</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-mono</span><span class="p">);</span>
  <span class="nl">font-variant-ligatures</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.text-caps</span> <span class="p">{</span>
  <span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-wider</span><span class="p">);</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.text-small-caps</span> <span class="p">{</span>
  <span class="nl">font-variant</span><span class="p">:</span> <span class="nb">small-caps</span><span class="p">;</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--letter-spacing-wide</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Text decoration utilities */</span>
<span class="nc">.underline</span> <span class="p">{</span> <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.line-through</span> <span class="p">{</span> <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">line-through</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.no-underline</span> <span class="p">{</span> <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span>

<span class="nc">.underline-offset-1</span> <span class="p">{</span> <span class="py">text-underline-offset</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.underline-offset-2</span> <span class="p">{</span> <span class="py">text-underline-offset</span><span class="p">:</span> <span class="m">2px</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.underline-offset-4</span> <span class="p">{</span> <span class="py">text-underline-offset</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span> <span class="p">}</span>

<span class="c">/* Advanced text effects */</span>
<span class="nc">.text-shadow</span> <span class="p">{</span>
  <span class="nl">text-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">3px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.1</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.text-shadow-lg</span> <span class="p">{</span>
  <span class="nl">text-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">6px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.1</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.text-gradient</span> <span class="p">{</span>
  <span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">135deg</span><span class="p">,</span> <span class="m">#667eea</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#764ba2</span> <span class="m">100%</span><span class="p">);</span>
  <span class="nl">-webkit-background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
  <span class="nl">-webkit-text-fill-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
  <span class="nl">background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Quote and citation styling */</span>
<span class="nc">.typography-enhanced</span> <span class="nt">blockquote</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-serif</span><span class="p">);</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-lg</span><span class="p">);</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-relaxed</span><span class="p">);</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-secondary</span><span class="p">);</span>
  <span class="nl">border-left</span><span class="p">:</span> <span class="m">4px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
  <span class="nl">padding-left</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">2em</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">blockquote</span><span class="nd">::before</span> <span class="p">{</span>
  <span class="nl">content</span><span class="p">:</span> <span class="s2">'"'</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">4em</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
  <span class="nl">opacity</span><span class="p">:</span> <span class="m">0.3</span><span class="p">;</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
  <span class="nl">left</span><span class="p">:</span> <span class="m">-0.2em</span><span class="p">;</span>
  <span class="nl">top</span><span class="p">:</span> <span class="m">-0.5em</span><span class="p">;</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-serif</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Code styling */</span>
<span class="nc">.typography-enhanced</span> <span class="nt">code</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-mono</span><span class="p">);</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875em</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">0.125em</span> <span class="m">0.375em</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">0.25em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">pre</span> <span class="nt">code</span> <span class="p">{</span>
  <span class="nl">background</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* List styling */</span>
<span class="nc">.typography-enhanced</span> <span class="nt">ul</span><span class="o">,</span>
<span class="nc">.typography-enhanced</span> <span class="nt">ol</span> <span class="p">{</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">1.25em</span><span class="p">;</span>
  <span class="nl">padding-left</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">li</span> <span class="p">{</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--line-height-relaxed</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Link styling */</span>
<span class="nc">.typography-enhanced</span> <span class="nt">a</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
  <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nb">transparent</span><span class="p">;</span>
  <span class="nl">transition</span><span class="p">:</span> <span class="n">border-color</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.typography-enhanced</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
  <span class="nl">border-bottom-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Selection styling */</span>
<span class="nc">.typography-enhanced</span> <span class="nd">::selection</span> <span class="p">{</span>
  <span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">59</span><span class="p">,</span> <span class="m">130</span><span class="p">,</span> <span class="m">246</span><span class="p">,</span> <span class="m">0.2</span><span class="p">);</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Responsive typography */</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span>
  <span class="nd">:root</span> <span class="p">{</span>
    <span class="py">--font-size-4xl</span><span class="p">:</span> <span class="m">1.875rem</span><span class="p">;</span>
    <span class="py">--font-size-3xl</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span>
    <span class="py">--font-size-2xl</span><span class="p">:</span> <span class="m">1.25rem</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nc">.typography-enhanced</span> <span class="nt">h1</span><span class="o">,</span>
  <span class="nc">.typography-enhanced</span> <span class="nt">h2</span><span class="o">,</span>
  <span class="nc">.typography-enhanced</span> <span class="nt">h3</span> <span class="p">{</span>
    <span class="nl">margin-top</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nc">.typography-enhanced</span> <span class="nt">blockquote</span> <span class="p">{</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-base</span><span class="p">);</span>
    <span class="nl">padding-left</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c">/* Print typography */</span>
<span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
  <span class="nc">.typography-enhanced</span> <span class="p">{</span>
    <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-serif</span><span class="p">);</span>
  <span class="p">}</span>
  
  <span class="nc">.typography-enhanced</span> <span class="nt">h1</span><span class="o">,</span>
  <span class="nc">.typography-enhanced</span> <span class="nt">h2</span><span class="o">,</span>
  <span class="nc">.typography-enhanced</span> <span class="nt">h3</span> <span class="p">{</span>
    <span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nc">.typography-enhanced</span> <span class="nt">p</span> <span class="p">{</span>
    <span class="nl">orphans</span><span class="p">:</span> <span class="m">3</span><span class="p">;</span>
    <span class="nl">widows</span><span class="p">:</span> <span class="m">3</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="platform-specific-text-styling">Platform-Specific Text Styling</h2>

<h3 id="github-and-gitlab-enhancements">GitHub and GitLab Enhancements</h3>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># GitHub-Specific Text Formatting</span>

<span class="gu">## Extended Syntax Support</span>

GitHub and GitLab support additional text styling through HTML:

<span class="nt">&lt;details&gt;</span>
<span class="nt">&lt;summary&gt;&lt;strong&gt;</span>Click to expand advanced formatting examples<span class="nt">&lt;/strong&gt;&lt;/summary&gt;</span>

<span class="gu">### Keyboard Shortcuts and UI Elements</span>
<span class="p">-</span> Press <span class="nt">&lt;kbd&gt;</span>Ctrl<span class="nt">&lt;/kbd&gt;</span> + <span class="nt">&lt;kbd&gt;</span>C<span class="nt">&lt;/kbd&gt;</span> to copy
<span class="p">-</span> Use <span class="nt">&lt;kbd&gt;</span>Cmd<span class="nt">&lt;/kbd&gt;</span> + <span class="nt">&lt;kbd&gt;</span>V<span class="nt">&lt;/kbd&gt;</span> on Mac to paste
<span class="p">-</span> Navigate with <span class="nt">&lt;kbd&gt;</span>Tab<span class="nt">&lt;/kbd&gt;</span> and <span class="nt">&lt;kbd&gt;</span>Shift<span class="nt">&lt;/kbd&gt;</span> + <span class="nt">&lt;kbd&gt;</span>Tab<span class="nt">&lt;/kbd&gt;</span>

<span class="gu">### Progress Indicators and Measurements</span>
<span class="p">-</span> <span class="nt">&lt;progress</span> <span class="na">value=</span><span class="s">"70"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">&gt;</span>70%<span class="nt">&lt;/progress&gt;</span> Project completion
<span class="p">-</span> <span class="nt">&lt;meter</span> <span class="na">value=</span><span class="s">"8"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"10"</span><span class="nt">&gt;</span>8 out of 10<span class="nt">&lt;/meter&gt;</span> Quality score

<span class="gu">### Mathematical and Chemical Notation</span>
<span class="p">-</span> Mathematical expressions: E = mc<span class="nt">&lt;sup&gt;</span>2<span class="nt">&lt;/sup&gt;</span>
<span class="p">-</span> Chemical formulas: H<span class="nt">&lt;sub&gt;</span>2<span class="nt">&lt;/sub&gt;</span>O and CO<span class="nt">&lt;sub&gt;</span>2<span class="nt">&lt;/sub&gt;</span>
<span class="p">-</span> Temperature: 23°C or 73°F

<span class="gu">### Professional Emphasis</span>
<span class="p">-</span> <span class="nt">&lt;mark&gt;</span>Highlighted important information<span class="nt">&lt;/mark&gt;</span>
<span class="p">-</span> <span class="nt">&lt;small&gt;</span>Fine print or secondary information<span class="nt">&lt;/small&gt;</span>
<span class="p">-</span> <span class="nt">&lt;cite&gt;</span>Reference to external source<span class="nt">&lt;/cite&gt;</span>

<span class="nt">&lt;/details&gt;</span>

<span class="gu">## Task Lists with Enhanced Styling</span>
<span class="p">-</span> [x] ✅ Completed task with success indicator  
<span class="p">-</span> [x] 🔄 Completed task with process indicator
<span class="p">-</span> [ ] ⏳ Pending task with time indicator
<span class="p">-</span> [ ] 🚨 High priority task with alert indicator
<span class="p">-</span> [ ] 💡 Enhancement task with idea indicator

<span class="gu">## Issue and Pull Request References</span>
<span class="p">-</span> Fix critical bug (#1234)
<span class="p">-</span> Implement new feature (PR #5678)
<span class="p">-</span> Related to user story (@username/repo#42)

<span class="gu">## Commit Hash References  </span>
<span class="p">-</span> Latest changes: <span class="sb">`commit abc123def456`</span>
<span class="p">-</span> Previous version: <span class="sb">`commit def456ghi789`</span>
</code></pre></div></div>

<h3 id="hugo-and-jekyll-integration">Hugo and Jekyll Integration</h3>

<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;!-- _includes/typography-block.html --&gt;
<span class="cp">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">style</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">default</span><span class="p">:</span><span class="w"> </span><span class="s2">"normal"</span><span class="w"> </span><span class="cp">%}</span>
<span class="cp">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">size</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nf">size</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">default</span><span class="p">:</span><span class="w"> </span><span class="s2">"base"</span><span class="w"> </span><span class="cp">%}</span>
<span class="cp">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">weight</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">weight</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">default</span><span class="p">:</span><span class="w"> </span><span class="s2">"normal"</span><span class="w"> </span><span class="cp">%}</span>

&lt;div class="typography-block typography-<span class="cp">{{</span><span class="w"> </span><span class="nv">style</span><span class="w"> </span><span class="cp">}}</span>"&gt;
  <span class="cp">{%</span><span class="w"> </span><span class="nt">if</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="cp">%}</span>
    &lt;h3 class="typography-title text-<span class="cp">{{</span><span class="w"> </span><span class="nv">size</span><span class="w"> </span><span class="cp">}}</span> font-<span class="cp">{{</span><span class="w"> </span><span class="nv">weight</span><span class="w"> </span><span class="cp">}}</span>"&gt;
      <span class="cp">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">title</span><span class="w"> </span><span class="cp">}}</span>
    &lt;/h3&gt;
  <span class="cp">{%</span><span class="w"> </span><span class="nt">endif</span><span class="w"> </span><span class="cp">%}</span>
  
  &lt;div class="typography-content"&gt;
    <span class="cp">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">content</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">markdownify</span><span class="w"> </span><span class="cp">}}</span>
  &lt;/div&gt;
  
  <span class="cp">{%</span><span class="w"> </span><span class="nt">if</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">author</span><span class="w"> </span><span class="cp">%}</span>
    &lt;footer class="typography-attribution"&gt;
      &lt;cite&gt;<span class="cp">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">author</span><span class="w"> </span><span class="cp">}}</span>&lt;/cite&gt;
      <span class="cp">{%</span><span class="w"> </span><span class="nt">if</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">source</span><span class="w"> </span><span class="cp">%}</span>
        , &lt;em&gt;<span class="cp">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">source</span><span class="w"> </span><span class="cp">}}</span>&lt;/em&gt;
      <span class="cp">{%</span><span class="w"> </span><span class="nt">endif</span><span class="w"> </span><span class="cp">%}</span>
    &lt;/footer&gt;
  <span class="cp">{%</span><span class="w"> </span><span class="nt">endif</span><span class="w"> </span><span class="cp">%}</span>
&lt;/div&gt;
</code></pre></div></div>

<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;!-- _includes/styled-text.html --&gt;
<span class="cp">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">classes</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">class</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">split</span><span class="p">:</span><span class="w"> </span><span class="s2">" "</span><span class="w"> </span><span class="cp">%}</span>
<span class="cp">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">tag</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">tag</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">default</span><span class="p">:</span><span class="w"> </span><span class="s2">"span"</span><span class="w"> </span><span class="cp">%}</span>

&lt;<span class="cp">{{</span><span class="w"> </span><span class="nv">tag</span><span class="w"> </span><span class="cp">}}</span> class="<span class="cp">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">class</span><span class="w"> </span><span class="nt">in</span><span class="w"> </span><span class="nv">classes</span><span class="w"> </span><span class="cp">%}{{</span><span class="w"> </span><span class="nv">class</span><span class="w"> </span><span class="cp">}}</span> <span class="cp">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="cp">%}</span>"&gt;
  <span class="cp">{{</span><span class="w"> </span><span class="nv">include</span><span class="p">.</span><span class="nv">content</span><span class="w"> </span><span class="cp">}}</span>
&lt;/<span class="cp">{{</span><span class="w"> </span><span class="nv">tag</span><span class="w"> </span><span class="cp">}}</span>&gt;
</code></pre></div></div>

<p><strong>Usage in Jekyll Content</strong>:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Typography</span><span class="nv"> </span><span class="s">Example"</span>
<span class="nn">---</span>
</code></pre></div></div>

<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>typography-block.html<span class="w"> 
   </span><span class="na">style</span><span class="o">=</span><span class="s2">"elegant"</span><span class="w">
   </span><span class="na">title</span><span class="o">=</span><span class="s2">"Professional Typography"</span><span class="w">
   </span><span class="na">author</span><span class="o">=</span><span class="s2">"Typography Expert"</span><span class="w">
   </span><span class="na">source</span><span class="o">=</span><span class="s2">"Design Guidelines"</span><span class="w">
   </span><span class="na">content</span><span class="o">=</span><span class="s2">"This demonstrates advanced typography integration with Jekyll templating for consistent text styling throughout documentation."</span><span class="w"> </span><span class="cp">%}</span>

<span class="cp">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>styled-text.html<span class="w"> 
   </span><span class="na">tag</span><span class="o">=</span><span class="s2">"p"</span><span class="w"> 
   </span><span class="na">class</span><span class="o">=</span><span class="s2">"text-xl font-light leading-relaxed text-secondary"</span><span class="w">
   </span><span class="na">content</span><span class="o">=</span><span class="s2">"This paragraph uses utility classes for precise typography control with larger text, lighter weight, relaxed line height, and secondary color."</span><span class="w"> </span><span class="cp">%}</span>
</code></pre></div></div>

<h3 id="obsidian-typography-enhancement">Obsidian Typography Enhancement</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* obsidian-typography.css - Enhanced text styling for Obsidian */</span>

<span class="c">/* Override default Obsidian typography */</span>
<span class="nc">.markdown-preview-view</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s2">'Segoe UI'</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-normal</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Heading enhancements */</span>
<span class="nc">.markdown-preview-view</span> <span class="nt">h1</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">2.5em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">-0.02em</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-title-h1</span><span class="p">);</span>
  <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
  <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.markdown-preview-view</span> <span class="nt">h2</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-title-h2</span><span class="p">);</span>
  <span class="nl">margin-top</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.markdown-preview-view</span> <span class="nt">h3</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-title-h3</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Enhanced emphasis */</span>
<span class="nc">.markdown-preview-view</span> <span class="nt">strong</span> <span class="p">{</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.markdown-preview-view</span> <span class="nt">em</span> <span class="p">{</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-normal</span><span class="p">);</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Crimson Text'</span><span class="p">,</span> <span class="n">Georgia</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Code styling */</span>
<span class="nc">.markdown-preview-view</span> <span class="nt">code</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="s2">'SF Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--background-primary-alt</span><span class="p">);</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">2px</span> <span class="m">4px</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">3px</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.9em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Link styling */</span>
<span class="nc">.markdown-preview-view</span> <span class="nt">a</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--link-color</span><span class="p">);</span>
  <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nb">transparent</span><span class="p">;</span>
  <span class="nl">transition</span><span class="p">:</span> <span class="n">border-bottom-color</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.markdown-preview-view</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
  <span class="nl">border-bottom-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--link-color-hover</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* List enhancements */</span>
<span class="nc">.markdown-preview-view</span> <span class="nt">ul</span> <span class="p">{</span>
  <span class="nl">padding-left</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.markdown-preview-view</span> <span class="nt">li</span> <span class="p">{</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.7</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Quote styling */</span>
<span class="nc">.markdown-preview-view</span> <span class="nt">blockquote</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Crimson Text'</span><span class="p">,</span> <span class="n">Georgia</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.1em</span><span class="p">;</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
  <span class="nl">border-left</span><span class="p">:</span> <span class="m">4px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--quote-opening</span><span class="p">);</span>
  <span class="nl">padding-left</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-muted</span><span class="p">);</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Table typography */</span>
<span class="nc">.markdown-preview-view</span> <span class="nt">table</span> <span class="p">{</span>
  <span class="nl">font-variant-numeric</span><span class="p">:</span> <span class="n">tabular-nums</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.markdown-preview-view</span> <span class="nt">th</span> <span class="p">{</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-normal</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* Custom CSS classes for Obsidian */</span>
<span class="nc">.large-text</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.25em</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.small-text</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875em</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-muted</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.mono-text</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
  <span class="nl">font-variant-ligatures</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.serif-text</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Crimson Text'</span><span class="p">,</span> <span class="n">Georgia</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.caps-text</span> <span class="p">{</span>
  <span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">0.05em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.875em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.center-text</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.right-text</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Source mode enhancements */</span>
<span class="nc">.markdown-source-view.mod-cm6</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="s2">'SF Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.markdown-source-view.mod-cm6</span> <span class="nc">.cm-header</span> <span class="p">{</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-title-h1</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.markdown-source-view.mod-cm6</span> <span class="nc">.cm-strong</span> <span class="p">{</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-accent</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.markdown-source-view.mod-cm6</span> <span class="nc">.cm-em</span> <span class="p">{</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--text-normal</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="advanced-typography-techniques">Advanced Typography Techniques</h2>

<h3 id="professional-drop-caps-and-initial-letters">Professional Drop Caps and Initial Letters</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Professional drop cap implementation --&gt;</span>
<span class="nt">&lt;style&gt;</span>
<span class="nc">.drop-cap</span><span class="nd">::first-letter</span> <span class="p">{</span>
  <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">4em</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">0.8</span><span class="p">;</span>
  <span class="nl">padding-right</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
  <span class="nl">padding-top</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Crimson Text'</span><span class="p">,</span> <span class="n">Georgia</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.ornamental-initial</span><span class="nd">::first-letter</span> <span class="p">{</span>
  <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">5em</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">0.7</span><span class="p">;</span>
  <span class="nl">padding-right</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span>
  <span class="nl">padding-top</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Crimson Text'</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">135deg</span><span class="p">,</span> <span class="m">#667eea</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#764ba2</span> <span class="m">100%</span><span class="p">);</span>
  <span class="nl">-webkit-background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
  <span class="nl">-webkit-text-fill-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
  <span class="nl">background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
  <span class="nl">text-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">4px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.modern-initial</span><span class="nd">::first-letter</span> <span class="p">{</span>
  <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">3.5em</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">0.9</span><span class="p">;</span>
  <span class="nl">padding-right</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
  <span class="nl">padding-top</span><span class="p">:</span> <span class="m">2px</span><span class="p">;</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">800</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span> <span class="m">12px</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span>
  <span class="nl">margin-right</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"drop-cap"</span><span class="nt">&gt;</span>
Advanced typography in professional documentation requires careful attention to detail and understanding of typographic principles. The careful selection of fonts, spacing, and visual hierarchy creates documents that not only inform but inspire and engage readers through superior design quality.
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ornamental-initial"</span><span class="nt">&gt;</span>
Traditional publishing techniques translate beautifully to digital Markdown documents when implemented with CSS styling. The ornamental initial letter technique, popularized in medieval manuscripts and classical literature, adds sophistication and visual interest to modern technical documentation.
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modern-initial"</span><span class="nt">&gt;</span>
Contemporary design approaches balance traditional typography principles with modern aesthetic preferences. Clean, geometric initial letters work particularly well in technical documentation where clarity and professionalism are paramount considerations.
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="advanced-text-alignment-and-justification">Advanced Text Alignment and Justification</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Advanced text alignment system */</span>
<span class="nc">.text-alignment-demo</span> <span class="p">{</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">600px</span><span class="p">;</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">2em</span> <span class="nb">auto</span><span class="p">;</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.justified-text</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
  <span class="nl">text-justify</span><span class="p">:</span> <span class="n">inter-word</span><span class="p">;</span>
  <span class="nl">hyphens</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
  <span class="nl">-webkit-hyphens</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
  <span class="nl">-ms-hyphens</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.optical-alignment</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
  <span class="nl">hanging-punctuation</span><span class="p">:</span> <span class="n">first</span> <span class="n">last</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.centered-prose</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">400px</span><span class="p">;</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">2em</span> <span class="nb">auto</span><span class="p">;</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.ragged-right</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">400px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.ragged-left</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">400px</span><span class="p">;</span>
  <span class="nl">margin-left</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Advanced paragraph styling */</span>
<span class="nc">.first-line-indent</span> <span class="p">{</span>
  <span class="nl">text-indent</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.hanging-indent</span> <span class="p">{</span>
  <span class="nl">text-indent</span><span class="p">:</span> <span class="m">-2em</span><span class="p">;</span>
  <span class="nl">padding-left</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.no-indent</span> <span class="p">{</span>
  <span class="nl">text-indent</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.spaced-paragraphs</span> <span class="nt">p</span> <span class="p">{</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.tight-paragraphs</span> <span class="nt">p</span> <span class="p">{</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Text alignment examples --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-alignment-demo"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"justified-text"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This paragraph demonstrates justified text alignment where words are spaced to create even left and right margins. Justified text works best with longer paragraphs and wider columns, providing a formal, published appearance suitable for academic and professional documents.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"centered-prose"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>Centered text alignment creates emphasis and works well for quotes, testimonials, and brief announcements that require visual prominence within the document layout.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hanging-indent"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This paragraph uses a hanging indent where the first line extends beyond the left margin while subsequent lines are indented. This technique is commonly used in bibliographies, reference lists, and glossaries for improved readability and visual organization.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="typography-for-different-content-types">Typography for Different Content Types</h3>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Content-Specific Typography Examples</span>

<span class="gu">## Technical Documentation</span>
<span class="p">```</span><span class="nl">css
</span><span class="nc">.technical-content</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">65ch</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.technical-content</span> <span class="nt">code</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">2px</span> <span class="m">4px</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">3px</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#e53e3e</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.9em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.technical-content</span> <span class="nc">.api-endpoint</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#10b981</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">4px</span> <span class="m">8px</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.technical-content</span> <span class="nc">.parameter</span> <span class="p">{</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#7c3aed</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="marketing-and-promotional-content">Marketing and Promotional Content</h2>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.marketing-content</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.7</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#374151</span><span class="p">;</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">60ch</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.marketing-content</span> <span class="nt">h2</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">2.5em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">800</span><span class="p">;</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">-0.02em</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">135deg</span><span class="p">,</span> <span class="m">#667eea</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#764ba2</span> <span class="m">100%</span><span class="p">);</span>
  <span class="nl">-webkit-background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
  <span class="nl">-webkit-text-fill-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
  <span class="nl">background-clip</span><span class="p">:</span> <span class="nb">text</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.marketing-content</span> <span class="nc">.highlight</span> <span class="p">{</span>
  <span class="nl">background</span><span class="p">:</span> <span class="m">#fef3c7</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">2px</span> <span class="m">6px</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#92400e</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.marketing-content</span> <span class="nc">.cta-text</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.2em</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#3b82f6</span><span class="p">;</span>
  <span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
  <span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">0.05em</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="academic-and-research-writing">Academic and Research Writing</h2>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.academic-content</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Crimson Text'</span><span class="p">,</span> <span class="n">Georgia</span><span class="p">,</span> <span class="nb">serif</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">17px</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.8</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">70ch</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.academic-content</span> <span class="nt">p</span> <span class="p">{</span>
  <span class="nl">text-align</span><span class="p">:</span> <span class="nb">justify</span><span class="p">;</span>
  <span class="nl">text-justify</span><span class="p">:</span> <span class="n">inter-word</span><span class="p">;</span>
  <span class="nl">hyphens</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.academic-content</span> <span class="nc">.citation</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.9em</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.academic-content</span> <span class="nc">.footnote</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.85em</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#9ca3af</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
  <span class="nl">border-left</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
  <span class="nl">padding-left</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">1em</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.academic-content</span> <span class="nt">blockquote</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.1em</span><span class="p">;</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="p">;</span>
  <span class="nl">border-left</span><span class="p">:</span> <span class="m">4px</span> <span class="nb">solid</span> <span class="m">#3b82f6</span><span class="p">;</span>
  <span class="nl">padding-left</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#4b5563</span><span class="p">;</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">2em</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
## Accessibility and Inclusive Typography

### Screen Reader Optimization

```html
&lt;!-- Accessible typography implementation --&gt;
&lt;article class="accessible-typography" role="main" aria-labelledby="main-heading"&gt;
  &lt;header&gt;
    &lt;h1 id="main-heading"&gt;Typography Accessibility Guidelines&lt;/h1&gt;
    &lt;p class="lead" aria-describedby="content-description"&gt;
      Professional typography practices that ensure content accessibility for all users.
    &lt;/p&gt;
    &lt;div id="content-description" class="sr-only"&gt;
      This article covers typography techniques with focus on accessibility, including proper heading structure, color contrast, and screen reader compatibility.
    &lt;/div&gt;
  &lt;/header&gt;

  &lt;section aria-labelledby="contrast-section"&gt;
    &lt;h2 id="contrast-section"&gt;Color Contrast Requirements&lt;/h2&gt;
    
    &lt;!-- High contrast examples --&gt;
    &lt;div class="contrast-examples"&gt;
      &lt;div class="good-contrast" style="background: #ffffff; color: #1f2937; padding: 1em; margin: 1em 0; border: 1px solid #e5e7eb;"&gt;
        &lt;strong&gt;Good contrast (16.75:1):&lt;/strong&gt; Dark text on light background provides excellent readability for all users including those with visual impairments.
      &lt;/div&gt;
      
      &lt;div class="poor-contrast" style="background: #f3f4f6; color: #9ca3af; padding: 1em; margin: 1em 0; border: 1px solid #e5e7eb;"&gt;
        &lt;em&gt;Poor contrast (2.8:1):&lt;/em&gt; Light text on light background fails WCAG accessibility standards and creates reading difficulties.
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;p&gt;
      &lt;abbr title="Web Content Accessibility Guidelines"&gt;WCAG&lt;/abbr&gt; requires minimum contrast ratios of 
      &lt;strong&gt;4.5:1 for normal text&lt;/strong&gt; and &lt;strong&gt;3:1 for large text&lt;/strong&gt; (18px+ or 14px+ bold).
    &lt;/p&gt;
  &lt;/section&gt;

  &lt;section aria-labelledby="semantic-section"&gt;
    &lt;h2 id="semantic-section"&gt;Semantic Text Markup&lt;/h2&gt;
    
    &lt;p&gt;Use semantic HTML elements for proper text meaning:&lt;/p&gt;
    
    &lt;ul&gt;
      &lt;li&gt;&lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt; for &lt;strong&gt;important emphasis&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; for &lt;em&gt;stress emphasis&lt;/em&gt;&lt;/li&gt;
      &lt;li&gt;&lt;code&gt;&amp;lt;mark&amp;gt;&lt;/code&gt; for &lt;mark&gt;highlighted text&lt;/mark&gt;&lt;/li&gt;
      &lt;li&gt;&lt;code&gt;&amp;lt;kbd&amp;gt;&lt;/code&gt; for &lt;kbd&gt;keyboard input&lt;/kbd&gt;&lt;/li&gt;
      &lt;li&gt;&lt;code&gt;&amp;lt;samp&amp;gt;&lt;/code&gt; for &lt;samp&gt;sample output&lt;/samp&gt;&lt;/li&gt;
      &lt;li&gt;&lt;code&gt;&amp;lt;var&amp;gt;&lt;/code&gt; for &lt;var&gt;variables&lt;/var&gt;&lt;/li&gt;
      &lt;li&gt;&lt;code&gt;&amp;lt;abbr&amp;gt;&lt;/code&gt; for &lt;abbr title="abbreviations"&gt;abbr.&lt;/abbr&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;

  &lt;section aria-labelledby="focus-section"&gt;
    &lt;h2 id="focus-section"&gt;Focus and Navigation&lt;/h2&gt;
    
    &lt;p&gt;Interactive text elements must have visible focus indicators:&lt;/p&gt;
    
    &lt;div class="focus-demo"&gt;
      &lt;a href="#" class="accessible-link" aria-describedby="link-description"&gt;
        Example accessible link with focus styling
      &lt;/a&gt;
      &lt;div id="link-description" class="sr-only"&gt;
        This link demonstrates proper focus indicator styling for keyboard navigation
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
&lt;/article&gt;

&lt;style&gt;
.accessible-typography {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #1f2937;
  max-width: 65ch;
  margin: 0 auto;
  padding: 2rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.accessible-link {
  color: #3b82f6;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 2px;
  padding: 2px;
}

.accessible-link:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  background: rgba(59, 130, 246, 0.1);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .accessible-typography {
    color: #000000;
    background: #ffffff;
  }
  
  .accessible-link {
    color: #0000ee;
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
  
  .good-contrast {
    border-width: 2px !important;
    border-color: #000000 !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Large text support */
@media (prefers-reduced-data: reduce) {
  .accessible-typography {
    font-size: 18px;
    line-height: 1.7;
  }
}
&lt;/style&gt;
</code></pre></div></div>

<h3 id="color-blind-friendly-typography">Color-Blind Friendly Typography</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Color-blind accessible typography */</span>
<span class="nc">.colorblind-friendly</span> <span class="p">{</span>
  <span class="c">/* Use patterns and symbols in addition to color */</span>
<span class="p">}</span>

<span class="nc">.status-success</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#059669</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.status-success</span><span class="nd">::before</span> <span class="p">{</span>
  <span class="nl">content</span><span class="p">:</span> <span class="s2">'✓ '</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.status-warning</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#d97706</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.status-warning</span><span class="nd">::before</span> <span class="p">{</span>
  <span class="nl">content</span><span class="p">:</span> <span class="s2">'⚠ '</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.status-error</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#dc2626</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.status-error</span><span class="nd">::before</span> <span class="p">{</span>
  <span class="nl">content</span><span class="p">:</span> <span class="s2">'✗ '</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.status-info</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.status-info</span><span class="nd">::before</span> <span class="p">{</span>
  <span class="nl">content</span><span class="p">:</span> <span class="s2">'ℹ '</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Texture and pattern support */</span>
<span class="nc">.pattern-stripe</span> <span class="p">{</span>
  <span class="nl">background-image</span><span class="p">:</span> <span class="n">repeating-linear-gradient</span><span class="p">(</span>
    <span class="m">45deg</span><span class="p">,</span>
    <span class="nb">transparent</span><span class="p">,</span>
    <span class="nb">transparent</span> <span class="m">2px</span><span class="p">,</span>
    <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">)</span> <span class="m">2px</span><span class="p">,</span>
    <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">)</span> <span class="m">4px</span>
  <span class="p">);</span>
<span class="p">}</span>

<span class="nc">.pattern-dots</span> <span class="p">{</span>
  <span class="nl">background-image</span><span class="p">:</span> <span class="n">radial-gradient</span><span class="p">(</span><span class="nb">circle</span><span class="p">,</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">)</span> <span class="m">1px</span><span class="p">,</span> <span class="nb">transparent</span> <span class="m">1px</span><span class="p">);</span>
  <span class="nl">background-size</span><span class="p">:</span> <span class="m">10px</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="performance-optimization-for-typography">Performance Optimization for Typography</h2>

<h3 id="font-loading-strategies">Font Loading Strategies</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Optimized font loading --&gt;</span>
<span class="nt">&lt;head&gt;</span>
  <span class="c">&lt;!-- Preconnect to font providers --&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.gstatic.com"</span> <span class="na">crossorigin</span><span class="nt">&gt;</span>
  
  <span class="c">&lt;!-- Preload critical fonts --&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preload"</span> <span class="na">href=</span><span class="s">"/fonts/Inter-Regular.woff2"</span> <span class="na">as=</span><span class="s">"font"</span> <span class="na">type=</span><span class="s">"font/woff2"</span> <span class="na">crossorigin</span><span class="nt">&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preload"</span> <span class="na">href=</span><span class="s">"/fonts/Inter-Bold.woff2"</span> <span class="na">as=</span><span class="s">"font"</span> <span class="na">type=</span><span class="s">"font/woff2"</span> <span class="na">crossorigin</span><span class="nt">&gt;</span>
  
  <span class="c">&lt;!-- Load fonts with display swap --&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;700&amp;display=swap"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>
  
  <span class="c">&lt;!-- Fallback fonts --&gt;</span>
  <span class="nt">&lt;style&gt;</span>
    <span class="c">/* System font stack as fallback */</span>
    <span class="nt">body</span> <span class="p">{</span>
      <span class="nl">font-family</span><span class="p">:</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s2">'Segoe UI'</span><span class="p">,</span> <span class="n">Roboto</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
    <span class="p">}</span>
    
    <span class="c">/* Progressive enhancement when custom fonts load */</span>
    <span class="nc">.fonts-loaded</span> <span class="nt">body</span> <span class="p">{</span>
      <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s2">'Segoe UI'</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;/head&gt;</span>

<span class="nt">&lt;script&gt;</span>
<span class="c1">// Font loading detection</span>
<span class="k">if </span><span class="p">(</span><span class="dl">'</span><span class="s1">fonts</span><span class="dl">'</span> <span class="k">in</span> <span class="nb">document</span><span class="p">)</span> <span class="p">{</span>
  <span class="nb">Promise</span><span class="p">.</span><span class="nf">all</span><span class="p">([</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">fonts</span><span class="p">.</span><span class="nf">load</span><span class="p">(</span><span class="dl">'</span><span class="s1">400 16px Inter</span><span class="dl">'</span><span class="p">),</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">fonts</span><span class="p">.</span><span class="nf">load</span><span class="p">(</span><span class="dl">'</span><span class="s1">700 16px Inter</span><span class="dl">'</span><span class="p">),</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">fonts</span><span class="p">.</span><span class="nf">load</span><span class="p">(</span><span class="dl">'</span><span class="s1">400 14px JetBrains Mono</span><span class="dl">'</span><span class="p">)</span>
  <span class="p">]).</span><span class="nf">then</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">fonts-loaded</span><span class="dl">'</span><span class="p">);</span>
  <span class="p">});</span>
<span class="p">}</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<h3 id="css-optimization">CSS Optimization</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Efficient typography CSS */</span>
<span class="c">/* Use CSS custom properties for consistency and performance */</span>
<span class="nd">:root</span> <span class="p">{</span>
  <span class="py">--font-primary</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="py">--font-mono</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="s2">'SF Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
  <span class="py">--text-primary</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="py">--text-secondary</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Minimize reflows with efficient selectors */</span>
<span class="nc">.typography-container</span> <span class="p">{</span>
  <span class="py">contain</span><span class="p">:</span> <span class="n">layout</span> <span class="n">style</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Use font-display: swap for better performance */</span>
<span class="k">@font-face</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">;</span>
  <span class="nl">src</span><span class="p">:</span> <span class="sx">url('/fonts/Inter-Regular.woff2')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'woff2'</span><span class="p">);</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">400</span><span class="p">;</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">normal</span><span class="p">;</span>
  <span class="py">font-display</span><span class="p">:</span> <span class="n">swap</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Optimize text rendering */</span>
<span class="nc">.optimized-text</span> <span class="p">{</span>
  <span class="nl">font-feature-settings</span><span class="p">:</span> <span class="s2">'kern'</span> <span class="m">1</span><span class="p">,</span> <span class="s2">'liga'</span> <span class="m">1</span><span class="p">;</span>
  <span class="nl">text-rendering</span><span class="p">:</span> <span class="n">optimizeSpeed</span><span class="p">;</span>
  <span class="nl">-webkit-font-smoothing</span><span class="p">:</span> <span class="n">antialiased</span><span class="p">;</span>
  <span class="nl">-moz-osx-font-smoothing</span><span class="p">:</span> <span class="n">grayscale</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Use will-change for animated text sparingly */</span>
<span class="nc">.animated-text</span> <span class="p">{</span>
  <span class="py">will-change</span><span class="p">:</span> <span class="n">transform</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.animated-text.animation-complete</span> <span class="p">{</span>
  <span class="py">will-change</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="integration-with-modern-workflows">Integration with Modern Workflows</h2>

<p>Advanced text styling and formatting integrates seamlessly with comprehensive Markdown documentation systems. When combined with <a href="https://blog.markdowntools.com/posts/markdown-blockquotes-advanced-styling-complete-guide">blockquote styling techniques</a>, sophisticated typography creates visual hierarchy that guides reader attention through complex content while maintaining professional presentation standards.</p>

<p>For comprehensive project documentation, text styling works effectively with <a href="https://blog.markdowntools.com/posts/markdown-custom-css-classes-styling-complete-guide">custom CSS classes and layout systems</a> to create consistent design systems that scale across different document types while preserving brand identity and readability standards.</p>

<p>When creating detailed technical specifications, typography enhancement complements <a href="https://blog.markdowntools.com/posts/markdown-table-column-width-alignment-complete-guide">table formatting and data presentation</a> to ensure optimal information density and visual organization that communicates complex data through both textual content and thoughtful design implementation.</p>

<h2 id="troubleshooting-common-typography-issues">Troubleshooting Common Typography Issues</h2>

<h3 id="font-loading-problems">Font Loading Problems</h3>

<p><strong>Problem</strong>: Custom fonts not loading or displaying inconsistently</p>

<p><strong>Solutions</strong>:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Robust font fallback stack */</span>
<span class="nc">.font-primary</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">system-ui</span><span class="p">,</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s2">'Segoe UI'</span><span class="p">,</span> <span class="n">Roboto</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Font loading detection */</span>
<span class="nc">.font-loading</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">transition</span><span class="p">:</span> <span class="n">font-family</span> <span class="m">0.3s</span> <span class="n">ease</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.fonts-loaded</span> <span class="nc">.font-loading</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Critical font inlining for above-the-fold content */</span>
<span class="k">@font-face</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'InterSubset'</span><span class="p">;</span>
  <span class="nl">src</span><span class="p">:</span> <span class="sx">url('data:font/woff2;base64,...')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'woff2'</span><span class="p">);</span>
  <span class="nl">font-weight</span><span class="p">:</span> <span class="m">400</span><span class="p">;</span>
  <span class="nl">font-style</span><span class="p">:</span> <span class="nb">normal</span><span class="p">;</span>
  <span class="py">font-display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
  <span class="py">unicode-range</span><span class="p">:</span> <span class="n">U</span><span class="err">+</span><span class="m">20-7</span><span class="n">E</span><span class="p">;</span> <span class="c">/* ASCII characters only */</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="cross-browser-consistency-issues">Cross-Browser Consistency Issues</h3>

<p><strong>Problem</strong>: Typography appearing differently across browsers</p>

<p><strong>Solutions</strong>:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Normalize typography across browsers */</span>
<span class="o">*</span> <span class="p">{</span>
  <span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">html</span> <span class="p">{</span>
  <span class="nl">-webkit-text-size-adjust</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
  <span class="nl">-ms-text-size-adjust</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">body</span> <span class="p">{</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s2">'Segoe UI'</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
  <span class="nl">background-color</span><span class="p">:</span> <span class="m">#ffffff</span><span class="p">;</span>
  <span class="nl">text-rendering</span><span class="p">:</span> <span class="n">optimizeLegibility</span><span class="p">;</span>
  <span class="nl">-webkit-font-smoothing</span><span class="p">:</span> <span class="n">antialiased</span><span class="p">;</span>
  <span class="nl">-moz-osx-font-smoothing</span><span class="p">:</span> <span class="n">grayscale</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Fix for sub/sup positioning */</span>
<span class="nt">sub</span><span class="o">,</span> <span class="nt">sup</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">75%</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
  <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">baseline</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">sup</span> <span class="p">{</span>
  <span class="nl">top</span><span class="p">:</span> <span class="m">-0.5em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">sub</span> <span class="p">{</span>
  <span class="nl">bottom</span><span class="p">:</span> <span class="m">-0.25em</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* Consistent button and input fonts */</span>
<span class="nt">button</span><span class="o">,</span> <span class="nt">input</span><span class="o">,</span> <span class="nt">select</span><span class="o">,</span> <span class="nt">textarea</span> <span class="p">{</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
  <span class="nl">line-height</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="mobile-typography-issues">Mobile Typography Issues</h3>

<p><strong>Problem</strong>: Text too small or difficult to read on mobile devices</p>

<p><strong>Solutions</strong>:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Mobile-first typography */</span>
<span class="nt">html</span> <span class="p">{</span>
  <span class="nl">font-size</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="c">/* Never go below 16px on iOS */</span>
<span class="p">}</span>

<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span>
  <span class="nc">.mobile-typography</span> <span class="p">{</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span> <span class="c">/* Larger base size for mobile */</span>
    <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
    <span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">0.01em</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nc">.mobile-typography</span> <span class="nt">h1</span> <span class="p">{</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span> <span class="c">/* Reduced from desktop */</span>
    <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.2</span><span class="p">;</span>
    <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.75rem</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nc">.mobile-typography</span> <span class="nt">p</span> <span class="p">{</span>
    <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span>
    <span class="nl">max-width</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="c">/* Allow full width on mobile */</span>
  <span class="p">}</span>
  
  <span class="c">/* Touch-friendly interactive text */</span>
  <span class="nc">.mobile-typography</span> <span class="nt">a</span><span class="o">,</span> <span class="nc">.mobile-typography</span> <span class="nt">button</span> <span class="p">{</span>
    <span class="nl">min-height</span><span class="p">:</span> <span class="m">44px</span><span class="p">;</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">44px</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">0.75rem</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c">/* High DPI display adjustments */</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">-webkit-min-device-pixel-ratio</span><span class="p">:</span> <span class="m">2</span><span class="p">),</span> <span class="p">(</span><span class="n">min-resolution</span><span class="p">:</span> <span class="m">192dpi</span><span class="p">)</span> <span class="p">{</span>
  <span class="nc">.high-dpi-text</span> <span class="p">{</span>
    <span class="nl">-webkit-font-smoothing</span><span class="p">:</span> <span class="n">subpixel-antialiased</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="conclusion">Conclusion</h2>

<p>Advanced text styling and formatting in Markdown transforms basic content into sophisticated, professionally designed documents that engage readers through superior typography while maintaining accessibility and performance standards. By mastering CSS integration, platform-specific implementations, and accessibility considerations, content creators can produce documentation that rivals traditional publishing quality while preserving Markdown’s simplicity and portability.</p>

<p>The key to successful typography implementation lies in understanding the relationship between text structure, visual design, and user experience, then applying these principles consistently throughout your content creation workflow. Whether you’re developing technical documentation, marketing materials, or academic content, the techniques covered in this guide provide the foundation for professional text styling that enhances both readability and visual appeal.</p>

<p>Remember to test your typography implementations across different browsers and devices, validate accessibility compliance with assistive technologies, and optimize font loading for fast performance. With proper text styling and formatting control, your Markdown content becomes a powerful platform for communication that engages users through thoughtful design while maintaining the flexibility and simplicity that makes Markdown an ideal choice for modern content creation workflows.</p>

  </div><a class="u-url" href="/posts/markdown-text-styling-formatting-complete-guide" hidden></a>
</article>

            </main>
            
            <footer class="pdf-footer">
                <p>Generated from MarkdownTools Blog</p>
            </footer>
        </body>
        </html>
      HTML
    end
    
    def get_print_styles
      styles_path = File.join(@site.source, 'assets', 'css', 'print.css')
      
      if File.exist?(styles_path)
        File.read(styles_path)
      else
        # Return basic print styles
        basic_print_styles
      end
    end
    
    def basic_print_styles
      <<~CSS
        @media print {
          body {
            font-family: Georgia, serif;
            font-size: 12pt;
            line-height: 1.4;
            color: #000;
            background: white;
          }
          
          .pdf-header {
            text-align: center;
            margin-bottom: 2em;
            page-break-after: avoid;
          }
          
          .pdf-header h1 {
            font-size: 18pt;
            margin-bottom: 0.5em;
          }
          
          .author, .date {
            font-size: 10pt;
            color: #666;
          }
          
          .pdf-heading {
            page-break-after: avoid;
            margin-top: 1.5em;
          }
          
          .pdf-table {
            border-collapse: collapse;
            width: 100%;
            margin: 1em 0;
          }
          
          .pdf-table th, .pdf-table td {
            border: 1px solid #000;
            padding: 6pt;
          }
          
          .pdf-code {
            font-family: Courier, monospace;
            font-size: 10pt;
            background: #f5f5f5;
            border: 1px solid #ccc;
            padding: 8pt;
            page-break-inside: avoid;
          }
          
          .page-break-before {
            page-break-before: always;
          }
          
          .pdf-footer {
            margin-top: 2em;
            padding-top: 1em;
            border-top: 1px solid #ccc;
            font-size: 10pt;
            text-align: center;
            color: #666;
          }
        }
      CSS
    end
    
    def generate_pdf_with_puppeteer(html_content, pdf_path, doc)
      # PDF generation options from configuration
      pdf_options = @config['pdf_options'] || {}
      
      default_options = {
        format: 'Letter',
        margin: {
          top: '1in',
          right: '1in',
          bottom: '1in',
          left: '1in'
        },
        print_background: true,
        prefer_css_page_size: true
      }
      
      options = default_options.merge(pdf_options)
      
      # Use Puppeteer to generate PDF
      Puppeteer.launch(headless: true) do |browser|
        page = browser.new_page
        page.set_content(html_content, wait_until: 'networkidle2')
        page.pdf(path: pdf_path, **options)
      end
    end
    
    def generate_combined_pdfs(output_dir)
      combined_configs = @config['combined_pdfs']
      
      combined_configs.each do |config|
        next unless config['name'] && config['collections']
        
        Jekyll.logger.info "PDF Generator:", "Generating combined PDF: #{config['name']}"
        
        # Collect documents
        documents = []
        config['collections'].each do |collection_name|
          collection = @site.collections[collection_name]
          next unless collection
          
          collection_docs = collection.docs.select { |doc| should_generate_pdf?(doc) }
          collection_docs = collection_docs.sort_by { |doc| doc.data['date'] || Time.now } if config['sort_by_date']
          documents.concat(collection_docs)
        end
        
        # Generate combined HTML
        combined_content = generate_combined_content(documents, config)
        
        # Generate combined PDF
        pdf_filename = "#{config['name']}.pdf"
        pdf_path = File.join(output_dir, pdf_filename)
        
        generate_pdf_with_puppeteer(combined_content, pdf_path, nil)
        
        Jekyll.logger.info "PDF Generator:", "Generated combined PDF: #{pdf_filename}"
      end
    end
    
    def generate_combined_content(documents, config)
      content_parts = []
      
      # Add title page if configured
      if config['title_page']
        content_parts << generate_title_page(config['title_page'])
      end
      
      # Add table of contents if configured
      if config['table_of_contents']
        content_parts << generate_table_of_contents(documents)
      end
      
      # Add documents
      documents.each_with_index do |doc, index|
        # Add page break between documents
        content_parts << '<div class="page-break-before"></div>' if index > 0
        
        # Add document content
        doc_content = prepare_html_content(doc)
        content_parts << extract_body_content(doc_content)
      end
      
      # Wrap in complete HTML document
      template_vars = {
        'title' => config['title'] || config['name'],
        'author' => config['author'] || @site.config['author'],
        'date' => Time.now.strftime('%B %d, %Y'),
        'content' => content_parts.join("\n"),
        'print_styles' => get_print_styles,
        'site' => @site.config
      }
      
      liquid_template = Liquid::Template.parse(get_pdf_template)
      liquid_template.render(template_vars)
    end
    
    def generate_title_page(title_config)
      <<~HTML
        <div class="title-page">
          <h1>#{title_config['title']}</h1>
          #{title_config['subtitle'] ? "<h2>#{title_config['subtitle']}</h2>" : ''}
          #{title_config['author'] ? "<p class='author'>#{title_config['author']}</p>" : ''}
          #{title_config['date'] ? "<p class='date'>#{title_config['date']}</p>" : ''}
        </div>
        <div class="page-break-after"></div>
      HTML
    end
    
    def generate_table_of_contents(documents)
      toc_entries = documents.map.with_index do |doc, index|
        title = doc.data['title'] || doc.basename_without_ext
        "<div class='toc-entry'><span class='toc-title'>#{title}</span><span class='toc-page'>#{index + 1}</span></div>"
      end.join("\n")
      
      <<~HTML
        <div class="table-of-contents">
          <h2>Table of Contents</h2>
          #{toc_entries}
        </div>
        <div class="page-break-after"></div>
      HTML
    end
    
    def extract_body_content(html)
      # Extract content from <main> or <body> tags
      match = html.match(/<main[^>]*>(.*?)<\/main>/m) || html.match(/<body[^>]*>(.*?)<\/body>/m)
      match ? match[1] : html
    end
  end
end

Hugo PDF Shortcodes

Hugo shortcodes for PDF-optimized content:

<!-- layouts/shortcodes/pdf-chapter.html -->
{{ $title := .Get "title" | default .Page.Title }}
{{ $number := .Get "number" }}

<div class="chapter" data-chapter-title="{{ $title }}">
  {{ if $number }}
    <h1 class="chapter-title" data-chapter-number="{{ $number }}">{{ $title }}</h1>
  {{ else }}
    <h1 class="chapter-title">{{ $title }}</h1>
  {{ end }}
  
  {{ if .Get "summary" }}
    <div class="chapter-summary">{{ .Get "summary" | markdownify }}</div>
  {{ end }}
  
  <div class="chapter-content">
    {{ .Inner | markdownify }}
  </div>
</div>

<!-- layouts/shortcodes/pdf-table.html -->
{{ $caption := .Get "caption" }}
{{ $class := .Get "class" | default "data-table" }}

<div class="table-container">
  {{ if $caption }}
    <div class="table-caption">{{ $caption }}</div>
  {{ end }}
  
  <table class="{{ $class }}">
    {{ .Inner }}
  </table>
</div>

<!-- layouts/shortcodes/pdf-figure.html -->
{{ $src := .Get "src" }}
{{ $caption := .Get "caption" }}
{{ $alt := .Get "alt" | default $caption }}

<figure class="figure">
  <img src="{{ $src | relURL }}" alt="{{ $alt }}" class="figure-image">
  {{ if $caption }}
    <figcaption class="figure-caption">{{ $caption | markdownify }}</figcaption>
  {{ end }}
</figure>

<!-- layouts/shortcodes/pdf-code.html -->
{{ $language := .Get "lang" | default "text" }}
{{ $title := .Get "title" }}
{{ $file := .Get "file" }}

<div class="code-listing">
  {{ if $title }}
    <div class="code-listing-title">{{ $title }}</div>
  {{ end }}
  
  <pre class="code-listing-content" data-language="{{ $language }}"><code class="language-{{ $language }}">{{- if $file -}}{{ readFile $file }}{{- else -}}{{ .Inner }}{{- end -}}</code></pre>
</div>

<!-- layouts/shortcodes/pdf-pagebreak.html -->
<div class="page-break-before"></div>

<!-- layouts/shortcodes/pdf-note.html -->
{{ $type := .Get "type" | default "note" }}
{{ $title := .Get "title" }}

<div class="{{ $type }}-box">
  {{ if $title }}
    <div class="note-title">{{ $title }}</div>
  {{ end }}
  {{ .Inner | markdownify }}
</div>

Hugo Content Usage:

This chapter provides a comprehensive introduction to the system design.

## System Overview

The architecture follows a microservices pattern with the following components:

| Component | Purpose | Technology |
|-----------|---------|------------|
| API Gateway | Request routing | Node.js |
| User Service | Authentication | Python |
| Data Service | Storage | PostgreSQL |

const express = require('express');
const app = express();

app.use('/api/users', userRoutes);
app.use('/api/data', dataRoutes);

app.listen(3000, () => {
  console.log('API Gateway running on port 3000');
});

Always validate and sanitize input data before processing to prevent security vulnerabilities.

This chapter covers the detailed implementation of each component.

Integration with Modern Workflows

Print styles and PDF formatting integrate seamlessly with comprehensive Markdown workflows. When combined with document versioning and change tracking, professional PDF output ensures version-controlled document distribution that maintains formatting consistency across revisions while enabling collaborative development of complex publications.

For comprehensive documentation systems requiring both digital and print delivery, PDF formatting works effectively with custom CSS classes and styling to create design systems that translate seamlessly from web presentation to professional print output while maintaining brand identity and visual hierarchy.

When managing enterprise documentation workflows, print styles complement blockquote advanced styling to create professional publications that effectively communicate complex information through both textual content and sophisticated visual presentation that works across digital screens and physical print media.

Troubleshooting Common PDF Issues

Font and Typography Problems

Problem: Fonts not rendering correctly in PDF output or missing special characters

Solutions:

/* Font fallback and embedding strategies */
@media print {
  /* Specify complete font stacks */
  body {
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
  code, pre {
    font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  }
  
  /* Ensure Unicode support */
  * {
    font-variant-numeric: normal;
    font-feature-settings: normal;
  }
  
  /* Fix for missing characters */
  .unicode-fix {
    font-family: 'Arial Unicode MS', Arial, sans-serif;
  }
  
  /* Web font fallbacks */
  @font-face {
    font-family: 'CustomFont';
    src: local('Georgia'), local('Times New Roman');
    font-display: block;
  }
}

PDF Generation Configuration:

// Puppeteer font handling
const pdfOptions = {
  format: 'Letter',
  margin: { top: '1in', right: '1in', bottom: '1in', left: '1in' },
  printBackground: true,
  preferCSSPageSize: true,
  
  // Font loading settings
  waitUntil: ['networkidle2', 'load'],
  timeout: 60000,
  
  // Ensure fonts are loaded
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-font-subpixel-positioning',
    '--enable-font-antialiasing'
  ]
};

Page Break and Layout Issues

Problem: Content breaking awkwardly across pages or overlapping page margins

Solutions:

@media print {
  /* Better page break control */
  .keep-together {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .force-page-break {
    page-break-before: always;
    break-before: page;
  }
  
  .avoid-page-break-after {
    page-break-after: avoid;
    break-after: avoid;
  }
  
  /* Fix for widows and orphans */
  p, li, dd {
    orphans: 3;
    widows: 3;
  }
  
  /* Heading page break control */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* List handling */
  ul, ol {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Table handling */
  table {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Image handling */
  img {
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: avoid;
    break-after: avoid;
    max-width: 100%;
    height: auto;
  }
  
  /* Code block handling */
  pre {
    page-break-inside: avoid;
    break-inside: avoid;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

Color and Background Issues

Problem: Colors or backgrounds not appearing in PDF output

Solutions:

@media print {
  /* Force color and background printing */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Ensure backgrounds are printed */
  .highlight-box {
    background: #f0f8ff !important;
    -webkit-print-color-adjust: exact;
  }
  
  /* Convert colors to print-friendly versions */
  .screen-blue {
    color: #003366 !important; /* Darker for print */
    background: #e6f3ff !important; /* Lighter for print */
  }
  
  /* High contrast alternatives */
  @media print and (prefers-contrast: high) {
    .color-element {
      background: white !important;
      color: black !important;
      border: 2px solid black !important;
    }
  }
}

Puppeteer Configuration:

const page = await browser.newPage();

// Enable background graphics
await page.emulateMediaType('print');
await page.evaluateOnNewDocument(() => {
  document.documentElement.style.setProperty('-webkit-print-color-adjust', 'exact');
});

await page.pdf({
  path: outputPath,
  format: 'Letter',
  printBackground: true, // Critical for backgrounds
  preferCSSPageSize: true,
  margin: { top: '1in', right: '1in', bottom: '1in', left: '1in' }
});

Conclusion

Print styles and PDF formatting for Markdown documents transform digital content into professional publications that maintain design excellence, typography precision, and layout consistency across different output formats and distribution channels. By mastering CSS print media queries, automated PDF generation techniques, and platform-specific implementations, content creators can produce high-quality documents that serve both digital and physical publication requirements.

The key to successful print formatting lies in understanding the fundamental differences between screen and print media, implementing robust CSS that handles page breaks gracefully, and choosing appropriate PDF generation tools that meet specific project requirements. Whether you’re creating technical documentation, academic papers, or business reports, the techniques covered in this guide provide the foundation for professional document output that maintains quality across all distribution formats.

Remember to test your print styles across different PDF generators and browsers, validate output quality with various paper sizes and printer settings, and implement automated workflows that ensure consistent results across large document sets. With proper print style implementation, your Markdown content becomes a powerful platform for professional publication that bridges the gap between digital creation and physical distribution while maintaining the simplicity and portability that makes Markdown ideal for modern content workflows.