@picocss/pico

<!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" } </head> <body> ${require('./_nav.html')} <main class="container" id="docs"> ${require('./_sidebar.html') active="typography-link"} <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 small</th> <th>Small</th> <th>Medium</th> <th>Large</th> <th>Extra large</th> </tr> </thead> <tbody> <tr> <th>Base 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><<b>h1</b>></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><<b>h2</b>></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><<b>h3</b>></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><<b>h4</b>></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><<b>h5</b>></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><<b>h6</b>></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><<b>small</b>></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>27<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><<b>h1</b>>Heading 1</<b>h1</b>> <<b>h2</b>>Heading 2</<b>h2</b>> <<b>h3</b>>Heading 3</<b>h3</b>> <<b>h4</b>>Heading 4</<b>h4</b>> <<b>h5</b>>Heading 5</<b>h5</b>> <<b>h6</b>>Heading 6</<b>h6</b>></code></pre> </footer> </article> <p> Inside a <code><<b>hgroup</b>></code> or a <code><<b>div</b> <i>class</i>=<u>"headings"</u>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted. </p> <article aria-label="Hgroup example"> <div class="headings"> <h2>Heading 2</h2> <h3>Subtitle for heading 2</h3> </div> <footer class="code"> <pre><code><<b>hgroup</b>> <<b>h2</b>>Heading 2</<b>h2</b>> <<b>h3</b>>Subtitle for heading 2</<b>h3</b>> </<b>hgroup</b>></code></pre> <pre><code><<b>div</b> <i>class</i>=<u>"headings</u>"> <<b>h2</b>>Heading 2</<b>h2</b>> <<b>h3</b>>Subtitle for heading 2</<b>h3</b>> </<b>div</b>></code></pre> </footer> </article> <p>Inline text elements:</p> <article aria-label="Inline text examples"> <div class="grid"> <div> <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p> <p><strong>Bold</strong> <code>strong</code> <code>b</code></p> <p> <em>Italic</em> <code>i</code> <code>em</code> <code>cite</code> </p> <p><del>Deleted</del> <code>del</code></p> <p><ins>Inserted</ins> <code>ins</code></p> <p><kbd>Ctrl + S</kbd> <code>kbd</code></p> </div> <div> <p><mark>Highlighted</mark> <code>mark</code></p> <p><s>Strikethrough</s> <code>s</code></p> <p><small>Small </small> <code>small</code></p> <p>Text <sub>Sub</sub> <code>sub</code></p> <p>Text <sup>Sup</sup> <code>sup</code></p> <p><u>Underline</u> <code>u</code></p> </div> </div> </article> <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p> <p>ℹ️ These classes are not available in the <a href="classless.html">class-less version</a>.</p> <article aria-label="Links examples"> <a href="#" onclick="event.preventDefault()">Primary</a><br /> <a href="#" onclick="event.preventDefault()" class="secondary" >Secondary</a ><br /> <a href="#" onclick="event.preventDefault()" class="contrast" >Contrast</a ><br /> <footer class="code"> <pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>> <<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>> <<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre> </footer> </article> <p>Blockquote:</p> <article aria-label="Blockquote example"> <blockquote> "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare." <footer> <cite>- Phasellus eget lacinia</cite> </footer> </blockquote> <footer class="code"> <pre><code><<b>blockquote</b>> "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare." <<b>footer</b>> <<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>> </<b>footer</b>> </<b>blockquote</b>></code></pre> </footer> </article> </section> ${require('./_footer.html')} </div> </main> <script src="js/commons.min.js"></script> </body> </html>