[{"data":1,"prerenderedAt":73},["Reactive",2],{"blog-post-markdown-text-styling-formatting-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":49,"related":50},"markdown-text-styling-formatting-complete-guide","Markdown Text Styling and Formatting: Complete Guide for Professional Typography and Visual Hierarchy","Master advanced text styling and formatting techniques in Markdown for professional typography, visual hierarchy, and enhanced readability. Learn CSS integration, platform-specific implementations, and accessibility best practices.","Advanced text styling and formatting in Markdown transforms basic content into professionally designed documents with sophisticated typography, visual hierarchy, and enhanced readability that…","2025-09-17","Tutorial","Matthew Rathbone","markdown text styling, markdown formatting, text typography markdown, markdown font styles, professional markdown formatting, text decoration markdown, markdown visual hierarchy, advanced text formatting",18,"\u003Cp>Advanced text styling and formatting in Markdown transforms basic content into professionally designed documents with sophisticated typography, visual hierarchy, and enhanced readability that engages readers while maintaining semantic structure. While standard Markdown provides fundamental text formatting capabilities, advanced techniques using CSS integration, custom styling, and platform-specific features enable precise typographic control that rivals traditional publishing systems.\u003C/p>\n\u003Ch2 id=\"why-master-advanced-text-styling-in-markdown\">Why Master Advanced Text Styling in Markdown?\u003C/h2>\n\u003Cp>Professional text formatting provides essential benefits for content creation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Clear typography establishes content structure and guides reader attention\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Sophisticated formatting elevates document quality and credibility\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced Readability\u003C/strong>: Strategic styling improves comprehension and reduces reading fatigue\u003C/li>\n\u003Cli>\u003Cstrong>Brand Consistency\u003C/strong>: Custom typography maintains visual identity across documentation\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Enhancement\u003C/strong>: Proper text styling improves content accessibility for diverse audiences\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-text-styling-techniques\">Foundation Text Styling Techniques\u003C/h2>\n\u003Ch3 id=\"standard-markdown-text-formatting\">Standard Markdown Text Formatting\u003C/h3>\n\u003Cp>Basic Markdown provides essential text styling options:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Fundamental Text Styling Elements\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Basic Text Emphasis\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Bold text**\u003C/span> using double asterisks or underscores\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-emphasis\">*Italic text*\u003C/span> using single asterisks or underscores  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**\u003Cspan class=\"hljs-emphasis\">*Bold and italic*\u003C/span>**\u003C/span> combining both markers\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> ~~Strikethrough text~~ using double tildes\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-code\">`Inline code`\u003C/span> using backticks\n\n\u003Cspan class=\"hljs-section\">## Extended Text Formatting\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> ==Highlighted text== (platform-dependent)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> ++Underlined text++ (platform-dependent)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> ^^Superscript^^ text formatting\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> ~~Subscript~~ text formatting\n\n\u003Cspan class=\"hljs-section\">## Character Escaping\u003C/span>\nUse backslashes to display literal characters:\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \\\u003Cspan class=\"hljs-emphasis\">*Literal asterisk\\*\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \\\u003Cspan class=\"hljs-emphasis\">_Literal underscore\\_\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \\\u003Cspan class=\"hljs-code\">`Literal backtick\\`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \\#Literal hash symbol\\#\n\n\u003Cspan class=\"hljs-section\">## Typography Examples\u003C/span>\nThis paragraph demonstrates \u003Cspan class=\"hljs-strong\">**strong emphasis**\u003C/span> for important concepts, \u003Cspan class=\"hljs-emphasis\">*subtle emphasis*\u003C/span> for key terms, and \u003Cspan class=\"hljs-code\">`code references`\u003C/span> for technical elements. The combination creates \u003Cspan class=\"hljs-strong\">**\u003Cspan class=\"hljs-emphasis\">*powerful emphasis*\u003C/span>**\u003C/span> when needed, while ~~strikethrough~~ indicates deprecated or incorrect information.\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-character-sets-and-special-symbols\">Advanced Character Sets and Special Symbols\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Professional Typography Characters\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Quotation Marks\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> "Standard straight quotes"\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> "Smart opening quote and closing quote"\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> 'Single smart quotes'\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> «French guillemets»\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> ‹Single guillemets›\n\n\u003Cspan class=\"hljs-section\">## Mathematical and Scientific Notation\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Fractions: ½, ⅓, ¼, ¾, ⅛\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Superscripts: x², y³, E=mc²\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Subscripts: H₂O, CO₂, CH₄\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Mathematical symbols: ±, ×, ÷, ≠, ≤, ≥, ∞\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Greek letters: α, β, γ, δ, π, σ, λ, μ\n\n\u003Cspan class=\"hljs-section\">## Currency and Business Symbols\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Currency: $, €, £, ¥, ₹, ₿\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Business: ©, ®, ™, §, ¶\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Arrows: →, ←, ↑, ↓, ↔, ⇒, ⇐\n\n\u003Cspan class=\"hljs-section\">## Punctuation and Spacing\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Em dash: — (longer dash for breaks)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> En dash: – (shorter dash for ranges) \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Ellipsis: … (three periods)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Non-breaking space:   (prevents line breaks)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Thin space:   (narrow spacing)\n\n\u003Cspan class=\"hljs-section\">## Example Usage\u003C/span>\nThe quarterly revenue increased 25%—a significant improvement over last year's performance. The temperature range was 68°F–72°F throughout the testing period. The company's R&D budget allocation follows the 70–20–10 rule: 70% for core products, 20% for emerging technologies, and 10% for breakthrough research.\n\u003C/code>\u003C/pre>\u003Ch2 id=\"css-integration-for-advanced-typography\">CSS Integration for Advanced Typography\u003C/h2>\n\u003Ch3 id=\"inline-styling-for-immediate-control\">Inline Styling for Immediate Control\u003C/h3>\n\u003Cp>HTML and CSS integration within Markdown content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Advanced Typography with CSS Integration\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Custom Font Styling\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-family: 'Georgia', serif; font-size: 1.2em; color: #2c3e50; font-weight: 300;"\u003C/span>>\u003C/span>\u003C/span>\nThis paragraph uses custom typography with Georgia serif font, increased size, custom color, and lighter font weight to create sophisticated text styling that enhances readability and visual appeal.\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Text Decoration Combinations\u003C/span>\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\">"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2em; border-radius: 8px; font-family: 'Helvetica Neue', sans-serif;"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"margin-top: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.3); font-weight: 300; letter-spacing: 2px;"\u003C/span>>\u003C/span>\u003C/span>FEATURED ANNOUNCEMENT\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\u003C/span>\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\">"font-size: 1.1em; line-height: 1.6; margin-bottom: 0;"\u003C/span>>\u003C/span>\u003C/span>This content block demonstrates advanced typography with custom fonts, text shadows, letter spacing, and gradient backgrounds for professional document presentation.\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Drop Caps and Initial Styling\u003C/span>\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\">"font-size: 16px; line-height: 1.6;"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"float: left; font-size: 4em; line-height: 0.8; padding-right: 8px; padding-top: 4px; font-family: Georgia, serif; color: #3182ce; font-weight: bold;"\u003C/span>>\u003C/span>\u003C/span>T\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>his paragraph demonstrates a traditional drop cap technique where the first letter is significantly larger and styled differently from the rest of the text. This classical typography approach draws reader attention and creates visual interest at the beginning of important sections or articles.\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Professional Text Highlighting\u003C/span>\nHere is some text with \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">mark\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #fff3cd; color: #856404; padding: 2px 4px; border-radius: 3px;"\u003C/span>>\u003C/span>\u003C/span>professional highlighting\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">mark\u003C/span>>\u003C/span>\u003C/span> and \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background: #e8f4fd; color: #1f2937; padding: 2px 6px; border-radius: 3px; border-left: 3px solid #3b82f6;"\u003C/span>>\u003C/span>\u003C/span>important information\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> styling.\n\u003C/code>\u003C/pre>\u003Ch3 id=\"external-stylesheet-integration\">External Stylesheet Integration\u003C/h3>\n\u003Cp>Comprehensive typography system for consistent formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* advanced-typography.css - Professional text styling system */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Import professional fonts */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@import\u003C/span> url(\u003Cspan class=\"hljs-string\">'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap'\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\">--font-primary\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\n  \u003Cspan class=\"hljs-attr\">--font-serif\u003C/span>: \u003Cspan class=\"hljs-string\">'Crimson Text'\u003C/span>, Georgia, \u003Cspan class=\"hljs-string\">'Times New Roman'\u003C/span>, serif;\n  \u003Cspan class=\"hljs-attr\">--font-mono\u003C/span>: \u003Cspan class=\"hljs-string\">'JetBrains Mono'\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  \n  \u003Cspan class=\"hljs-attr\">--text-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--text-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#4b5563\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--text-muted\u003C/span>: \u003Cspan class=\"hljs-number\">#9ca3af\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--text-accent\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \n  \u003Cspan class=\"hljs-attr\">--font-size-xs\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--font-size-sm\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--font-size-base\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--font-size-lg\u003C/span>: \u003Cspan class=\"hljs-number\">1.125rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--font-size-xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--font-size-2xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--font-size-3xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.875rem\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--font-size-4xl\u003C/span>: \u003Cspan class=\"hljs-number\">2.25rem\u003C/span>;\n  \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-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-attr\">--letter-spacing-tight\u003C/span>: -\u003Cspan class=\"hljs-number\">0.025em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--letter-spacing-normal\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--letter-spacing-wide\u003C/span>: \u003Cspan class=\"hljs-number\">0.025em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--letter-spacing-wider\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--letter-spacing-widest\u003C/span>: \u003Cspan class=\"hljs-number\">0.1em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Base typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">body\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-primary);\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>(--text-primary);\n  \u003Cspan class=\"hljs-attribute\">font-feature-settings\u003C/span>: \u003Cspan class=\"hljs-string\">'kern'\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-string\">'liga'\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-string\">'clig'\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-string\">'calt'\u003C/span> \u003Cspan class=\"hljs-number\">1\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-comment\">/* Heading typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-primary);\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-built_in\">var\u003C/span>(--line-height-tight);\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--letter-spacing-tight);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-primary);\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.75em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\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\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\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\">.typography-enhanced\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\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\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}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\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}\n\n\u003Cspan class=\"hljs-comment\">/* Paragraph and text styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.25em\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\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-class\">.lead\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-relaxed);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-secondary);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Text size utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-xs\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-xs); }\n\u003Cspan class=\"hljs-selector-class\">.text-sm\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-sm); }\n\u003Cspan class=\"hljs-selector-class\">.text-base\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-base); }\n\u003Cspan class=\"hljs-selector-class\">.text-lg\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-lg); }\n\u003Cspan class=\"hljs-selector-class\">.text-xl\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-xl); }\n\u003Cspan class=\"hljs-selector-class\">.text-2xl\u003C/span> { \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-selector-class\">.text-3xl\u003C/span> { \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-selector-class\">.text-4xl\u003C/span> { \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\n\u003Cspan class=\"hljs-comment\">/* Font weight utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.font-thin\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.font-light\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.font-normal\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">400\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.font-medium\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.font-semibold\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.font-bold\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.font-extrabold\u003C/span> { \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">800\u003C/span>; }\n\n\u003Cspan class=\"hljs-comment\">/* Line height utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.leading-tight\u003C/span> { \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-tight); }\n\u003Cspan class=\"hljs-selector-class\">.leading-normal\u003C/span> { \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-normal); }\n\u003Cspan class=\"hljs-selector-class\">.leading-relaxed\u003C/span> { \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-relaxed); }\n\u003Cspan class=\"hljs-selector-class\">.leading-loose\u003C/span> { \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--line-height-loose); }\n\n\u003Cspan class=\"hljs-comment\">/* Letter spacing utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.tracking-tight\u003C/span> { \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--letter-spacing-tight); }\n\u003Cspan class=\"hljs-selector-class\">.tracking-normal\u003C/span> { \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--letter-spacing-normal); }\n\u003Cspan class=\"hljs-selector-class\">.tracking-wide\u003C/span> { \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--letter-spacing-wide); }\n\u003Cspan class=\"hljs-selector-class\">.tracking-wider\u003C/span> { \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--letter-spacing-wider); }\n\u003Cspan class=\"hljs-selector-class\">.tracking-widest\u003C/span> { \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--letter-spacing-widest); }\n\n\u003Cspan class=\"hljs-comment\">/* Text color utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-primary\u003C/span> { \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-primary); }\n\u003Cspan class=\"hljs-selector-class\">.text-secondary\u003C/span> { \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-secondary); }\n\u003Cspan class=\"hljs-selector-class\">.text-muted\u003C/span> { \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-muted); }\n\u003Cspan class=\"hljs-selector-class\">.text-accent\u003C/span> { \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-accent); }\n\n\u003Cspan class=\"hljs-comment\">/* Special text styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-serif\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-serif);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.text-mono\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-mono);\n  \u003Cspan class=\"hljs-attribute\">font-variant-ligatures\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.text-caps\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--letter-spacing-wider);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.text-small-caps\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-built_in\">var\u003C/span>(--letter-spacing-wide);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Text decoration utilities */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.underline\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline; }\n\u003Cspan class=\"hljs-selector-class\">.line-through\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: line-through; }\n\u003Cspan class=\"hljs-selector-class\">.no-underline\u003C/span> { \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none; }\n\n\u003Cspan class=\"hljs-selector-class\">.underline-offset-1\u003C/span> { text-underline-offset: \u003Cspan class=\"hljs-number\">1px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.underline-offset-2\u003C/span> { text-underline-offset: \u003Cspan class=\"hljs-number\">2px\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.underline-offset-4\u003C/span> { text-underline-offset: \u003Cspan class=\"hljs-number\">4px\u003C/span>; }\n\n\u003Cspan class=\"hljs-comment\">/* Advanced text effects */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-shadow\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1px\u003C/span> \u003Cspan class=\"hljs-number\">3px\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\u003Cspan class=\"hljs-selector-class\">.text-shadow-lg\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">6px\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\u003Cspan class=\"hljs-selector-class\">.text-gradient\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  -webkit-\u003Cspan class=\"hljs-attribute\">background-clip\u003C/span>: text;\n  -webkit-text-fill-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: transparent;\n  \u003Cspan class=\"hljs-attribute\">background-clip\u003C/span>: text;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Quote and citation styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-serif);\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-size-lg);\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\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\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-secondary);\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>(--text-accent);\n  \u003Cspan class=\"hljs-attribute\">padding-left\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  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\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\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-accent);\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.3\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.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-serif);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Code styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-mono);\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-number\">#f3f4f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.125em\u003C/span> \u003Cspan class=\"hljs-number\">0.375em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0.25em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> pre \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: inherit;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* List styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.25em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\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-built_in\">var\u003C/span>(--line-height-relaxed);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Link styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-accent);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid transparent;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-bottom-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-accent);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Selection styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-pseudo\">::selection\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">59\u003C/span>, \u003Cspan class=\"hljs-number\">130\u003C/span>, \u003Cspan class=\"hljs-number\">246\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive typography */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\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\">--font-size-4xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.875rem\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--font-size-3xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--font-size-2xl\u003C/span>: \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\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\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print typography */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--font-serif);\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">page-break-after\u003C/span>: avoid;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.typography-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">orphans\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">widows\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-text-styling\">Platform-Specific Text Styling\u003C/h2>\n\u003Ch3 id=\"github-and-gitlab-enhancements\">GitHub and GitLab Enhancements\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># GitHub-Specific Text Formatting\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Extended Syntax Support\u003C/span>\n\nGitHub and GitLab support additional text styling through HTML:\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">details\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Click to expand advanced formatting examples\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">summary\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Keyboard Shortcuts and UI Elements\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Press \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>Ctrl\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span> + \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>C\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span> to copy\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Use \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>Cmd\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span> + \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>V\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span> on Mac to paste\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Navigate with \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>Tab\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span> and \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>Shift\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span> + \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>Tab\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">kbd\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Progress Indicators and Measurements\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">progress\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"70"\u003C/span> \u003Cspan class=\"hljs-attr\">max\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span>>\u003C/span>\u003C/span>70%\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">progress\u003C/span>>\u003C/span>\u003C/span> Project completion\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meter\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span> \u003Cspan class=\"hljs-attr\">min\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \u003Cspan class=\"hljs-attr\">max\u003C/span>=\u003Cspan class=\"hljs-string\">"10"\u003C/span>>\u003C/span>\u003C/span>8 out of 10\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">meter\u003C/span>>\u003C/span>\u003C/span> Quality score\n\n\u003Cspan class=\"hljs-section\">### Mathematical and Chemical Notation\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Mathematical expressions: E = mc\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">sup\u003C/span>>\u003C/span>\u003C/span>2\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">sup\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Chemical formulas: H\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">sub\u003C/span>>\u003C/span>\u003C/span>2\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">sub\u003C/span>>\u003C/span>\u003C/span>O and CO\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">sub\u003C/span>>\u003C/span>\u003C/span>2\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">sub\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Temperature: 23°C or 73°F\n\n\u003Cspan class=\"hljs-section\">### Professional Emphasis\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">mark\u003C/span>>\u003C/span>\u003C/span>Highlighted important information\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">mark\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003C/span>Fine print or secondary information\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">cite\u003C/span>>\u003C/span>\u003C/span>Reference to external source\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">cite\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">details\u003C/span>>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Task Lists with Enhanced Styling\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [x] ✅ Completed task with success indicator  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [x] 🔄 Completed task with process indicator\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] ⏳ Pending task with time indicator\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] 🚨 High priority task with alert indicator\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] 💡 Enhancement task with idea indicator\n\n\u003Cspan class=\"hljs-section\">## Issue and Pull Request References\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Fix critical bug (#1234)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Implement new feature (PR #5678)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Related to user story (@username/repo#42)\n\n\u003Cspan class=\"hljs-section\">## Commit Hash References  \u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Latest changes: \u003Cspan class=\"hljs-code\">`commit abc123def456`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Previous version: \u003Cspan class=\"hljs-code\">`commit def456ghi789`\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-and-jekyll-integration\">Hugo and Jekyll Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/typography-block.html -->\n{% assign style = include.style | default: "normal" %}\n{% assign size = include.size | default: "base" %}\n{% assign weight = include.weight | default: "normal" %}\n\n<div class="typography-block typography-{{ style }}">\n  {% if include.title %}\n    <h3 class="typography-title text-{{ size }} font-{{ weight }}">\n      {{ include.title }}\n    </h3>\n  {% endif %}\n  \n  <div class="typography-content">\n    {{ include.content | markdownify }}\n  </div>\n  \n  {% if include.author %}\n    <footer class="typography-attribution">\n      <cite>{{ include.author }}</cite>\n      {% if include.source %}\n        , <em>{{ include.source }}</em>\n      {% endif %}\n    </footer>\n  {% endif %}\n</div>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/styled-text.html -->\n{% assign classes = include.class | split: " " %}\n{% assign tag = include.tag | default: "span" %}\n\n<{{ tag }} class="{% for class in classes %}{{ class }} {% endfor %}">\n  {{ include.content }}\n</{{ tag }}>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Usage in Jekyll Content\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">---\nlayout: post\n\u003Cspan class=\"hljs-section\">title: "Typography Example"\n---\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\">{% include typography-block.html \n   style="elegant"\n   title="Professional Typography"\n   author="Typography Expert"\n   source="Design Guidelines"\n   content="This demonstrates advanced typography integration with Jekyll templating for consistent text styling throughout documentation." %}\n\n{% include styled-text.html \n   tag="p" \n   class="text-xl font-light leading-relaxed text-secondary"\n   content="This paragraph uses utility classes for precise typography control with larger text, lighter weight, relaxed line height, and secondary color." %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"obsidian-typography-enhancement\">Obsidian Typography Enhancement\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* obsidian-typography.css - Enhanced text styling for Obsidian */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Override default Obsidian typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\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-built_in\">var\u003C/span>(--text-normal);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Heading enhancements */\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\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.02em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-title-h1);\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-accent);\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\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\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\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>(--text-title-h2);\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">2em\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\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\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>(--text-title-h3);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced emphasis */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">strong\u003C/span> {\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>(--text-accent);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">em\u003C/span> {\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>(--text-normal);\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Crimson Text'\u003C/span>, Georgia, serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Code styling */\u003C/span>\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-family\u003C/span>: \u003Cspan class=\"hljs-string\">'JetBrains Mono'\u003C/span>, \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--background-primary-alt);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-accent);\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Link styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--link-color);\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid transparent;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-bottom-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-bottom-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--link-color-hover);\n}\n\n\u003Cspan class=\"hljs-comment\">/* List enhancements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-preview-view\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.7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Quote styling */\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\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Crimson Text'\u003C/span>, Georgia, serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\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>(--quote-opening);\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-muted);\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table typography */\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\">font-variant-numeric\u003C/span>: tabular-nums;\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-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>(--text-normal);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Custom CSS classes for Obsidian */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.25em\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\">.small-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--text-muted);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.mono-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'JetBrains Mono'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-variant-ligatures\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.serif-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Crimson Text'\u003C/span>, Georgia, serif;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.caps-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.center-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.right-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Source mode enhancements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-source-view\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mod-cm6\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'JetBrains Mono'\u003C/span>, \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\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-source-view\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mod-cm6\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cm-header\u003C/span> {\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>(--text-title-h1);\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-strong\u003C/span> {\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>(--text-accent);\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-em\u003C/span> {\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>(--text-normal);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-typography-techniques\">Advanced Typography Techniques\u003C/h2>\n\u003Ch3 id=\"professional-drop-caps-and-initial-letters\">Professional Drop Caps and Initial Letters\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Professional drop cap implementation -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.drop-cap\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::first-letter\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">float\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">4em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">0.8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Crimson Text'\u003C/span>, Georgia, serif;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.ornamental-initial\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::first-letter\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">float\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">0.7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Crimson Text'\u003C/span>, serif;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  -webkit-\u003Cspan class=\"hljs-attribute\">background-clip\u003C/span>: text;\n  -webkit-text-fill-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: transparent;\n  \u003Cspan class=\"hljs-attribute\">background-clip\u003C/span>: text;\n  \u003Cspan class=\"hljs-attribute\">text-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\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\u003Cspan class=\"hljs-selector-class\">.modern-initial\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::first-letter\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">float\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">3.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">0.9\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">800\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f3f4f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\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\">"drop-cap"\u003C/span>>\u003C/span>\nAdvanced typography in professional documentation requires careful attention to detail and understanding of typographic principles. The careful selection of fonts, spacing, and visual hierarchy creates documents that not only inform but inspire and engage readers through superior design quality.\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\">"ornamental-initial"\u003C/span>>\u003C/span>\nTraditional publishing techniques translate beautifully to digital Markdown documents when implemented with CSS styling. The ornamental initial letter technique, popularized in medieval manuscripts and classical literature, adds sophistication and visual interest to modern technical documentation.\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\">"modern-initial"\u003C/span>>\u003C/span>\nContemporary design approaches balance traditional typography principles with modern aesthetic preferences. Clean, geometric initial letters work particularly well in technical documentation where clarity and professionalism are paramount considerations.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-text-alignment-and-justification\">Advanced Text Alignment and Justification\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Advanced text alignment system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.text-alignment-demo\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, sans-serif;\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\">.justified-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">text-justify\u003C/span>: inter-word;\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  -webkit-\u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  -ms-\u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.optical-alignment\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">hanging-punctuation\u003C/span>: first last;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.centered-prose\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.ragged-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.ragged-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Advanced paragraph styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.first-line-indent\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-indent\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.hanging-indent\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-indent\u003C/span>: -\u003Cspan class=\"hljs-number\">2em\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\">.no-indent\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-indent\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spaced-paragraphs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.tight-paragraphs\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Text alignment examples -->\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\">"text-alignment-demo"\u003C/span>>\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\">"justified-text"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>This paragraph demonstrates justified text alignment where words are spaced to create even left and right margins. Justified text works best with longer paragraphs and wider columns, providing a formal, published appearance suitable for academic and professional documents.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\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\">"centered-prose"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Centered text alignment creates emphasis and works well for quotes, testimonials, and brief announcements that require visual prominence within the document layout.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\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\">"hanging-indent"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>This paragraph uses a hanging indent where the first line extends beyond the left margin while subsequent lines are indented. This technique is commonly used in bibliographies, reference lists, and glossaries for improved readability and visual organization.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"typography-for-different-content-types\">Typography for Different Content Types\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Content-Specific Typography Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Technical Documentation\u003C/span>\n\u003Cspan class=\"hljs-code\">```css\n.technical-content {\n  font-family: 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  line-height: 1.6;\n  color: #1f2937;\n  max-width: 65ch;\n}\n\n.technical-content code {\n  font-family: 'JetBrains Mono', monospace;\n  background: #f3f4f6;\n  padding: 2px 4px;\n  border-radius: 3px;\n  color: #e53e3e;\n  font-size: 0.9em;\n}\n\n.technical-content .api-endpoint {\n  font-family: 'JetBrains Mono', monospace;\n  background: #1f2937;\n  color: #10b981;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-weight: 500;\n}\n\n.technical-content .parameter {\n  font-weight: 600;\n  color: #7c3aed;\n}\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"marketing-and-promotional-content\">Marketing and Promotional Content\u003C/h2>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-selector-class\">.marketing-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">60ch\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.marketing-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h2\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">800\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.02em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  -webkit-\u003Cspan class=\"hljs-attribute\">background-clip\u003C/span>: text;\n  -webkit-text-fill-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: transparent;\n  \u003Cspan class=\"hljs-attribute\">background-clip\u003C/span>: text;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.marketing-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.highlight\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fef3c7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\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-number\">#92400e\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.marketing-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cta-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\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-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"academic-and-research-writing\">Academic and Research Writing\u003C/h2>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-selector-class\">.academic-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Crimson Text'\u003C/span>, Georgia, serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">17px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">70ch\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.academic-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">text-justify\u003C/span>: inter-word;\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.academic-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.citation\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.academic-content\u003C/span> \u003Cspan class=\"hljs-selector-class\">.footnote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#9ca3af\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e7eb\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.academic-content\u003C/span> \u003Cspan class=\"hljs-selector-tag\">blockquote\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#4b5563\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\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode>\n## Accessibility and Inclusive Typography\n\n### Screen Reader Optimization\n\n```html\n<!-- Accessible typography implementation -->\n<article class="accessible-typography" role="main" aria-labelledby="main-heading">\n  <header>\n    <h1 id="main-heading">Typography Accessibility Guidelines</h1>\n    <p class="lead" aria-describedby="content-description">\n      Professional typography practices that ensure content accessibility for all users.\n    </p>\n    <div id="content-description" class="sr-only">\n      This article covers typography techniques with focus on accessibility, including proper heading structure, color contrast, and screen reader compatibility.\n    </div>\n  </header>\n\n  <section aria-labelledby="contrast-section">\n    <h2 id="contrast-section">Color Contrast Requirements</h2>\n    \n    <!-- High contrast examples -->\n    <div class="contrast-examples">\n      <div class="good-contrast" style="background: #ffffff; color: #1f2937; padding: 1em; margin: 1em 0; border: 1px solid #e5e7eb;">\n        <strong>Good contrast (16.75:1):</strong> Dark text on light background provides excellent readability for all users including those with visual impairments.\n      </div>\n      \n      <div class="poor-contrast" style="background: #f3f4f6; color: #9ca3af; padding: 1em; margin: 1em 0; border: 1px solid #e5e7eb;">\n        <em>Poor contrast (2.8:1):</em> Light text on light background fails WCAG accessibility standards and creates reading difficulties.\n      </div>\n    </div>\n    \n    <p>\n      <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> requires minimum contrast ratios of \n      <strong>4.5:1 for normal text</strong> and <strong>3:1 for large text</strong> (18px+ or 14px+ bold).\n    </p>\n  </section>\n\n  <section aria-labelledby="semantic-section">\n    <h2 id="semantic-section">Semantic Text Markup</h2>\n    \n    <p>Use semantic HTML elements for proper text meaning:</p>\n    \n    <ul>\n      <li><code><strong></code> for <strong>important emphasis</strong></li>\n      <li><code><em></code> for <em>stress emphasis</em></li>\n      <li><code><mark></code> for <mark>highlighted text</mark></li>\n      <li><code><kbd></code> for <kbd>keyboard input</kbd></li>\n      <li><code><samp></code> for <samp>sample output</samp></li>\n      <li><code><var></code> for <var>variables</var></li>\n      <li><code><abbr></code> for <abbr title="abbreviations">abbr.</abbr></li>\n    </ul>\n  </section>\n\n  <section aria-labelledby="focus-section">\n    <h2 id="focus-section">Focus and Navigation</h2>\n    \n    <p>Interactive text elements must have visible focus indicators:</p>\n    \n    <div class="focus-demo">\n      <a href="#" class="accessible-link" aria-describedby="link-description">\n        Example accessible link with focus styling\n      </a>\n      <div id="link-description" class="sr-only">\n        This link demonstrates proper focus indicator styling for keyboard navigation\n      </div>\n    </div>\n  </section>\n</article>\n\n<style>\n.accessible-typography {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  line-height: 1.6;\n  color: #1f2937;\n  max-width: 65ch;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.accessible-link {\n  color: #3b82f6;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  border-radius: 2px;\n  padding: 2px;\n}\n\n.accessible-link:focus {\n  outline: 3px solid #3b82f6;\n  outline-offset: 2px;\n  background: rgba(59, 130, 246, 0.1);\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .accessible-typography {\n    color: #000000;\n    background: #ffffff;\n  }\n  \n  .accessible-link {\n    color: #0000ee;\n    text-decoration: underline;\n    text-decoration-thickness: 2px;\n  }\n  \n  .good-contrast {\n    border-width: 2px !important;\n    border-color: #000000 !important;\n  }\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Large text support */\n@media (prefers-reduced-data: reduce) {\n  .accessible-typography {\n    font-size: 18px;\n    line-height: 1.7;\n  }\n}\n</style>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"color-blind-friendly-typography\">Color-Blind Friendly Typography\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Color-blind accessible typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.colorblind-friendly\u003C/span> {\n  \u003Cspan class=\"hljs-comment\">/* Use patterns and symbols in addition to color */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-success\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#059669\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-success\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\">color\u003C/span>: inherit;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-warning\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#d97706\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-warning\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\">color\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-error\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc2626\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-error\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\">color\u003C/span>: inherit;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-info\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2563eb\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-info\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\">color\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Texture and pattern support */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.pattern-stripe\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-image\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeating-linear-gradient\u003C/span>(\n    \u003Cspan class=\"hljs-number\">45deg\u003C/span>,\n    transparent,\n    transparent \u003Cspan class=\"hljs-number\">2px\u003C/span>,\n    \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>) \u003Cspan class=\"hljs-number\">2px\u003C/span>,\n    \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>) \u003Cspan class=\"hljs-number\">4px\u003C/span>\n  );\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pattern-dots\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-image\u003C/span>: \u003Cspan class=\"hljs-built_in\">radial-gradient\u003C/span>(circle, \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>) \u003Cspan class=\"hljs-number\">1px\u003C/span>, transparent \u003Cspan class=\"hljs-number\">1px\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background-size\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-optimization-for-typography\">Performance Optimization for Typography\u003C/h2>\n\u003Ch3 id=\"font-loading-strategies\">Font Loading Strategies\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Optimized font loading -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-comment\"><!-- Preconnect to font providers -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"preconnect"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://fonts.googleapis.com"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"preconnect"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://fonts.gstatic.com"\u003C/span> \u003Cspan class=\"hljs-attr\">crossorigin\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-comment\"><!-- Preload critical fonts -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"preload"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/fonts/Inter-Regular.woff2"\u003C/span> \u003Cspan class=\"hljs-attr\">as\u003C/span>=\u003Cspan class=\"hljs-string\">"font"\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"font/woff2"\u003C/span> \u003Cspan class=\"hljs-attr\">crossorigin\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"preload"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/fonts/Inter-Bold.woff2"\u003C/span> \u003Cspan class=\"hljs-attr\">as\u003C/span>=\u003Cspan class=\"hljs-string\">"font"\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"font/woff2"\u003C/span> \u003Cspan class=\"hljs-attr\">crossorigin\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-comment\"><!-- Load fonts with display swap -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-comment\"><!-- Fallback fonts -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n    \u003Cspan class=\"hljs-comment\">/* System font stack as fallback */\u003C/span>\n    \u003Cspan class=\"hljs-selector-tag\">body\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    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Progressive enhancement when custom fonts load */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.fonts-loaded\u003C/span> \u003Cspan class=\"hljs-selector-tag\">body\u003C/span> {\n      \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\n    }\n  \u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">head\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\">// Font loading detection\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'fonts'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span>) {\n  \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">all\u003C/span>([\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">fonts\u003C/span>.\u003Cspan class=\"hljs-title function_\">load\u003C/span>(\u003Cspan class=\"hljs-string\">'400 16px Inter'\u003C/span>),\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">fonts\u003C/span>.\u003Cspan class=\"hljs-title function_\">load\u003C/span>(\u003Cspan class=\"hljs-string\">'700 16px Inter'\u003C/span>),\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">fonts\u003C/span>.\u003Cspan class=\"hljs-title function_\">load\u003C/span>(\u003Cspan class=\"hljs-string\">'400 14px JetBrains Mono'\u003C/span>)\n  ]).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'fonts-loaded'\u003C/span>);\n  });\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-optimization\">CSS Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Efficient typography CSS */\u003C/span>\n\u003Cspan class=\"hljs-comment\">/* Use CSS custom properties for consistency and performance */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--font-primary\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, system-ui, sans-serif;\n  \u003Cspan class=\"hljs-attr\">--font-mono\u003C/span>: \u003Cspan class=\"hljs-string\">'JetBrains Mono'\u003C/span>, \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attr\">--text-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--text-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Minimize reflows with efficient selectors */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Use font-display: swap for better performance */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@font-face\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">src\u003C/span>: \u003Cspan class=\"hljs-built_in\">url\u003C/span>(\u003Cspan class=\"hljs-string\">'/fonts/Inter-Regular.woff2'\u003C/span>) \u003Cspan class=\"hljs-built_in\">format\u003C/span>(\u003Cspan class=\"hljs-string\">'woff2'\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  \u003Cspan class=\"hljs-attribute\">font-display\u003C/span>: swap;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Optimize text rendering */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.optimized-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-feature-settings\u003C/span>: \u003Cspan class=\"hljs-string\">'kern'\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-string\">'liga'\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-rendering\u003C/span>: optimizeSpeed;\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-comment\">/* Use will-change for animated text sparingly */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.animated-text\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: transform;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.animated-text\u003C/span>\u003Cspan class=\"hljs-selector-class\">.animation-complete\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: auto;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-workflows\">Integration with Modern Workflows\u003C/h2>\n\u003Cp>Advanced text styling and formatting integrates seamlessly with comprehensive Markdown documentation systems. When combined with \u003Ca href=\"/blog/markdown-blockquotes-advanced-styling-complete-guide\">blockquote styling techniques\u003C/a>, sophisticated typography creates visual hierarchy that guides reader attention through complex content while maintaining professional presentation standards.\u003C/p>\n\u003Cp>For comprehensive project documentation, text styling works effectively with \u003Ca href=\"/blog/markdown-custom-css-classes-styling-complete-guide\">custom CSS classes and layout systems\u003C/a> to create consistent design systems that scale across different document types while preserving brand identity and readability standards.\u003C/p>\n\u003Cp>When creating detailed technical specifications, typography enhancement complements \u003Ca href=\"/blog/markdown-table-column-width-alignment-complete-guide\">table formatting and data presentation\u003C/a> to ensure optimal information density and visual organization that communicates complex data through both textual content and thoughtful design implementation.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-typography-issues\">Troubleshooting Common Typography Issues\u003C/h2>\n\u003Ch3 id=\"font-loading-problems\">Font Loading Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Custom fonts not loading or displaying inconsistently\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Robust font fallback stack */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.font-primary\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, system-ui, -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Font loading detection */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.font-loading\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: system-ui, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: font-family \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.fonts-loaded\u003C/span> \u003Cspan class=\"hljs-selector-class\">.font-loading\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, system-ui, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Critical font inlining for above-the-fold content */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@font-face\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'InterSubset'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">src\u003C/span>: \u003Cspan class=\"hljs-built_in\">url\u003C/span>(\u003Cspan class=\"hljs-string\">'data:font/woff2;base64,...'\u003C/span>) \u003Cspan class=\"hljs-built_in\">format\u003C/span>(\u003Cspan class=\"hljs-string\">'woff2'\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  \u003Cspan class=\"hljs-attribute\">font-display\u003C/span>: block;\n  unicode-range: U+\u003Cspan class=\"hljs-number\">20\u003C/span>-\u003Cspan class=\"hljs-number\">7\u003C/span>E; \u003Cspan class=\"hljs-comment\">/* ASCII characters only */\u003C/span>\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-browser-consistency-issues\">Cross-Browser Consistency Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Typography appearing differently across 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 browsers */\u003C/span>\n* {\n  \u003Cspan class=\"hljs-attribute\">box-sizing\u003C/span>: border-box;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n  -webkit-text-size-adjust: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  -ms-text-size-adjust: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">body\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\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\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\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-comment\">/* Fix for sub/sup positioning */\u003C/span>\nsub, \u003Cspan class=\"hljs-selector-tag\">sup\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">75%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: baseline;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">sup\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n}\n\nsub {\n  \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: -\u003Cspan class=\"hljs-number\">0.25em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Consistent button and input fonts */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">button\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>, select, \u003Cspan class=\"hljs-selector-tag\">textarea\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: inherit;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: inherit;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: inherit;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-typography-issues\">Mobile Typography Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Text too small or difficult to read on mobile devices\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile-first typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">html\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Never go below 16px on iOS */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.mobile-typography\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Larger base size for mobile */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\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\">.mobile-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h1\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Reduced from desktop */\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-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.mobile-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: none; \u003Cspan class=\"hljs-comment\">/* Allow full width on mobile */\u003C/span>\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Touch-friendly interactive text */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.mobile-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">a\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.mobile-typography\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* High DPI display adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">-webkit-min-device-pixel-ratio\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>), (\u003Cspan class=\"hljs-attribute\">min-resolution\u003C/span>: \u003Cspan class=\"hljs-number\">192dpi\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.high-dpi-text\u003C/span> {\n    -webkit-\u003Cspan class=\"hljs-attribute\">font-smoothing\u003C/span>: subpixel-antialiased;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced text styling and formatting in Markdown transforms basic content into sophisticated, professionally designed documents that engage readers through superior typography while maintaining accessibility and performance standards. By mastering CSS integration, platform-specific implementations, and accessibility considerations, content creators can produce documentation that rivals traditional publishing quality while preserving Markdown's simplicity and portability.\u003C/p>\n\u003Cp>The key to successful typography implementation lies in understanding the relationship between text structure, visual design, and user experience, then applying these principles consistently throughout your content creation workflow. Whether you're developing technical documentation, marketing materials, or academic content, the techniques covered in this guide provide the foundation for professional text styling that enhances both readability and visual appeal.\u003C/p>\n\u003Cp>Remember to test your typography implementations across different browsers and devices, validate accessibility compliance with assistive technologies, and optimize font loading for fast performance. With proper text styling and formatting control, your Markdown content becomes a powerful platform for communication that engages users through thoughtful design while maintaining the flexibility and simplicity that makes Markdown an ideal choice for modern content creation workflows.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46],{"id":16,"text":17,"level":18},"why-master-advanced-text-styling-in-markdown","Why Master Advanced Text Styling in Markdown?",2,{"id":20,"text":21,"level":18},"foundation-text-styling-techniques","Foundation Text Styling Techniques",{"id":23,"text":24,"level":18},"css-integration-for-advanced-typography","CSS Integration for Advanced Typography",{"id":26,"text":27,"level":18},"platform-specific-text-styling","Platform-Specific Text Styling",{"id":29,"text":30,"level":18},"advanced-typography-techniques","Advanced Typography Techniques",{"id":32,"text":33,"level":18},"marketing-and-promotional-content","Marketing and Promotional Content",{"id":35,"text":36,"level":18},"academic-and-research-writing","Academic and Research Writing",{"id":38,"text":39,"level":18},"performance-optimization-for-typography","Performance Optimization for Typography",{"id":41,"text":42,"level":18},"integration-with-modern-workflows","Integration with Modern Workflows",{"id":44,"text":45,"level":18},"troubleshooting-common-typography-issues","Troubleshooting Common Typography Issues",{"id":47,"text":48,"level":18},"conclusion","Conclusion",[],[51,59,67],{"slug":52,"title":53,"description":54,"excerpt":55,"date":56,"category":9,"author":10,"keywords":57,"readingMinutes":58},"markdown-table-borders-styling-complete-guide","Markdown Table Borders and Styling: Complete Guide for Professional Table Formatting","Master table borders, styling, and formatting in Markdown. Learn to create professional tables with custom borders, colors, alignment, and responsive design for documentation and web content.","Table borders and styling in Markdown enable writers to create professional, visually appealing data presentations that enhance readability and information hierarchy. While basic Markdown tables…","2025-09-04","markdown table borders, markdown table styling, table formatting markdown, custom table borders, markdown table css, professional tables, responsive table design",13,{"slug":60,"title":61,"description":62,"excerpt":63,"date":64,"category":9,"author":10,"keywords":65,"readingMinutes":66},"markdown-table-data-formatting-and-styling-complete-guide","Markdown Table Data Formatting and Styling: Complete Guide for Professional Data Presentation","Master advanced Markdown table data formatting techniques for professional presentations, including numeric formatting, data alignment, conditional styling, and responsive design patterns. Create publication-ready data tables with consistent styling.","Advanced Markdown table data formatting and styling enables professional data presentation that transforms raw information into comprehensible, visually appealing tables suitable for reports,…","2025-11-18","markdown table formatting, data presentation markdown, table styling, numeric formatting tables, markdown data visualization, professional table design, responsive markdown tables, table data alignment",16,{"slug":68,"title":61,"description":69,"excerpt":70,"date":71,"category":9,"author":10,"keywords":72,"readingMinutes":66},"markdown-table-data-formatting-styling-complete-guide","Master advanced Markdown table data formatting techniques including numerical alignment, data validation, conditional styling, and professional presentation patterns for enhanced readability and visual impact.","Advanced Markdown table data formatting and styling techniques enable professional data presentation that goes beyond basic tabular structures, incorporating sophisticated formatting patterns,…","2025-11-17","markdown table formatting, table data styling, markdown table alignment, data presentation markdown, table cell formatting, professional tables markdown, markdown table design, data visualization markdown",1792184941924]