[{"data":1,"prerenderedAt":81},["Reactive",2],{"blog-post-markdown-line-height-spacing-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":55,"related":56},"markdown-line-height-spacing-complete-guide","Markdown Line Height and Spacing: Complete Guide for Professional Typography and Layout Control","Master line height, spacing, and typography controls in Markdown for professional document layouts. Learn CSS integration, platform-specific implementations, and advanced spacing techniques for enhanced readability and visual appeal.","Line height and spacing control in Markdown enables professional typography that transforms plain text documents into visually appealing, readable content with proper vertical rhythm and enhanced…","2025-09-12","Tutorial","Matthew Rathbone","markdown line height, markdown spacing, markdown typography, line spacing markdown, paragraph spacing markdown, markdown css styling, document formatting markdown, professional markdown layout",18,"\u003Cp>Line height and spacing control in Markdown enables professional typography that transforms plain text documents into visually appealing, readable content with proper vertical rhythm and enhanced user experience. While standard Markdown doesn't include native spacing controls, various platforms, CSS integration techniques, and custom solutions provide sophisticated typography management that elevates documentation quality to professional publishing standards.\u003C/p>\n\u003Ch2 id=\"why-control-line-height-and-spacing-in-markdown\">Why Control Line Height and Spacing in Markdown?\u003C/h2>\n\u003Cp>Professional typography and spacing provide essential benefits for document quality:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Readability Enhancement\u003C/strong>: Proper line spacing reduces eye strain and improves text comprehension by 15-25%\u003C/li>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Strategic spacing creates clear content organization and guides reader attention\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Consistent typography elevates documentation from amateur to professional presentation\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Compliance\u003C/strong>: Adequate spacing meets WCAG guidelines for users with visual impairments\u003C/li>\n\u003Cli>\u003Cstrong>Brand Consistency\u003C/strong>: Controlled typography maintains consistent visual identity across documentation\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"understanding-line-height-fundamentals\">Understanding Line Height Fundamentals\u003C/h2>\n\u003Ch3 id=\"typography-basics-in-digital-content\">Typography Basics in Digital Content\u003C/h3>\n\u003Cp>Line height (leading) represents the vertical space between text lines, measured as a ratio or absolute value:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Line height examples */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* 150% of font size - recommended for body text */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* 120% - suitable for headings */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;       \u003Cspan class=\"hljs-comment\">/* Absolute pixel value */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6em\u003C/span>;      \u003Cspan class=\"hljs-comment\">/* Relative to font size */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: normal;     \u003Cspan class=\"hljs-comment\">/* Browser default (typically 1.2) */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Optimal line heights for different content types */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.body-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* 25.6px spacing for optimal readability */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.heading-primary\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">32px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* 38.4px - tighter for impact */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.code-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Courier New'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* Slightly tighter for code readability */\u003C/span>\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"reading-comfort-and-eye-tracking\">Reading Comfort and Eye Tracking\u003C/h3>\n\u003Cp>Scientific studies show optimal line height relationships:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Body text\u003C/strong>: 1.4-1.6 line-height for maximum reading comfort\u003C/li>\n\u003Cli>\u003Cstrong>Headlines\u003C/strong>: 1.1-1.3 for visual impact and space efficiency  \u003C/li>\n\u003Cli>\u003Cstrong>Code blocks\u003C/strong>: 1.3-1.5 to maintain character alignment\u003C/li>\n\u003Cli>\u003Cstrong>Dense content\u003C/strong>: 1.6-1.8 for technical documentation with complex information\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"css-integration-with-markdown\">CSS Integration with Markdown\u003C/h2>\n\u003Ch3 id=\"inline-styling-for-immediate-control\">Inline Styling for Immediate Control\u003C/h3>\n\u003Cp>Direct HTML and CSS integration within Markdown:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Custom Spacing Examples\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"line-height: 1.8; margin-bottom: 2em;"\u003C/span>>\u003C/span>\u003C/span>\nThis paragraph demonstrates increased line height for enhanced readability. The 1.8 line-height creates generous vertical spacing between lines, making dense technical content easier to follow and reducing reader fatigue during extended reading sessions.\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"line-height: 1.2; margin: 1.5em 0; font-weight: 600;"\u003C/span>>\u003C/span>\u003C/span>\nThis heading-style paragraph uses tighter line height (1.2) for visual impact while maintaining readability. The reduced spacing creates a more compact appearance suitable for introductory or summary content.\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\n<!-- Spacing control with CSS classes -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"spaced-content"\u003C/span>>\u003C/span>\u003C/span>\nTraditional Markdown paragraph formatting provides basic readability, but lacks the fine-grained control necessary for professional typography. By integrating CSS styling, we can create sophisticated layouts that enhance both aesthetic appeal and functional readability.\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.spaced-content {\n  line-height: 1.65;\n  margin: 2.5em 0;\n  padding: 1em;\n  border-left: 4px solid #007acc;\n  background-color: #f8f9fa;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"external-css-for-systematic-control\">External CSS for Systematic Control\u003C/h3>\n\u003Cp>Comprehensive stylesheet approach for consistent typography:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* markdown-typography.css - Complete spacing system */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Root typography variables */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--base-font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--base-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--heading-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--code-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">/* Spacing scale based on typography */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--space-xs\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;   \u003Cspan class=\"hljs-comment\">/* 8px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--space-sm\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;     \u003Cspan class=\"hljs-comment\">/* 16px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--space-md\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;   \u003Cspan class=\"hljs-comment\">/* 24px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--space-lg\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;     \u003Cspan class=\"hljs-comment\">/* 32px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--space-xl\u003C/span>: \u003Cspan class=\"hljs-number\">3rem\u003C/span>;     \u003Cspan class=\"hljs-comment\">/* 48px */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Base document styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-font-size);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-line-height);\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">65ch\u003C/span>;      \u003Cspan class=\"hljs-comment\">/* Optimal reading measure */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-lg);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Heading hierarchy with proportional spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-xl) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-lg) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.02em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-xl) * \u003Cspan class=\"hljs-number\">0.8\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-md) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.01em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-lg) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-sm) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span>, \n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h5\u003C/span>, \n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h6\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.125em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--heading-line-height);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-md) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-xs) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Paragraph and text block spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-md) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced list spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>, \n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-md) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-xs);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Nested list spacing refinement */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> > \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> > \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-xs) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Code block typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2d3748\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-md);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-lg) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--code-line-height);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, \u003Cspan class=\"hljs-string\">'Roboto Mono'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Inline code spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f3f4\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.2em\u003C/span> \u003Cspan class=\"hljs-number\">0.4em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Blockquote enhanced typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-lg) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-sm) \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-md);\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> + \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-sm);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-typography-for-multiple-devices\">Responsive Typography for Multiple Devices\u003C/h3>\n\u003Cp>Adaptive spacing that maintains readability across screen sizes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Responsive typography scaling */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--base-font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-xs\u003C/span>: \u003Cspan class=\"hljs-number\">0.4rem\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-sm\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-md\u003C/span>: \u003Cspan class=\"hljs-number\">1.2rem\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-lg\u003C/span>: \u003Cspan class=\"hljs-number\">1.6rem\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-xl\u003C/span>: \u003Cspan class=\"hljs-number\">2.4rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--space-md);\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.6em\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1200px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--base-font-size\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-xl\u003C/span>: \u003Cspan class=\"hljs-number\">4rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">70ch\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* High DPI display optimizations */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">-webkit-min-device-pixel-ratio\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>),\n       screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-resolution\u003C/span>: \u003Cspan class=\"hljs-number\">192dpi\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n    -webkit-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: antialiased;\n    -moz-osx-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: grayscale;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-implementation\">Platform-Specific Implementation\u003C/h2>\n\u003Ch3 id=\"github-pages-and-jekyll-integration\">GitHub Pages and Jekyll Integration\u003C/h3>\n\u003Cp>Jekyll-based spacing control with Liquid templating:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _layouts/post.html -->\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <title>{{ page.title }}</title>\n  \n  <!-- Typography CSS -->\n  <link rel="stylesheet" href="{{ '/assets/css/typography.css' | relative_url }}">\n  \n  {% if page.custom_spacing %}\n  <style>\n    .post-content {\n      line-height: {{ page.custom_spacing.line_height | default: 1.6 }};\n      letter-spacing: {{ page.custom_spacing.letter_spacing | default: 'normal' }};\n    }\n    \n    .post-content h2 {\n      margin-top: {{ page.custom_spacing.heading_margin_top | default: '2em' }};\n      margin-bottom: {{ page.custom_spacing.heading_margin_bottom | default: '1em' }};\n    }\n  </style>\n  {% endif %}\n</head>\n<body>\n  <article class="post-content markdown-content">\n    <h1>{{ page.title }}</h1>\n    \n    {% if page.description %}\n    <div class="post-description" style="line-height: 1.5; margin: 1.5em 0; font-size: 1.125em; color: #6b7280;">\n      {{ page.description }}\n    </div>\n    {% endif %}\n    \n    <div class="post-body">\n      {{ content }}\n    </div>\n  </article>\n</body>\n</html>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Frontmatter Spacing Configuration\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-meta\">---\u003C/span>\n\u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Advanced Typography Example"\u003C/span>\n\u003Cspan class=\"hljs-attr\">description:\u003C/span> \u003Cspan class=\"hljs-string\">"Demonstrating custom spacing controls"\u003C/span>\n\u003Cspan class=\"hljs-attr\">custom_spacing:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">line_height:\u003C/span> \u003Cspan class=\"hljs-number\">1.7\u003C/span>\n  \u003Cspan class=\"hljs-attr\">letter_spacing:\u003C/span> \u003Cspan class=\"hljs-string\">"0.01em"\u003C/span>\n  \u003Cspan class=\"hljs-attr\">heading_margin_top:\u003C/span> \u003Cspan class=\"hljs-string\">"2.5em"\u003C/span>\n  \u003Cspan class=\"hljs-attr\">heading_margin_bottom:\u003C/span> \u003Cspan class=\"hljs-string\">"1.2em"\u003C/span>\n\u003Cspan class=\"hljs-attr\">layout:\u003C/span> \u003Cspan class=\"hljs-string\">post\u003C/span>\n\u003Cspan class=\"hljs-meta\">---\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-static-site-typography\">Hugo Static Site Typography\u003C/h3>\n\u003Cp>Hugo shortcode system for spacing control:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/spaced-content.html -->\n{{ $line_height := .Get "line-height" | default "1.6" }}\n{{ $margin := .Get "margin" | default "1.5em 0" }}\n{{ $padding := .Get "padding" | default "0" }}\n\n<div style="line-height: {{ $line_height }}; margin: {{ $margin }}; padding: {{ $padding }};" class="spaced-content">\n  {{ .Inner | markdownify }}\n</div>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/typography-block.html -->\n{{ $variant := .Get "variant" | default "body" }}\n{{ $spacing := .Get "spacing" | default "normal" }}\n\n{{ if eq $variant "tight" }}\n  <div class="typography-tight" style="line-height: 1.4; margin: 1em 0;">\n{{ else if eq $variant "loose" }}\n  <div class="typography-loose" style="line-height: 1.8; margin: 2em 0;">\n{{ else if eq $variant "code" }}\n  <div class="typography-code" style="line-height: 1.5; font-family: monospace; margin: 1.5em 0;">\n{{ else }}\n  <div class="typography-body" style="line-height: 1.6; margin: 1.5em 0;">\n{{ end }}\n    {{ .Inner | markdownify }}\n  </div>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Hugo Content Usage\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">## Standard Spacing Example\u003C/span>\n\nRegular paragraph with default spacing and line height.\n\n{{< spaced-content line-height="1.8" margin="2em 0" >}}\nThis content block demonstrates increased line height (1.8) with expanded margin spacing. The generous vertical rhythm improves readability for dense technical content while maintaining professional appearance.\n{{< /spaced-content >}}\n\n{{< typography-block variant="tight" >}}\nThis tight typography variant uses reduced line height and margin for compact information display. Ideal for sidebar content, captions, or supplementary information that needs to conserve vertical space.\n{{< /typography-block >}}\n\n{{< typography-block variant="loose" >}}\nThe loose typography variant provides expanded spacing for emphasis or improved readability in critical sections. This approach works well for introductory paragraphs, key concepts, or content requiring careful reader attention.\n{{< /typography-block >}}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"obsidian-custom-css-implementation\">Obsidian Custom CSS Implementation\u003C/h3>\n\u003Cp>Obsidian CSS snippets for enhanced Markdown typography:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* obsidian-typography.css - Custom spacing for Obsidian */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Vault-wide typography improvements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-source-view\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mod-cm6\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cm-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced heading spacing in edit mode */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-source-view\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mod-cm6\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cm-header-1\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-source-view\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mod-cm6\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cm-header-2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">1.8em\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Preview mode spacing refinement */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.02em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.8em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.8em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.25\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.01em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.6em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced paragraph spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* List item spacing improvements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Code block typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Blockquote enhanced spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-left-width\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table typography improvements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span> \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-spacing-techniques\">Advanced Spacing Techniques\u003C/h2>\n\u003Ch3 id=\"vertical-rhythm-systems\">Vertical Rhythm Systems\u003C/h3>\n\u003Cp>Mathematical approach to consistent spacing relationships:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Vertical rhythm based on baseline grid */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--baseline\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;      \u003Cspan class=\"hljs-comment\">/* Base unit for vertical rhythm */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--rhythm-1\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--baseline) * \u003Cspan class=\"hljs-number\">1\u003C/span>);    \u003Cspan class=\"hljs-comment\">/* 24px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--rhythm-2\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--baseline) * \u003Cspan class=\"hljs-number\">2\u003C/span>);    \u003Cspan class=\"hljs-comment\">/* 48px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--rhythm-3\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--baseline) * \u003Cspan class=\"hljs-number\">3\u003C/span>);    \u003Cspan class=\"hljs-comment\">/* 72px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--rhythm-half\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--baseline) * \u003Cspan class=\"hljs-number\">0.5\u003C/span>); \u003Cspan class=\"hljs-comment\">/* 12px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--rhythm-quarter\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--baseline) * \u003Cspan class=\"hljs-number\">0.25\u003C/span>); \u003Cspan class=\"hljs-comment\">/* 6px */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-rhythmic\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-rhythmic\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">3\u003C/span>) / \u003Cspan class=\"hljs-number\">2.5em\u003C/span>); \u003Cspan class=\"hljs-comment\">/* Maintain baseline alignment */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">2\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-rhythmic\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">2\u003C/span>) / \u003Cspan class=\"hljs-number\">2em\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">2\u003C/span>) * \u003Cspan class=\"hljs-number\">0.75\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-half) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-rhythmic\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-rhythmic\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-rhythmic\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-rhythmic\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">2\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--rhythm-\u003Cspan class=\"hljs-number\">1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Visual baseline grid for development */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.show-baseline\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-image\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\n    to bottom,\n    \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">120\u003C/span>, \u003Cspan class=\"hljs-number\">204\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>) \u003Cspan class=\"hljs-number\">0%\u003C/span>,\n    \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">120\u003C/span>, \u003Cspan class=\"hljs-number\">204\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>) \u003Cspan class=\"hljs-number\">1px\u003C/span>,\n    transparent \u003Cspan class=\"hljs-number\">1px\u003C/span>\n  );\n  \u003Cspan class=\"hljs-attribute\">background-size\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--baseline);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"context-aware-spacing\">Context-Aware Spacing\u003C/h3>\n\u003Cp>Dynamic spacing based on content context and reading patterns:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Context-sensitive spacing system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--base-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tighter spacing for technical content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.technical-content\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--base-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">1.2rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Expanded spacing for narrative content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.narrative-content\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--base-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Code-heavy documents */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.code-focused\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-spacing) * \u003Cspan class=\"hljs-number\">1.5\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.code-focused\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> + pre,\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.code-focused\u003C/span> pre + \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-spacing) * \u003Cspan class=\"hljs-number\">0.75\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reference documentation spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.reference-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-spacing) * \u003Cspan class=\"hljs-number\">0.8\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-spacing) * \u003Cspan class=\"hljs-number\">0.3\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.reference-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">dt\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-spacing);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-adaptive\u003C/span>\u003Cspan class=\"hljs-selector-class\">.reference-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">dd\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-spacing) * \u003Cspan class=\"hljs-number\">0.5\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"print-optimized-typography\">Print-Optimized Typography\u003C/h3>\n\u003Cp>Spacing adjustments for print media:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Print-specific typography */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--base-font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12pt\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--base-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-sm\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-md\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--space-lg\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">18pt\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.5in\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.25in\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">page-break-after\u003C/span>: avoid;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16pt\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.4in\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.2in\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.25\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">page-break-after\u003C/span>: avoid;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.2in\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n    \u003Cspan class=\"hljs-attribute\">orphans\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">widows\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> pre {\n    \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.25in\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.1in\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1pt\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Prevent awkward page breaks */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    \u003Cspan class=\"hljs-attribute\">page-break-after\u003C/span>: avoid;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.markdown-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0.2in\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-line-height-control\">Platform-Specific Line Height Control\u003C/h2>\n\u003Ch3 id=\"github-markdown-styling\">GitHub Markdown Styling\u003C/h3>\n\u003Cp>Custom CSS for GitHub-style documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* GitHub-inspired typography system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, \u003Cspan class=\"hljs-string\">'Noto Sans'\u003C/span>, Helvetica, Arial, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#24292f\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#d0d7de\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.3em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.25\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.25\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.25em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.25\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#656d76\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.25em\u003C/span> solid \u003Cspan class=\"hljs-number\">#d0d7de\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> + \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.25em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.github-markdown\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">85%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.45\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f6f8fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"gitlab-documentation-styling\">GitLab Documentation Styling\u003C/h3>\n\u003Cp>GitLab's documentation typography approach:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* GitLab documentation typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, \u003Cspan class=\"hljs-string\">'Noto Sans'\u003C/span>, Ubuntu, Cantarell, \u003Cspan class=\"hljs-string\">'Helvetica Neue'\u003C/span>, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#303030\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">400\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f1f1f\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f1f1f\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e5e5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f1f1f\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#2e2e2e\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f8f2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gitlab-docs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#fc6d26\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fdf4e7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"interactive-spacing-controls\">Interactive Spacing Controls\u003C/h2>\n\u003Ch3 id=\"dynamic-css-custom-properties\">Dynamic CSS Custom Properties\u003C/h3>\n\u003Cp>JavaScript-powered spacing adjustment interface:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Interactive spacing control interface -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"spacing-controls"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"margin: 2em 0; padding: 1.5em; background: #f8f9fa; border-radius: 8px;"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>Typography Controls\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"control-group"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"line-height-slider"\u003C/span>>\u003C/span>Line Height:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"range"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"line-height-slider"\u003C/span> \u003Cspan class=\"hljs-attr\">min\u003C/span>=\u003Cspan class=\"hljs-string\">"1.0"\u003C/span> \u003Cspan class=\"hljs-attr\">max\u003C/span>=\u003Cspan class=\"hljs-string\">"2.5"\u003C/span> \u003Cspan class=\"hljs-attr\">step\u003C/span>=\u003Cspan class=\"hljs-string\">"0.1"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"1.6"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"line-height-value"\u003C/span>>\u003C/span>1.6\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"control-group"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"paragraph-spacing-slider"\u003C/span>>\u003C/span>Paragraph Spacing:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"range"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"paragraph-spacing-slider"\u003C/span> \u003Cspan class=\"hljs-attr\">min\u003C/span>=\u003Cspan class=\"hljs-string\">"0.5"\u003C/span> \u003Cspan class=\"hljs-attr\">max\u003C/span>=\u003Cspan class=\"hljs-string\">"3.0"\u003C/span> \u003Cspan class=\"hljs-attr\">step\u003C/span>=\u003Cspan class=\"hljs-string\">"0.25"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"1.5"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"paragraph-spacing-value"\u003C/span>>\u003C/span>1.5em\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"control-group"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"heading-spacing-slider"\u003C/span>>\u003C/span>Heading Spacing:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"range"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"heading-spacing-slider"\u003C/span> \u003Cspan class=\"hljs-attr\">min\u003C/span>=\u003Cspan class=\"hljs-string\">"1.0"\u003C/span> \u003Cspan class=\"hljs-attr\">max\u003C/span>=\u003Cspan class=\"hljs-string\">"4.0"\u003C/span> \u003Cspan class=\"hljs-attr\">step\u003C/span>=\u003Cspan class=\"hljs-string\">"0.25"\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"2.0"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"heading-spacing-value"\u003C/span>>\u003C/span>2.0em\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">onclick\u003C/span>=\u003Cspan class=\"hljs-string\">"resetTypography()"\u003C/span>>\u003C/span>Reset to Defaults\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-comment\">// Interactive typography adjustment\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">updateTypography\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> lineHeight = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'line-height-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> paragraphSpacing = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'paragraph-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> headingSpacing = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'heading-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">// Update CSS custom properties\u003C/span>\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-title function_\">setProperty\u003C/span>(\u003Cspan class=\"hljs-string\">'--dynamic-line-height'\u003C/span>, lineHeight);\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-title function_\">setProperty\u003C/span>(\u003Cspan class=\"hljs-string\">'--dynamic-paragraph-spacing'\u003C/span>, paragraphSpacing + \u003Cspan class=\"hljs-string\">'em'\u003C/span>);\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-title function_\">setProperty\u003C/span>(\u003Cspan class=\"hljs-string\">'--dynamic-heading-spacing'\u003C/span>, headingSpacing + \u003Cspan class=\"hljs-string\">'em'\u003C/span>);\n  \n  \u003Cspan class=\"hljs-comment\">// Update display values\u003C/span>\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'line-height-value'\u003C/span>).\u003Cspan class=\"hljs-property\">textContent\u003C/span> = lineHeight;\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'paragraph-spacing-value'\u003C/span>).\u003Cspan class=\"hljs-property\">textContent\u003C/span> = paragraphSpacing + \u003Cspan class=\"hljs-string\">'em'\u003C/span>;\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'heading-spacing-value'\u003C/span>).\u003Cspan class=\"hljs-property\">textContent\u003C/span> = headingSpacing + \u003Cspan class=\"hljs-string\">'em'\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">// Store preferences in localStorage\u003C/span>\n  \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">setItem\u003C/span>(\u003Cspan class=\"hljs-string\">'typography-preferences'\u003C/span>, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>({\n    \u003Cspan class=\"hljs-attr\">lineHeight\u003C/span>: lineHeight,\n    \u003Cspan class=\"hljs-attr\">paragraphSpacing\u003C/span>: paragraphSpacing,\n    \u003Cspan class=\"hljs-attr\">headingSpacing\u003C/span>: headingSpacing\n  }));\n}\n\n\u003Cspan class=\"hljs-comment\">// Apply dynamic styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> dynamicStyles = \u003Cspan class=\"hljs-string\">`\n.dynamic-typography p {\n  line-height: var(--dynamic-line-height, 1.6);\n  margin-bottom: var(--dynamic-paragraph-spacing, 1.5em);\n}\n\n.dynamic-typography h2,\n.dynamic-typography h3 {\n  margin-top: var(--dynamic-heading-spacing, 2em);\n  margin-bottom: calc(var(--dynamic-heading-spacing, 2em) * 0.5);\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Add event listeners\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'line-height-slider'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, updateTypography);\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'paragraph-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, updateTypography);\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'heading-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, updateTypography);\n\n\u003Cspan class=\"hljs-comment\">// Load saved preferences\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> savedPreferences = \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">getItem\u003C/span>(\u003Cspan class=\"hljs-string\">'typography-preferences'\u003C/span>);\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (savedPreferences) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> prefs = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(savedPreferences);\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'line-height-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = prefs.\u003Cspan class=\"hljs-property\">lineHeight\u003C/span>;\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'paragraph-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = prefs.\u003Cspan class=\"hljs-property\">paragraphSpacing\u003C/span>;\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'heading-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = prefs.\u003Cspan class=\"hljs-property\">headingSpacing\u003C/span>;\n  \u003Cspan class=\"hljs-title function_\">updateTypography\u003C/span>();\n}\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">resetTypography\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'line-height-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'paragraph-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'heading-spacing-slider'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-number\">2.0\u003C/span>;\n  \u003Cspan class=\"hljs-title function_\">updateTypography\u003C/span>();\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-typography-classes\">Responsive Typography Classes\u003C/h3>\n\u003Cp>CSS classes for different spacing contexts:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Contextual spacing classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.spacing-compact\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--local-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-paragraph-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-heading-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spacing-comfortable\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--local-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-paragraph-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-heading-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spacing-generous\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--local-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.8\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-paragraph-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-heading-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spacing-presentation\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--local-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-paragraph-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--local-heading-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">3em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Apply contextual spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.spacing-compact\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-comfortable\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-generous\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-presentation\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--local-line-height);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spacing-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-generous\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-presentation\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--local-paragraph-spacing);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spacing-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-generous\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.spacing-presentation\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--local-heading-spacing);\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--local-heading-spacing) * \u003Cspan class=\"hljs-number\">0.6\u003C/span>);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-readability-optimization\">Accessibility and Readability Optimization\u003C/h2>\n\u003Ch3 id=\"wcag-compliance-for-typography\">WCAG Compliance for Typography\u003C/h3>\n\u003Cp>Meeting accessibility guidelines through proper spacing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* WCAG-compliant typography specifications */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> {\n  \u003Cspan class=\"hljs-comment\">/* WCAG 1.4.8: Visual Presentation */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;           \u003Cspan class=\"hljs-comment\">/* Minimum 1.5x font size */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.12em\u003C/span>;     \u003Cspan class=\"hljs-comment\">/* Recommended for readability */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">word-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.16em\u003C/span>;       \u003Cspan class=\"hljs-comment\">/* Enhanced word separation */\u003C/span>\n  \n  \u003Cspan class=\"hljs-comment\">/* WCAG 1.4.10: Reflow */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">80ch\u003C/span>;            \u003Cspan class=\"hljs-comment\">/* Optimal reading measure */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced contrast and spacing for accessibility */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* Clear paragraph separation */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;           \u003Cspan class=\"hljs-comment\">/* Avoid justified text */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;            \u003Cspan class=\"hljs-comment\">/* Clear heading separation */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;           \u003Cspan class=\"hljs-comment\">/* Tighter line height for headings */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus indicators for interactive elements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#005fcc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">95\u003C/span>, \u003Cspan class=\"hljs-number\">204\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;          \u003Cspan class=\"hljs-comment\">/* Increased for high contrast */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.15em\u003C/span>;    \u003Cspan class=\"hljs-comment\">/* More generous spacing */\u003C/span>\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span>;         \u003Cspan class=\"hljs-comment\">/* Extra separation in high contrast */\u003C/span>\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion preferences */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.accessible-typography\u003C/span> * {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dyslexia-friendly-typography\">Dyslexia-Friendly Typography\u003C/h3>\n\u003Cp>Specialized spacing for readers with dyslexia:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Dyslexia-optimized typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'OpenDyslexic'\u003C/span>, \u003Cspan class=\"hljs-string\">'Comic Sans MS'\u003C/span>, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.8\u003C/span>;           \u003Cspan class=\"hljs-comment\">/* Generous line spacing */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.1em\u003C/span>;      \u003Cspan class=\"hljs-comment\">/* Character separation */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">word-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.2em\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* Word separation */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;            \u003Cspan class=\"hljs-comment\">/* Adequate size */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;          \u003Cspan class=\"hljs-comment\">/* Extra paragraph separation */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;           \u003Cspan class=\"hljs-comment\">/* No justification */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">60ch\u003C/span>;            \u003Cspan class=\"hljs-comment\">/* Shorter lines */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">3em\u003C/span>;            \u003Cspan class=\"hljs-comment\">/* Clear heading breaks */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;          \u003Cspan class=\"hljs-comment\">/* Strong weight distinction */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;         \u003Cspan class=\"hljs-comment\">/* Spaced list items */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.8\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced visual structure */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.dyslexia-friendly\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007acc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-markdown-workflows\">Integration with Modern Markdown Workflows\u003C/h2>\n\u003Cp>Line height and spacing control integrates seamlessly with comprehensive Markdown workflows. When combined with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting capabilities\u003C/a>, proper typography ensures that code examples maintain optimal readability while preserving the visual hierarchy that guides readers through complex technical explanations.\u003C/p>\n\u003Cp>For documentation requiring both textual content and interactive elements, typography controls work effectively with \u003Ca href=\"/blog/markdown-collapsible-sections-guide\">collapsible sections\u003C/a> to create space-efficient layouts that can expand into properly spaced, readable content when activated by users.\u003C/p>\n\u003Cp>When creating comprehensive technical documentation, spacing techniques complement \u003Ca href=\"/blog/markdown-table-borders-styling-complete-guide\">table formatting and styling\u003C/a> to ensure that complex data presentations maintain consistent typography throughout the document while providing adequate spacing for visual clarity.\u003C/p>\n\u003Ch2 id=\"performance-considerations\">Performance Considerations\u003C/h2>\n\u003Ch3 id=\"css-optimization-for-typography\">CSS Optimization for Typography\u003C/h3>\n\u003Cp>Efficient stylesheet organization for typography performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Optimized typography CSS structure */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Critical typography - inline in <head> */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.critical-typography\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: system-ui, -apple-system, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.critical-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.critical-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.critical-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.75em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.critical-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Non-critical typography - load asynchronously */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen {\n  \u003Cspan class=\"hljs-selector-class\">.enhanced-typography\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-rendering\u003C/span>: optimizeLegibility;\n    -webkit-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: antialiased;\n    -moz-osx-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: grayscale;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.enhanced-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-variant\u003C/span>: small-caps;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.enhanced-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.enhanced-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'"'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">4em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0.2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"font-loading-and-performance\">Font Loading and Performance\u003C/h3>\n\u003Cp>Optimized web font loading strategies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Font loading optimization */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@font-face\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'OptimalReading'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">src\u003C/span>: \u003Cspan class=\"hljs-built_in\">url\u003C/span>(\u003Cspan class=\"hljs-string\">'/fonts/optimal-reading.woff2'\u003C/span>) \u003Cspan class=\"hljs-built_in\">format\u003C/span>(\u003Cspan class=\"hljs-string\">'woff2'\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">font-display\u003C/span>: swap;          \u003Cspan class=\"hljs-comment\">/* Prevent invisible text during font load */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">400\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: normal;\n}\n\n\u003Cspan class=\"hljs-keyword\">@font-face\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'OptimalReading'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">src\u003C/span>: \u003Cspan class=\"hljs-built_in\">url\u003C/span>(\u003Cspan class=\"hljs-string\">'/fonts/optimal-reading-bold.woff2'\u003C/span>) \u003Cspan class=\"hljs-built_in\">format\u003C/span>(\u003Cspan class=\"hljs-string\">'woff2'\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">font-display\u003C/span>: swap;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: normal;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Fallback font stack during loading */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-optimized\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'OptimalReading'\u003C/span>, -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Preload critical fonts */\u003C/span>\n\u003Cspan class=\"hljs-comment\">/* <link rel="preload" href="/fonts/optimal-reading.woff2" as="font" type="font/woff2" crossorigin> */\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-typography-issues\">Troubleshooting Common Typography Issues\u003C/h2>\n\u003Ch3 id=\"line-height-inheritance-problems\">Line Height Inheritance Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Inconsistent line heights across different elements\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Reset and normalize line heights */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-container\u003C/span> * {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: inherit;       \u003Cspan class=\"hljs-comment\">/* Inherit from parent */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;          \u003Cspan class=\"hljs-comment\">/* Set consistent base */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Override specific elements that need different spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Force heading line height */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-container\u003C/span> pre,\n\u003Cspan class=\"hljs-selector-class\">.markdown-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Force code line height */\u003C/span>\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"spacing-collapse-issues\">Spacing Collapse Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Margins collapsing between adjacent elements\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Prevent margin collapse with consistent spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.no-collapse\u003C/span> > * + * {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;         \u003Cspan class=\"hljs-comment\">/* Consistent top margins */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.no-collapse\u003C/span> > *\u003Cspan class=\"hljs-selector-pseudo\">:first\u003C/span>-child {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;             \u003Cspan class=\"hljs-comment\">/* Remove first element margin */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.no-collapse\u003C/span> > *\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;          \u003Cspan class=\"hljs-comment\">/* Remove last element margin */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Alternative: Use padding instead of margins */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.padding-spacing\u003C/span> > * {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-platform-rendering-differences\">Cross-Platform Rendering Differences\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Typography appears differently across operating systems and browsers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Normalize typography across platforms */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.cross-platform-typography\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, \u003Cspan class=\"hljs-string\">'Noto Sans'\u003C/span>, Ubuntu, sans-serif;\n  -webkit-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: antialiased;\n  -moz-osx-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: grayscale;\n  \u003Cspan class=\"hljs-attribute\">text-rendering\u003C/span>: optimizeLegibility;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Platform-specific adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@supports\u003C/span> (\u003Cspan class=\"hljs-attribute\">-webkit-appearance\u003C/span>: none) {\n  \u003Cspan class=\"hljs-comment\">/* Safari/WebKit specific */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.cross-platform-typography\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.01em\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@-moz-document\u003C/span> url-prefix() {\n  \u003Cspan class=\"hljs-comment\">/* Firefox specific */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.cross-platform-typography\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.65\u003C/span>;        \u003Cspan class=\"hljs-comment\">/* Slightly increase for Firefox */\u003C/span>\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-implementation-examples\">Advanced Implementation Examples\u003C/h2>\n\u003Ch3 id=\"documentation-website-typography-system\">Documentation Website Typography System\u003C/h3>\n\u003Cp>Complete typography implementation for professional documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Complete documentation typography system */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-comment\">/* Typography scale */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-xs\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;    \u003Cspan class=\"hljs-comment\">/* 12px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-sm\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;   \u003Cspan class=\"hljs-comment\">/* 14px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-base\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;     \u003Cspan class=\"hljs-comment\">/* 16px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-lg\u003C/span>: \u003Cspan class=\"hljs-number\">1.125rem\u003C/span>;   \u003Cspan class=\"hljs-comment\">/* 18px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;    \u003Cspan class=\"hljs-comment\">/* 20px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-2xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;    \u003Cspan class=\"hljs-comment\">/* 24px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-3xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.875rem\u003C/span>;  \u003Cspan class=\"hljs-comment\">/* 30px */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--font-size-4xl\u003C/span>: \u003Cspan class=\"hljs-number\">2.25rem\u003C/span>;   \u003Cspan class=\"hljs-comment\">/* 36px */\u003C/span>\n  \n  \u003Cspan class=\"hljs-comment\">/* Line height scale */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--line-height-tight\u003C/span>: \u003Cspan class=\"hljs-number\">1.25\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--line-height-snug\u003C/span>: \u003Cspan class=\"hljs-number\">1.375\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--line-height-normal\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--line-height-relaxed\u003C/span>: \u003Cspan class=\"hljs-number\">1.625\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--line-height-loose\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">/* Spacing scale */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--spacing-xs\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--spacing-sm\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--spacing-md\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--spacing-lg\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--spacing-xl\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--spacing-2xl\u003C/span>: \u003Cspan class=\"hljs-number\">3rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--spacing-3xl\u003C/span>: \u003Cspan class=\"hljs-number\">4rem\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">/* Color palette */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--color-text-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#1a202c\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--color-text-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#4a5568\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--color-text-muted\u003C/span>: \u003Cspan class=\"hljs-number\">#718096\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--color-accent\u003C/span>: \u003Cspan class=\"hljs-number\">#3182ce\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--color-background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--color-background-alt\u003C/span>: \u003Cspan class=\"hljs-number\">#f7fafc\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-base);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-normal);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-text-primary);\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-background);\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">65ch\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-xl);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Heading hierarchy */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-\u003Cspan class=\"hljs-number\">4\u003C/span>xl);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-tight);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-text-primary);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-\u003Cspan class=\"hljs-number\">3\u003C/span>xl) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-xl) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.025em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-\u003Cspan class=\"hljs-number\">3\u003C/span>xl);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-tight);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-text-primary);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-\u003Cspan class=\"hljs-number\">2\u003C/span>xl) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-lg) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-sm);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-\u003Cspan class=\"hljs-number\">2\u003C/span>xl);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-snug);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-text-primary);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-xl) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-md) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-xl);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-snug);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-text-secondary);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-lg) \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-sm) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Content spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-lg) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-relaxed);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Lists */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-lg) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-xl);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-sm);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-relaxed);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Code elements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-background-alt);\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-lg);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-xl) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-normal);\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-sm);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-background-alt);\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.2em\u003C/span> \u003Cspan class=\"hljs-number\">0.4em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Blockquotes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-accent);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-xl) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-md) \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-lg);\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-background-alt);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-relaxed);\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--color-text-secondary);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.documentation-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> + \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--spacing-md);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Line height and spacing control in Markdown transforms basic text documents into professionally typeset content that enhances readability, maintains visual hierarchy, and provides optimal user experience across different platforms and devices. By mastering CSS integration, platform-specific implementations, and advanced spacing techniques, content creators can produce documentation that meets both aesthetic and functional requirements for professional publishing.\u003C/p>\n\u003Cp>The key to successful typography implementation lies in understanding the relationship between line height, spacing, and readability, then applying these principles consistently across your documentation workflow. Whether you're creating technical specifications, user guides, or comprehensive reference materials, the techniques covered in this guide provide the foundation for professional typography that serves your readers effectively.\u003C/p>\n\u003Cp>Remember to test your typography implementations across different devices, validate accessibility compliance, and optimize performance for fast loading. With proper line height and spacing control, your Markdown content becomes not just informative, but genuinely pleasant to read, encouraging deeper engagement with your documentation and improving overall user satisfaction.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49,52],{"id":16,"text":17,"level":18},"why-control-line-height-and-spacing-in-markdown","Why Control Line Height and Spacing in Markdown?",2,{"id":20,"text":21,"level":18},"understanding-line-height-fundamentals","Understanding Line Height Fundamentals",{"id":23,"text":24,"level":18},"css-integration-with-markdown","CSS Integration with Markdown",{"id":26,"text":27,"level":18},"platform-specific-implementation","Platform-Specific Implementation",{"id":29,"text":30,"level":18},"advanced-spacing-techniques","Advanced Spacing Techniques",{"id":32,"text":33,"level":18},"platform-specific-line-height-control","Platform-Specific Line Height Control",{"id":35,"text":36,"level":18},"interactive-spacing-controls","Interactive Spacing Controls",{"id":38,"text":39,"level":18},"accessibility-and-readability-optimization","Accessibility and Readability Optimization",{"id":41,"text":42,"level":18},"integration-with-modern-markdown-workflows","Integration with Modern Markdown Workflows",{"id":44,"text":45,"level":18},"performance-considerations","Performance Considerations",{"id":47,"text":48,"level":18},"troubleshooting-common-typography-issues","Troubleshooting Common Typography Issues",{"id":50,"text":51,"level":18},"advanced-implementation-examples","Advanced Implementation Examples",{"id":53,"text":54,"level":18},"conclusion","Conclusion",[],[57,65,73],{"slug":58,"title":59,"description":60,"excerpt":61,"date":62,"category":9,"author":10,"keywords":63,"readingMinutes":64},"markdown-line-spacing-paragraph-formatting-complete-guide","Markdown Line Spacing and Paragraph Formatting: Complete Guide to Text Layout and Visual Spacing","Master Markdown line spacing, paragraph formatting, and text layout techniques. Learn to control spacing, create visual breaks, and format paragraphs for professional documentation and content.","Effective line spacing and paragraph formatting in Markdown enables precise control over text layout and visual presentation, creating professional documentation that guides reader attention and…","2026-01-04","markdown line spacing, paragraph formatting markdown, markdown text layout, markdown spacing control, paragraph breaks markdown, markdown visual spacing, text formatting markdown",10,{"slug":66,"title":67,"description":68,"excerpt":69,"date":70,"category":9,"author":10,"keywords":71,"readingMinutes":72},"markdown-table-cell-alignment-justify-complete-guide","Markdown Table Cell Alignment and Justify: Complete Guide for Professional Data Presentation and Typography Control","Master Markdown table cell alignment techniques including left, right, center, and justify alignment. Learn CSS integration, responsive alignment, and advanced typography control for professional data presentation.","Advanced table cell alignment and justification techniques in Markdown enable sophisticated data presentation that transforms raw information into visually compelling, professionally formatted…","2025-11-11","markdown table alignment, table cell alignment, markdown table justify, table text alignment, markdown table css styling, table typography control, professional table alignment, markdown table formatting",16,{"slug":74,"title":75,"description":76,"excerpt":77,"date":78,"category":9,"author":10,"keywords":79,"readingMinutes":80},"markdown-table-cell-padding-spacing-complete-guide","Markdown Table Cell Padding and Spacing: Complete Guide for Enhanced Readability and Professional Layout Design","Master table cell padding and spacing techniques in Markdown for improved readability and professional presentation. Learn CSS customization, responsive spacing, and advanced layout control for optimal data visualization.","Table cell padding and spacing control in Markdown enables professional data presentation that transforms dense, cramped information into visually accessible layouts with optimal readability and…","2025-11-08","markdown table padding, table cell spacing, markdown table css styling, table readability improvement, professional table design, markdown table customization, table layout optimization, table spacing techniques",17,1792184941611]