diff --git a/docs/src/accordions.html b/docs/src/accordions.html
index 88196823..48dc49b8 100644
--- a/docs/src/accordions.html
+++ b/docs/src/accordions.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Accordions" 
-      description="Toggle sections of content in pure HTML, without JavaScript."
-      canonical="accordions.html"
+      title=`Accordions`
+      description=`Toggle sections of content in pure HTML, without JavaScript.`
+      canonical=`accordions.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="accordions-link"}
+      ${require('./_sidebar.html') active=`accordions-link`}
       
       <div role="document">
         <section id="accordions">
diff --git a/docs/src/buttons.html b/docs/src/buttons.html
index ec1e8295..7b37c182 100644
--- a/docs/src/buttons.html
+++ b/docs/src/buttons.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Buttons" 
-      description="The essential button in pure HTML, without .classes for the default style."
-      canonical="buttons.html"
+      title=`Buttons`
+      description=`The essential button in pure HTML, without .classes for the default style.`
+      canonical=`buttons.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="buttons-link"}
+      ${require('./_sidebar.html') active=`buttons-link`}
       
       <div role="document">
         <section id="buttons">
diff --git a/docs/src/cards.html b/docs/src/cards.html
index 49dbe40f..d3861b73 100644
--- a/docs/src/cards.html
+++ b/docs/src/cards.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Cards" 
-      description="A flexible container with graceful spacings across devices and viewports."
-      canonical="cards.html"
+      title=`Cards`
+      description=`A flexible container with graceful spacings across devices and viewports.`
+      canonical=`cards.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="cards-link"}
+      ${require('./_sidebar.html') active=`cards-link`}
       
       <div role="document">
         <section id="cards">
diff --git a/docs/src/classless.html b/docs/src/classless.html
index 67dec34d..6321a1a5 100644
--- a/docs/src/classless.html
+++ b/docs/src/classless.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Class-less version" 
-      description="For wild HTML purists, Pico provides a .classless version."
-      canonical="classless.html"
+      title=`Class-less version`
+      description=`For wild HTML purists, Pico provides a .classless version.`
+      canonical=`classless.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="classless-link"}
+      ${require('./_sidebar.html') active=`classless-link`}
       
       <div role="document">
         <section id="classless">
diff --git a/docs/src/containers.html b/docs/src/containers.html
index 105e4c13..63dd3b76 100644
--- a/docs/src/containers.html
+++ b/docs/src/containers.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Containers" 
-      description=".container enable a centered viewport, .container-fluid enable a 100% layout."
-      canonical="containers.html"
+      title=`Containers`
+      description=`.container enable a centered viewport, .container-fluid enable a 100% layout.`
+      canonical=`containers.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="containers-link"}
+      ${require('./_sidebar.html') active=`containers-link`}
       
       <div role="document">
         <section id="containers">
diff --git a/docs/src/customization.html b/docs/src/customization.html
index 298fa966..c56913d5 100644
--- a/docs/src/customization.html
+++ b/docs/src/customization.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Customization" 
-      description="You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables)."
-      canonical="customization.html"
+      title=`Customization`
+      description=`You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables).`
+      canonical=`customization.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="customization-link"}
+      ${require('./_sidebar.html') active=`customization-link`}
       
       <div role="document">
         <section id="customization">
diff --git a/docs/src/dropdowns.html b/docs/src/dropdowns.html
index de8bc5a8..9b9146c1 100644
--- a/docs/src/dropdowns.html
+++ b/docs/src/dropdowns.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html')
-      title="Dropdowns"
-      description="Dropdown menus and custom selects without JavaScript." 
-      canonical="dropdowns.html"
+      title=`Dropdowns`
+      description=`Dropdown menus and custom selects without JavaScript.`
+      canonical=`dropdowns.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
 
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="dropdowns-link"}
+      ${require('./_sidebar.html') active=`dropdowns-link`}
 
       <div role="document">
         <section id="dropdown">
diff --git a/docs/src/forms.html b/docs/src/forms.html
index f682df33..7f6f41be 100644
--- a/docs/src/forms.html
+++ b/docs/src/forms.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html')
-      title="Forms"
-      description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
-      canonical="forms.html"
+      title=`Forms`
+      description=`All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.`
+      canonical=`forms.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
 
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="forms-link"}
+      ${require('./_sidebar.html') active=`forms-link`}
 
       <div role="document">
         <section id="forms">
diff --git a/docs/src/grid.html b/docs/src/grid.html
index 0479881f..60835163 100644
--- a/docs/src/grid.html
+++ b/docs/src/grid.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Grid" 
-      description=".grid enable a minimal grid system with auto-layout columns."
-      canonical="grid.html"
+      title=`Grid`
+      description=`.grid enable a minimal grid system with auto-layout columns.`
+      canonical=`grid.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="grid-link"}
+      ${require('./_sidebar.html') active=`grid-link`}
       
       <div role="document">
         <section id="grid">
diff --git a/docs/src/index.html b/docs/src/index.html
index 18b77b7e..2838bf6b 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Documentation" 
-      description="Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer."
-      canonical=""
+      title=`Documentation`
+      description=`Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer.`
+      canonical=``
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="start-link"}
+      ${require('./_sidebar.html') active=`start-link`}
       
       <div role="document">
         <section id="start">
diff --git a/docs/src/loading.html b/docs/src/loading.html
index 4b4cfd12..b2fe190d 100644
--- a/docs/src/loading.html
+++ b/docs/src/loading.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Loading" 
-      description="aria-busy='true' enable a loading indicator."
-      canonical="loading.html"
+      title=`Loading`
+      description=`aria-busy='true' enable a loading indicator.`
+      canonical=`loading.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="loading-link"}
+      ${require('./_sidebar.html') active=`loading-link`}
       
       <div role="document">
         <section id="loading">
diff --git a/docs/src/modal.html b/docs/src/modal.html
index ed44dcd5..5feb1cef 100644
--- a/docs/src/modal.html
+++ b/docs/src/modal.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Modal" 
-      description="A flexible container with graceful spacings across devices and viewports."
-      canonical="modal.html"
+      title=`Modal` 
+      description=`A flexible container with graceful spacings across devices and viewports.`
+      canonical=`modal.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="modal-link"}
+      ${require('./_sidebar.html') active=`modal-link`}
       
       <div role="document">
         <section id="modal">
diff --git a/docs/src/navs.html b/docs/src/navs.html
index 18058ea1..f109deb9 100644
--- a/docs/src/navs.html
+++ b/docs/src/navs.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Navs" 
-      description="The essential navbar component in pure semantic HTML."
-      canonical="navs.html"
+      title=`Navs`
+      description=`The essential navbar component in pure semantic HTML.`
+      canonical=`navs.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="navs-link"}
+      ${require('./_sidebar.html') active=`navs-link`}
       
       <div role="document">
         <section id="navs">
diff --git a/docs/src/progress.html b/docs/src/progress.html
index 109f55c6..e5ce1e29 100644
--- a/docs/src/progress.html
+++ b/docs/src/progress.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html')
-      title="Progress"
-      description="Progress bar element in pure HTML, without JavaScript."
-      canonical="progress.html"
+      title=`Progress`
+      description=`Progress bar element in pure HTML, without JavaScript.`
+      canonical=`progress.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
 
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="progress-link"}
+      ${require('./_sidebar.html') active=`progress-link`}
 
       <div role="document">
         <section id="progress">
diff --git a/docs/src/rtl.html b/docs/src/rtl.html
index b7d39f6f..479a3074 100644
--- a/docs/src/rtl.html
+++ b/docs/src/rtl.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="RTL (Right-To-Left)" 
-      description="Support for right-to-left text in Pico with dir='rtl'"
-      canonical="rtl.html"
+      title=`RTL (Right-To-Left)`
+      description=`Support for right-to-left text in Pico with dir='rtl'`
+      canonical=`rtl.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="rtl-link"}
+      ${require('./_sidebar.html') active=`rtl-link`}
       
       <div role="document">
         <section id="rtl">
diff --git a/docs/src/scroller.html b/docs/src/scroller.html
index 57f2da63..bea1ab43 100644
--- a/docs/src/scroller.html
+++ b/docs/src/scroller.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Horizontal scroller" 
-      description="&lt;figure&gt; acts as a container to make any content scrollable horizontally."
-      canonical="scroller.html"
+      title=`Horizontal scroller`
+      description=`&lt;figure&gt; acts as a container to make any content scrollable horizontally.`
+      canonical=`scroller.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="scroller-link"}
+      ${require('./_sidebar.html') active=`scroller-link`}
       
       <div role="document">
         <section id="scroller">
diff --git a/docs/src/tables.html b/docs/src/tables.html
index 37454d4c..d097f00c 100644
--- a/docs/src/tables.html
+++ b/docs/src/tables.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Tables" 
-      description="Default styles for tables without .classes"
-      canonical="tables.html"
+      title=`Tables`
+      description=`Default styles for tables without .classes`
+      canonical=`tables.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="tables-link"}
+      ${require('./_sidebar.html') active=`tables-link`}
       
       <div role="document">
         <section id="tables">
diff --git a/docs/src/themes.html b/docs/src/themes.html
index 7fccd347..1f6cb991 100644
--- a/docs/src/themes.html
+++ b/docs/src/themes.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Themes" 
-      description="Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark')."
-      canonical="themes.html"
+      title=`Themes` 
+      description=`Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark').`
+      canonical=`themes.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="themes-link"}
+      ${require('./_sidebar.html') active=`themes-link`}
       
       <div role="document">
         <section id="themes">
diff --git a/docs/src/tooltips.html b/docs/src/tooltips.html
index ca735ca9..be225a3b 100644
--- a/docs/src/tooltips.html
+++ b/docs/src/tooltips.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="Tooltips" 
-      description="Enable tooltips everywhere in pure HTML, without JavaScript."
-      canonical="tooltips.html"
+      title=`Tooltips`
+      description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
+      canonical=`tooltips.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="tooltips-link"}
+      ${require('./_sidebar.html') active=`tooltips-link`}
       
       <div role="document">
         <section id="tooltips">
diff --git a/docs/src/typography.html b/docs/src/typography.html
index 7e83632d..55cdc1fc 100644
--- a/docs/src/typography.html
+++ b/docs/src/typography.html
@@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') title="Typography" description="All typographic
-    elements are responsive, allowing text to scale gracefully across devices
-    and viewports." canonical="typography.html" }
+    ${require('./_head.html')
+      title=`Typography`
+      description=`All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.`
+      canonical=`typography.html`
+    }
   </head>
 
   <body>
     ${require('./_nav.html')}
 
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="typography-link"}
+      ${require('./_sidebar.html') active=`typography-link`}
 
       <div role="document">
         <section id="typography">
diff --git a/docs/src/we-love-classes.html b/docs/src/we-love-classes.html
index 304f0d0f..e3718dfc 100644
--- a/docs/src/we-love-classes.html
+++ b/docs/src/we-love-classes.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     ${require('./_head.html') 
-      title="We love .classes" 
-      description="As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers."
-      canonical="we-love-classes.html"
+      title=`We love .classes`
+      description=`As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers.`
+      canonical=`we-love-classes.html`
     }
   </head>
 
@@ -12,7 +12,7 @@
     ${require('./_nav.html')}
     
     <main class="container" id="docs">
-      ${require('./_sidebar.html') active="we-love-classes-link"}
+      ${require('./_sidebar.html') active=`we-love-classes-link`}
       
       <div role="document">
         <section id="we-love-classes">
diff --git a/docs/typography.html b/docs/typography.html
index 666d83fb..e922f2a9 100644
--- a/docs/typography.html
+++ b/docs/typography.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Typography • Pico CSS</title><meta name="description" content="All typographi"><link rel="shortcut icon" href="https://picocss.com/favicon.ico"><link rel="stylesheet" href="../css/pico.min.css"><link rel="stylesheet" href="css/pico.docs.min.css"><link rel="canonical" href="https://picocss.com/docs/typography.html"></head><body><nav class="container-fluid"><ul><li><a href="https://picocss.com" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px"><path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/></svg></a></li><li>Documentation</li></ul><ul><li><a href="https://picocss.com#examples" class="secondary">Examples</a></li><li><a href="./" class="secondary">Docs</a></li><li><a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></li></ul></nav><main class="container" id="docs"><aside><nav class="closed-on-mobile"><a href="./" class="secondary" id="toggle-docs-navigation"><svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Expand</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Collapse</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path></svg> Table of contents</a><details><summary>Getting started</summary><ul><li><a href="./" id="start-link" class="secondary">Usage</a></li><li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li><li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li><li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li><li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li></ul></details><details><summary>Layout</summary><ul><li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li><li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li><li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li></ul></details><details><summary>Elements</summary><ul><li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li><li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li><li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li><li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li></ul></details><details><summary>Components</summary><ul><li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li><li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li><li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li><li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li><li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li><li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li></ul></details><details><summary>Utilities</summary><ul><li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li><li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li></ul></details><details><summary>Extend</summary><ul><li><a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a></li></ul></details></nav><script>const activeLink=document.querySelector("aside a#typography-link"),parentAccordion=activeLink.closest("details");activeLink.setAttribute("aria-current","page"),parentAccordion.setAttribute("open","true")</script></aside><div role="document"><section id="typography"><hgroup><h1>Typography</h1><h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2></hgroup><figure><table role="grid"><thead><tr><th>Device</th><th>Extra&nbsp;small</th><th>Small</th><th>Medium</th><th>Large</th><th>Extra&nbsp;large</th></tr></thead><tbody><tr><th>Base&nbsp;font</th><td>16<small>px</small></td><td>17<small>px</small></td><td>18<small>px</small></td><td>19<small>px</small></td><td>20<small>px</small></td></tr><tr><th><code>&lt;<b>h1</b>&gt;</code></th><td>32<small>px</small></td><td>34<small>px</small></td><td>36<small>px</small></td><td>38<small>px</small></td><td>40<small>px</small></td></tr><tr><th><code>&lt;<b>h2</b>&gt;</code></th><td>28<small>px</small></td><td>29<small>px</small></td><td>31<small>.5px</small></td><td>33<small>.25px</small></td><td>35<small>px</small></td></tr><tr><th><code>&lt;<b>h3</b>&gt;</code></th><td>24<small>px</small></td><td>25<small>.5px</small></td><td>27<small>px</small></td><td>28<small>.5px</small></td><td>30<small>px</small></td></tr><tr><th><code>&lt;<b>h4</b>&gt;</code></th><td>20<small>px</small></td><td>21<small>.25px</small></td><td>22<small>.5px</small></td><td>23<small>.75px</small></td><td>25<small>px</small></td></tr><tr><th><code>&lt;<b>h5</b>&gt;</code></th><td>18<small>px</small></td><td>19<small>.125px</small></td><td>20<small>.25px</small></td><td>21<small>.375px</small></td><td>22<small>.5px</small></td></tr><tr><th><code>&lt;<b>h6</b>&gt;</code></th><td>16<small>px</small></td><td>17<small>px</small></td><td>18<small>px</small></td><td>19<small>px</small></td><td>20<small>px</small></td></tr><tr><th><code>&lt;<b>small</b>&gt;</code></th><td>14<small>px</small></td><td>14<small>.875px</small></td><td>15<small>.75px</small></td><td>16<small>.625px</small></td><td>17<small>.5px</small></td></tr></tbody></table></figure><p>Headings:</p><article aria-label="Headings examples"><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6><footer class="code"><pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Typography • Pico CSS</title><meta name="description" content="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."><link rel="shortcut icon" href="https://picocss.com/favicon.ico"><link rel="stylesheet" href="../css/pico.min.css"><link rel="stylesheet" href="css/pico.docs.min.css"><link rel="canonical" href="https://picocss.com/docs/typography.html"></head><body><nav class="container-fluid"><ul><li><a href="https://picocss.com" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px"><path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/></svg></a></li><li>Documentation</li></ul><ul><li><a href="https://picocss.com#examples" class="secondary">Examples</a></li><li><a href="./" class="secondary">Docs</a></li><li><a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></li></ul></nav><main class="container" id="docs"><aside><nav class="closed-on-mobile"><a href="./" class="secondary" id="toggle-docs-navigation"><svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Expand</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Collapse</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path></svg> Table of contents</a><details><summary>Getting started</summary><ul><li><a href="./" id="start-link" class="secondary">Usage</a></li><li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li><li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li><li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li><li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li></ul></details><details><summary>Layout</summary><ul><li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li><li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li><li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li></ul></details><details><summary>Elements</summary><ul><li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li><li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li><li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li><li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li></ul></details><details><summary>Components</summary><ul><li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li><li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li><li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li><li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li><li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li><li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li></ul></details><details><summary>Utilities</summary><ul><li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li><li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li></ul></details><details><summary>Extend</summary><ul><li><a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a></li></ul></details></nav><script>const activeLink=document.querySelector("aside a#typography-link"),parentAccordion=activeLink.closest("details");activeLink.setAttribute("aria-current","page"),parentAccordion.setAttribute("open","true")</script></aside><div role="document"><section id="typography"><hgroup><h1>Typography</h1><h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2></hgroup><figure><table role="grid"><thead><tr><th>Device</th><th>Extra&nbsp;small</th><th>Small</th><th>Medium</th><th>Large</th><th>Extra&nbsp;large</th></tr></thead><tbody><tr><th>Base&nbsp;font</th><td>16<small>px</small></td><td>17<small>px</small></td><td>18<small>px</small></td><td>19<small>px</small></td><td>20<small>px</small></td></tr><tr><th><code>&lt;<b>h1</b>&gt;</code></th><td>32<small>px</small></td><td>34<small>px</small></td><td>36<small>px</small></td><td>38<small>px</small></td><td>40<small>px</small></td></tr><tr><th><code>&lt;<b>h2</b>&gt;</code></th><td>28<small>px</small></td><td>29<small>px</small></td><td>31<small>.5px</small></td><td>33<small>.25px</small></td><td>35<small>px</small></td></tr><tr><th><code>&lt;<b>h3</b>&gt;</code></th><td>24<small>px</small></td><td>25<small>.5px</small></td><td>27<small>px</small></td><td>28<small>.5px</small></td><td>30<small>px</small></td></tr><tr><th><code>&lt;<b>h4</b>&gt;</code></th><td>20<small>px</small></td><td>21<small>.25px</small></td><td>22<small>.5px</small></td><td>23<small>.75px</small></td><td>25<small>px</small></td></tr><tr><th><code>&lt;<b>h5</b>&gt;</code></th><td>18<small>px</small></td><td>19<small>.125px</small></td><td>20<small>.25px</small></td><td>21<small>.375px</small></td><td>22<small>.5px</small></td></tr><tr><th><code>&lt;<b>h6</b>&gt;</code></th><td>16<small>px</small></td><td>17<small>px</small></td><td>18<small>px</small></td><td>19<small>px</small></td><td>20<small>px</small></td></tr><tr><th><code>&lt;<b>small</b>&gt;</code></th><td>14<small>px</small></td><td>14<small>.875px</small></td><td>15<small>.75px</small></td><td>16<small>.625px</small></td><td>17<small>.5px</small></td></tr></tbody></table></figure><p>Headings:</p><article aria-label="Headings examples"><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6><footer class="code"><pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
 &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
 &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
 &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
diff --git a/package-lock.json b/package-lock.json
index 6b17d76d..5de5dec4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "caniuse-lite": "1.0.30001572",
         "clean-css-cli": "^5.6.2",
         "css-declaration-sorter": "^7.1.1",
-        "html-includes": "^4.4.1",
+        "html-includes": "^5.0.0",
         "nodemon": "^3.0.2",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.23",
@@ -2917,9 +2917,9 @@
       "dev": true
     },
     "node_modules/html-includes": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/html-includes/-/html-includes-4.4.2.tgz",
-      "integrity": "sha512-IvBFbdCxk/Wuzh+qIfUHTu3W0gVZuv8SfNTY33tJZH2zI4MoBx6dFedSZOGhn/GgtQBLfFnKR/zolHnswg/ykw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/html-includes/-/html-includes-5.0.0.tgz",
+      "integrity": "sha512-grGDUxJqLk5Lp50R2uWNk6oyKx6Je0V0INRZAuQurp9ZkhpYLDexGPNl4txuszFEbBckmZSG0+zETyApOZc0xg==",
       "dev": true,
       "dependencies": {
         "command-line-args": "^5.1.1",
@@ -7031,9 +7031,9 @@
       "dev": true
     },
     "html-includes": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/html-includes/-/html-includes-4.4.2.tgz",
-      "integrity": "sha512-IvBFbdCxk/Wuzh+qIfUHTu3W0gVZuv8SfNTY33tJZH2zI4MoBx6dFedSZOGhn/GgtQBLfFnKR/zolHnswg/ykw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/html-includes/-/html-includes-5.0.0.tgz",
+      "integrity": "sha512-grGDUxJqLk5Lp50R2uWNk6oyKx6Je0V0INRZAuQurp9ZkhpYLDexGPNl4txuszFEbBckmZSG0+zETyApOZc0xg==",
       "dev": true,
       "requires": {
         "command-line-args": "^5.1.1",
diff --git a/package.json b/package.json
index 9a1b8340..3b6e6b77 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     "caniuse-lite": "1.0.30001572",
     "clean-css-cli": "^5.6.2",
     "css-declaration-sorter": "^7.1.1",
-    "html-includes": "^4.4.1",
+    "html-includes": "^5.0.0",
     "nodemon": "^3.0.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.23",

Device	Extra small	Small	Medium	Large	Extra large
Base font	16px	17px	18px	19px	20px
`<h1>`	32px	34px	36px	38px	40px
`<h2>`	28px	29px	31.5px	33.25px	35px
`<h3>`	24px	25.5px	27px	28.5px	30px
`<h4>`	20px	21.25px	22.5px	23.75px	25px
`<h5>`	18px	19.125px	20.25px	21.375px	22.5px
`<h6>`	16px	17px	18px	19px	20px
`<small>`	14px	14.875px	15.75px	16.625px	17.5px