cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section>
  <figure>
    <svg 
      class="opentype opentype--ligatures"
      aria-labelledby="title-ligatures description-ligatures"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 219.54 23.619">
      <title id="title-ligatures">A cliffjumper addict file</title>
      <desc id="description-ligatures">Example of Common and Discretionary Ligatures. The "ffi", "ct", and "fi" ligature sets have been highlighted.</desc>
      <g class="opentype-feature--fill"><path d="M45.542 9.41c0-.65 0-.7-.48-.7h-.84a.336.336 0 0 1-.07-.457l1.03-.5a.545.545 0 0 0 .36-.48 9.594 9.594 0 0 1 .816-3.72A4.88 4.88 0 0 1 50.774.575a3.5 3.5 0 0 1 2.76 1.08A5.067 5.067 0 0 1 57.375 0c1.633 0 2.978.864 2.978 1.872a.978.978 0 0 1-.984.984.678.678 0 0 1-.624-.36A2.826 2.826 0 0 0 56.487.912c-1.872 0-2.736 1.968-2.736 5.785v.264c0 .6.05.745.457.745H56.9a12.3 12.3 0 0 0 3.144-.36.294.294 0 0 1 .24.12c-.048.864-.1 2.017-.1 3v5.5a10.248 10.248 0 0 1-.5 3.744 8.446 8.446 0 0 1-3.648 3.912.406.406 0 0 1-.336-.553 4.57 4.57 0 0 0 1.416-1.08c.864-1.01 1.3-2.737 1.3-5.665V10.3c0-1.464-.168-1.584-1.2-1.584h-3c-.408 0-.456.168-.456.744v5.017c0 1.73.048 2.017.912 2.09l.768.07a.42.42 0 0 1-.048.6c-.984-.048-1.68-.072-2.52-.072-.864 0-1.585.024-2.3.072a.42.42 0 0 1-.05-.6l.553-.07c.89-.12.912-.36.912-2.09V9.41c0-.65 0-.7-.48-.7h-3.78c-.41 0-.41.047-.41.7v5.063c0 1.73.05 2.017.913 2.09l.864.07a.42.42 0 0 1-.048.6c-1.08-.048-1.776-.072-2.616-.072-.864 0-1.585.025-2.3.073a.42.42 0 0 1-.048-.6l.552-.07c.89-.12.912-.36.912-2.09zm6.072-1.7a.4.4 0 0 0 .36-.433 13.148 13.148 0 0 1 .626-4.132 2.562 2.562 0 0 0-2.4-1.728c-2.616 0-2.88 2.976-2.88 5.5v.12c0 .648 0 .672.7.672zM171.468 8.978a5.653 5.653 0 0 1 2.688-1.513 3.833 3.833 0 0 1-.48-1.872 4.74 4.74 0 0 1 .89-2.784 4.683 4.683 0 0 1 3.742-1.85c2.88 0 4.225 1.68 4.225 4.68v1.61c0 .43.023.455.432.455h2.664a.768.768 0 0 1 .023 1.008h-2.713c-.407 0-.432.072-.432.576v4.487c0 1.393.168 2.665 1.752 2.665a1.85 1.85 0 0 0 .648-.12c.216-.072.528-.336.6-.336.192 0 .288.264.24.407a3.32 3.32 0 0 1-2.52 1.1c-2.064 0-2.5-1.152-2.5-2.593V9.4c0-.648-.024-.7-.5-.7h-.793a.4.4 0 0 1-.072-.5l.937-.4c.384-.168.432-.288.432-.768V6.1c0-1.344 0-4.152-3.048-4.152-2.64 0-3.217 2.64-3.217 3.528a3.716 3.716 0 0 0 .48 1.9 5.6 5.6 0 0 1 2.088.264.945.945 0 0 1 .313.816c0 .432-.336.84-.6.84-.07 0-.216-.072-.408-.288a2.317 2.317 0 0 0-1.728-.84c-1.776 0-2.977 1.752-2.977 3.865 0 2.328 1.536 4.01 3.5 4.01a3.822 3.822 0 0 0 3.552-2.69c.264-.1.456-.07.528.17a4.9 4.9 0 0 1-4.675 3.977 4.41 4.41 0 0 1-4.56-4.73 5.286 5.286 0 0 1 1.488-3.792zM194.267 9.41c0-.65 0-.7-.48-.7h-.84a.337.337 0 0 1-.072-.457l1.032-.5a.545.545 0 0 0 .36-.48 10.115 10.115 0 0 1 .744-4.033A5.1 5.1 0 0 1 199.67 0c1.632 0 2.977.864 2.977 1.872a.978.978 0 0 1-.984.984.678.678 0 0 1-.623-.36A2.826 2.826 0 0 0 198.78.912c-1.872 0-2.736 2.064-2.736 5.785v.264c0 .6.048.745.456.745h2.688a12.3 12.3 0 0 0 3.145-.36.3.3 0 0 1 .24.12c-.048.864-.1 2.017-.1 3v4.01c0 1.728.048 1.968.912 2.088l.5.07a.42.42 0 0 1-.048.6c-.72-.047-1.417-.07-2.257-.07-.864 0-1.584.023-2.256.07a.42.42 0 0 1-.048-.6l.5-.07c.888-.12.912-.36.912-2.09V10.3c0-1.464-.168-1.584-1.2-1.584h-3c-.408 0-.456.168-.456.744v5.017c0 1.73.048 2.017.912 2.09l.768.07a.42.42 0 0 1-.048.6c-.984-.048-1.68-.072-2.52-.072-.864 0-1.585.024-2.3.072a.42.42 0 0 1-.05-.6l.553-.07c.888-.12.912-.36.912-2.09z"/></g>
      <g><path d="M208.4 14.474c0 1.73.048 1.97.912 2.09l.576.07a.42.42 0 0 1-.05.6c-.79-.048-1.487-.072-2.327-.072-.863 0-1.583.024-2.3.072a.42.42 0 0 1-.047-.6l.552-.07c.888-.12.912-.36.912-2.09V3.624c0-1.415-.024-1.56-.744-1.99l-.24-.145a.365.365 0 0 1 0-.48A17.01 17.01 0 0 0 208.235 0a.264.264 0 0 1 .24.144c-.024.72-.072 1.92-.072 2.977zM10.384 11.594c-.168-.528-.264-.6-.984-.6H5.775c-.6 0-.744.072-.912.576l-.84 2.52a9.168 9.168 0 0 0-.528 1.993c0 .288.12.432.7.48l.792.07a.387.387 0 0 1-.048.6c-.625-.047-1.37-.047-2.5-.07-.793 0-1.657.047-2.3.07a.474.474 0 0 1-.05-.6l.793-.07a1.6 1.6 0 0 0 1.44-1.177c.432-1.1 1.1-2.664 2.112-5.353l2.445-6.48a3.436 3.436 0 0 0 .407-1.7 2.7 2.7 0 0 0 1.25-.917.34.34 0 0 1 .358.216c.313 1.056.7 2.16 1.057 3.216l3.288 9.65c.7 2.063 1.008 2.424 2.04 2.544l.648.07a.472.472 0 0 1 0 .6c-.984-.047-1.824-.07-2.9-.07-1.152 0-2.064.047-2.76.07a.4.4 0 0 1-.05-.6l.7-.07c.5-.05.84-.192.84-.433a4.915 4.915 0 0 0-.31-1.273zM5.632 9.457c-.192.552-.168.576.5.576h2.956c.7 0 .744-.1.528-.744l-1.3-3.914a15.83 15.83 0 0 0-.552-1.512H7.72a14.468 14.468 0 0 0-.577 1.417zM30.375 7.777a1.36 1.36 0 0 1 .36.96c0 .432-.24.888-.528.888a.42.42 0 0 1-.336-.168 3.274 3.274 0 0 0-2.4-1.272c-1.68 0-3.31 1.32-3.31 3.865a3.944 3.944 0 0 0 3.863 4.1 2.928 2.928 0 0 0 2.664-1.44.378.378 0 0 1 .432.336 4.372 4.372 0 0 1-4.01 2.454 4.652 4.652 0 0 1-3.287-1.224 4.778 4.778 0 0 1-1.393-3.553c0-2.593 1.824-5.353 5.81-5.353a5.982 5.982 0 0 1 2.135.407zM35.054 14.474c0 1.73.048 1.97.912 2.09l.576.07a.42.42 0 0 1-.048.6c-.792-.048-1.488-.072-2.328-.072-.864 0-1.585.024-2.3.072a.42.42 0 0 1-.048-.6l.552-.07c.89-.12.912-.36.912-2.09V3.624c0-1.415-.023-1.56-.744-1.99l-.24-.145a.367.367 0 0 1 0-.48A17.01 17.01 0 0 0 34.886 0a.266.266 0 0 1 .24.144c-.024.72-.072 1.92-.072 2.977zM39.446 10.273c0-.937 0-1.057-.647-1.488l-.217-.144a.328.328 0 0 1 .023-.432 16.593 16.593 0 0 0 2.473-1.176c.12 0 .215.048.238.144-.048.84-.1 1.992-.1 2.977v4.32c0 1.73.048 1.97.912 2.09l.5.07a.42.42 0 0 1-.048.6c-.72-.048-1.416-.072-2.256-.072-.864 0-1.584.025-2.257.073a.42.42 0 0 1-.05-.6l.5-.07c.89-.12.913-.36.913-2.09zm1.992-6.84a1.25 1.25 0 0 1-2.5.047 1.248 1.248 0 0 1 1.3-1.3 1.2 1.2 0 0 1 1.2 1.253zM65.846 13.634c0 1.656.408 2.76 2.232 2.76a3.142 3.142 0 0 0 1.944-.72 1.674 1.674 0 0 0 .48-1.393v-3.934c0-1.56-.17-1.608-.89-1.9l-.31-.12a.326.326 0 0 1 .023-.528 9.57 9.57 0 0 0 2.808-.432c.12.024.192.072.217.168-.05.456-.072 1.2-.072 2.088v4.032c0 1.9.072 2.617.744 2.617a4.593 4.593 0 0 0 .936-.12c.145.12.168.6-.023.7a12.48 12.48 0 0 0-3.145.89.333.333 0 0 1-.288-.168v-.984c0-.216-.072-.336-.216-.336a6.275 6.275 0 0 1-3.312 1.248c-2.112 0-2.9-1.056-2.9-3v-4.01c0-1.513 0-1.73-.72-2.042l-.288-.12a.356.356 0 0 1 .044-.528 8.482 8.482 0 0 0 2.568-.432c.144.024.216.072.24.168a17.87 17.87 0 0 0-.072 2.088zM89.39 10.993c0-1.632-.72-2.472-2.232-2.472a2.584 2.584 0 0 0-1.992.84c-.288.36-.36.6-.36 1.44v3.673c0 1.73.05 1.97.913 2.09l.5.07a.42.42 0 0 1-.05.6c-.72-.048-1.416-.072-2.256-.072-.864 0-1.512.025-2.184.073a.42.42 0 0 1-.05-.6l.434-.07c.888-.146.912-.36.912-2.09v-3.48c0-1.608-.72-2.472-2.208-2.472a2.574 2.574 0 0 0-2.017.864 1.87 1.87 0 0 0-.36 1.368v3.72c0 1.73.05 1.945.913 2.09l.433.07a.42.42 0 0 1-.048.6c-.648-.047-1.345-.07-2.185-.07-.864 0-1.584.023-2.328.07a.42.42 0 0 1-.048-.6l.576-.07c.888-.12.912-.36.912-2.09v-4.2c0-.936 0-1.056-.648-1.487L75.8 8.64a.33.33 0 0 1 .024-.432 13.076 13.076 0 0 0 2.4-1.176.28.28 0 0 1 .265.168c-.05.552-.05.912-.05 1.128a.252.252 0 0 0 .265.264A5.77 5.77 0 0 1 81.9 7.37a2.74 2.74 0 0 1 2.544 1.416.753.753 0 0 0 .6-.192A6.02 6.02 0 0 1 88.31 7.37a2.715 2.715 0 0 1 2.856 2.976v4.128c0 1.73.048 1.97.912 2.09l.576.07a.42.42 0 0 1-.048.6c-.793-.048-1.488-.072-2.33-.072-.862 0-1.51.024-2.183.072a.42.42 0 0 1-.048-.6l.432-.07c.888-.146.912-.36.912-2.09zM95.245 10.273c0-.937 0-1.057-.647-1.488l-.217-.144a.33.33 0 0 1 .025-.432 14.52 14.52 0 0 0 2.376-1.3.272.272 0 0 1 .29.168 10.913 10.913 0 0 0-.1 1.1c0 .168.047.312.215.312a7.624 7.624 0 0 1 3.36-1.128c2.424 0 3.984 1.968 3.984 4.393a5.592 5.592 0 0 1-5.853 5.747 9.092 9.092 0 0 1-1.32-.1c-.216.048-.336.168-.336.672v2.52c0 1.7.05 1.92.913 2.04l.936.12a.42.42 0 0 1-.05.6c-1.15-.047-1.847-.07-2.686-.07-.864 0-1.585.023-2.257.07a.42.42 0 0 1-.048-.6l.5-.07c.888-.12.91-.36.91-2.09zm1.776 4.464a1.546 1.546 0 0 0 .72 1.44 3.16 3.16 0 0 0 1.73.528c1.968 0 3.12-1.824 3.12-4.32 0-1.92-1.08-3.864-3.24-3.864a2.948 2.948 0 0 0-2.04.673c-.216.264-.288.624-.288 1.416zM108.493 11.018c-.624 0-.647.048-.647.647 0 2.425 1.416 4.49 3.984 4.49a2.586 2.586 0 0 0 2.208-1.178.317.317 0 0 1 .432.288 4.194 4.194 0 0 1-3.77 2.235 4.3 4.3 0 0 1-3.48-1.584 5.094 5.094 0 0 1-1.008-3.12c0-2.953 1.944-5.425 4.824-5.425a3.146 3.146 0 0 1 3.41 2.858 1.485 1.485 0 0 1-.1.624c-.073.144-.41.168-1.417.168zm1.488-.72c1.777 0 2.3-.1 2.5-.24.073-.05.146-.145.146-.456 0-.673-.456-1.513-1.85-1.513a2.816 2.816 0 0 0-2.663 2.088c0 .048 0 .12.168.12zM117.23 10.273c0-.937 0-1.057-.65-1.488l-.215-.144a.33.33 0 0 1 .023-.432 18.657 18.657 0 0 0 2.425-1.176c.12.024.19.072.19.168v1.393c0 .12.025.192.073.217a4.845 4.845 0 0 1 2.64-1.44 1 1 0 0 1 1.08.96 1.066 1.066 0 0 1-1.03 1.1.924.924 0 0 1-.53-.17 1.965 1.965 0 0 0-1.055-.384 1.068 1.068 0 0 0-.863.48A3.647 3.647 0 0 0 119 11.21v3.264c0 1.73.05 2.017.96 2.09l.864.07a.42.42 0 0 1-.048.6c-1.128-.048-1.824-.072-2.664-.072-.864 0-1.584.024-2.208.072a.42.42 0 0 1-.048-.6l.456-.07c.888-.146.912-.36.912-2.09zM134.533 12.193c.36-.12.408-.336.408-.7l.024-1.1c.024-.89-.264-2.09-1.752-2.09-.672 0-1.488.338-1.536 1.08-.023.386-.048.674-.24.817a2.58 2.58 0 0 1-1.368.456.3.3 0 0 1-.336-.336c0-1.248 2.713-2.953 4.465-2.953 1.73 0 2.568 1.008 2.5 2.81l-.144 4.175c-.05 1.1.168 2.09 1.1 2.09a1.38 1.38 0 0 0 .6-.146c.12-.072.24-.168.312-.168.1 0 .168.145.168.313a2.517 2.517 0 0 1-2.016 1.057 1.915 1.915 0 0 1-1.56-.744c-.1-.144-.24-.336-.385-.336a3.678 3.678 0 0 0-.937.48 3.547 3.547 0 0 1-1.728.6 2.49 2.49 0 0 1-1.68-.552 2.246 2.246 0 0 1-.745-1.68c0-.937.456-1.49 1.992-2.04zm-1.488 4.225a2.715 2.715 0 0 0 1.464-.6c.287-.288.287-.625.312-1.13l.048-1.415c0-.264-.1-.312-.24-.312a4.54 4.54 0 0 0-.983.24c-1.416.48-2.112.84-2.112 1.776a1.447 1.447 0 0 0 1.51 1.442zM148.717 13.657c0 1.9.024 2.785.7 2.785a3.927 3.927 0 0 0 1.032-.24c.167.048.19.647-.025.768a18.118 18.118 0 0 0-3.168.77c-.145 0-.264-.073-.264-.193v-.408a2.635 2.635 0 0 0-.05-.745h-.1a4.993 4.993 0 0 1-3.023 1.1 4.41 4.41 0 0 1-4.44-4.608c0-3.36 2.545-5.52 5.81-5.52a4.913 4.913 0 0 1 1.607.215c.12 0 .144-.144.144-.336v-3.62c0-1.417-.022-1.56-.743-1.993l-.24-.144a.365.365 0 0 1 0-.48A17.042 17.042 0 0 0 148.55 0a.265.265 0 0 1 .24.144c-.025.72-.073 1.92-.073 2.977zm-1.776-3.6a1.407 1.407 0 0 0-.263-.937 2.5 2.5 0 0 0-2.017-1.008c-2.184 0-3.312 1.9-3.312 3.985 0 2.184 1.224 4.248 3.576 4.248a2.937 2.937 0 0 0 1.848-.672 1.45 1.45 0 0 0 .168-.888zM160.932 13.657c0 1.9.024 2.785.7 2.785a3.927 3.927 0 0 0 1.032-.24c.168.048.19.647-.024.768a18.118 18.118 0 0 0-3.168.77c-.145 0-.265-.073-.265-.193v-.408a2.688 2.688 0 0 0-.048-.745h-.1a4.993 4.993 0 0 1-3.025 1.1 4.41 4.41 0 0 1-4.44-4.608c0-3.36 2.545-5.52 5.81-5.52a4.913 4.913 0 0 1 1.607.215c.12 0 .144-.144.144-.336v-3.62c0-1.417-.023-1.56-.744-1.993l-.24-.144a.365.365 0 0 1 0-.48A17.042 17.042 0 0 0 160.765 0a.265.265 0 0 1 .24.144c-.024.72-.072 1.92-.072 2.977zm-1.776-3.6a1.407 1.407 0 0 0-.264-.937 2.5 2.5 0 0 0-2.017-1.008c-2.184 0-3.312 1.9-3.312 3.985 0 2.184 1.224 4.248 3.576 4.248a2.937 2.937 0 0 0 1.847-.672 1.45 1.45 0 0 0 .168-.888zM165.324 10.273c0-.937 0-1.057-.648-1.488l-.216-.144a.33.33 0 0 1 .023-.432 16.5 16.5 0 0 0 2.473-1.176.222.222 0 0 1 .24.144c-.048.84-.1 1.992-.1 2.977v4.32c0 1.73.05 1.97.912 2.09l.5.07a.42.42 0 0 1-.05.6c-.72-.048-1.415-.072-2.255-.072-.864 0-1.584.025-2.256.073a.42.42 0 0 1-.048-.6l.5-.07c.887-.12.91-.36.91-2.09zm1.992-6.84a1.25 1.25 0 0 1-2.5.047 1.247 1.247 0 0 1 1.3-1.3 1.2 1.2 0 0 1 1.2 1.253zM213.563 11.018c-.624 0-.647.048-.647.647 0 2.425 1.416 4.49 3.984 4.49a2.586 2.586 0 0 0 2.208-1.178.317.317 0 0 1 .432.288 4.194 4.194 0 0 1-3.77 2.232 4.3 4.3 0 0 1-3.478-1.584 5.094 5.094 0 0 1-1.01-3.12c0-2.953 1.945-5.425 4.825-5.425a3.146 3.146 0 0 1 3.41 2.857 1.485 1.485 0 0 1-.1.624c-.073.143-.41.167-1.417.167zm1.488-.72c1.777 0 2.3-.1 2.5-.24.073-.05.146-.145.146-.456 0-.673-.456-1.513-1.85-1.513a2.816 2.816 0 0 0-2.663 2.088c0 .048 0 .12.168.12z"/></g>
    </svg>
    <figcaption>
      <b>garamond</b> Common and Discretionary Ligatures
    </figcaption>
  </figure>
</section>

<section>
  <figure>
    <svg 
      class="opentype opentype--small-caps"
      aria-labelledby="title-small-caps description-small-caps"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 132.865 22.984">
      <title id="title-small-caps">Ice Cream</title>
      <desc id="description-small-caps">Example of Small Caps. The Cap Height, x-height, and baseline have been highlighted.</desc>
      <g class="opentype-feature--stroke"><path d="M0 17.12h132.865M0 4.556h132.865M0 22.86h132.865M0 .125h132.865"/></g>
      <g><path d="M6.536 17.12a3.922 3.922 0 0 1 .336-1.152 5.77 5.77 0 0 1 1.536-.5V6.03c-.552-.023-1.2-.1-1.68-.167a3.95 3.95 0 0 1-.024-1.3h5.64a6.282 6.282 0 0 1-.07 1.32c-.53.072-1.2.12-1.73.144v9.533a11.343 11.343 0 0 1 1.92.36 3.63 3.63 0 0 1 .1.816 2.3 2.3 0 0 1-.023.384zM24.01 6.08a4.006 4.006 0 0 0-1.9-.457c-2.545 0-4.37 1.584-4.37 5.088 0 3.48 1.657 5.138 4.32 5.138a12.015 12.015 0 0 0 3.745-.624 2.888 2.888 0 0 1-.36 1.416 9.845 9.845 0 0 1-4.1.96c-3.553 0-5.93-2.76-5.93-6.433 0-4.08 2.737-6.96 6.793-6.96a7.107 7.107 0 0 1 3.673.936 7.754 7.754 0 0 1 .073 1.032 5.748 5.748 0 0 1-.385 2.16 4.2 4.2 0 0 1-1.56-.312zM37.832 15.656a10.3 10.3 0 0 1 .384-1.824 5.185 5.185 0 0 1 1.368-.1v3.388H28.976a3.922 3.922 0 0 1 .336-1.152 5.77 5.77 0 0 1 1.536-.5V6.03a12.51 12.51 0 0 1-1.68-.167 3.95 3.95 0 0 1-.024-1.3H39.32v3.27a4.085 4.085 0 0 1-1.22-.194 6.9 6.9 0 0 1-.575-1.633h-4.542v3.985h3.457a4.088 4.088 0 0 1 .407-.937 4.108 4.108 0 0 1 1.13-.288v3.888a3.437 3.437 0 0 1-1.25-.1 4.888 4.888 0 0 1-.24-1.176h-3.5v4.27zM58.544 6.08a4.006 4.006 0 0 0-1.9-.457c-2.544 0-4.368 1.584-4.368 5.088 0 3.48 1.656 5.138 4.32 5.138a12.015 12.015 0 0 0 3.744-.624 2.888 2.888 0 0 1-.36 1.416 9.845 9.845 0 0 1-4.1.96c-3.553 0-5.93-2.76-5.93-6.433 0-4.08 2.737-6.96 6.793-6.96a7.107 7.107 0 0 1 3.673.936 7.754 7.754 0 0 1 .072 1.032 5.748 5.748 0 0 1-.385 2.16 4.2 4.2 0 0 1-1.56-.312zM68.888 4.423c3.144 0 5.4 1.1 5.4 3.528A3.633 3.633 0 0 1 71.5 11.5a27.616 27.616 0 0 0 2.855 4.44l1.393-.1a1.534 1.534 0 0 1 .023.288 2.606 2.606 0 0 1-.287 1.128 15.794 15.794 0 0 1-2.352.336c-.623-.288-1.8-2.544-3.48-5.833a21.26 21.26 0 0 1-2.135-.1v3.9a8.557 8.557 0 0 1 1.7.336 5.037 5.037 0 0 1 .048 1.224H63.51a3.982 3.982 0 0 1 .337-1.152 5.78 5.78 0 0 1 1.536-.5v-9.46c-.5-.025-1.248-.1-1.68-.17a3.953 3.953 0 0 1-.024-1.3c1.655-.09 3.552-.115 5.208-.115zM67.52 10.4c.647.048 1.3.048 1.92.048 1.68 0 2.616-.624 2.616-2.353 0-1.512-1.344-2.232-3.312-2.232-.312 0-.912 0-1.224.024zM87.007 15.656a10.3 10.3 0 0 1 .385-1.824 5.182 5.182 0 0 1 1.368-.1v3.388H78.15a3.982 3.982 0 0 1 .336-1.152 5.77 5.77 0 0 1 1.536-.5V6.03a12.478 12.478 0 0 1-1.68-.167 3.926 3.926 0 0 1-.024-1.3H88.5v3.27a4.078 4.078 0 0 1-1.224-.193 6.9 6.9 0 0 1-.576-1.633h-4.54v3.985h3.455a4.09 4.09 0 0 1 .408-.937 4.1 4.1 0 0 1 1.128-.288v3.888a3.43 3.43 0 0 1-1.247-.1 4.89 4.89 0 0 1-.24-1.176h-3.5v4.27zM95.5 13.256l-.408 1.032a7.286 7.286 0 0 1-.672 1.3 7.893 7.893 0 0 1 1.607.36 4.28 4.28 0 0 1 .192 1.176h-5.16a3.22 3.22 0 0 1 .238-1.08 4.355 4.355 0 0 1 1.416-.6l4.66-11.02 2.04-.265 4.73 11.52a6.253 6.253 0 0 1 1.2.216 4.23 4.23 0 0 1 .336 1.224h-5.473a3.748 3.748 0 0 1 .336-1.152 7.512 7.512 0 0 1 1.488-.384 4.9 4.9 0 0 1-.768-1.344l-.384-.984zm2.69-7.13a13.4 13.4 0 0 1-.6 1.825l-1.536 3.914h4.246L98.84 7.9a9.835 9.835 0 0 1-.48-1.776zM112.83 8.792a23.465 23.465 0 0 1-.623-2.4h-.168l-1.058 9.17a9.392 9.392 0 0 1 1.752.36 3.946 3.946 0 0 1 .072 1.2h-5.232a3.982 3.982 0 0 1 .336-1.153 5.1 5.1 0 0 1 1.44-.5l1.176-9.434a16.918 16.918 0 0 1-1.728-.168 3.926 3.926 0 0 1-.024-1.3h4.752l2.833 8.593a13.107 13.107 0 0 1 .478 2.16h.168a19.613 19.613 0 0 1 .48-2.16l2.808-8.592h4.753a6 6 0 0 1-.072 1.3c-.528.072-1.344.144-1.944.168l1.37 9.524a7.816 7.816 0 0 1 1.753.36 2.726 2.726 0 0 1 .168.864 1.8 1.8 0 0 1-.023.336h-5.664a4.02 4.02 0 0 1 .312-1.2 5.794 5.794 0 0 1 1.416-.456l-1.223-9.073h-.168a18.438 18.438 0 0 1-.577 2.4l-2.713 8.45-2.063.192z"/></g>
    </svg>
    <figcaption>
      <b>tisa</b> Small Caps
    </figcaption>
  </figure>
</section>

<section>
  <figure>
    <svg 
      class="opentype opentype--case-sensitive-forms"
      aria-labelledby="title-case-sensitive-forms description-case-sensitive-forms"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 213.286 13.801">
      <title id="title-case-sensitive-forms">@twitter #drama</title>
      <desc id="description-case-sensitive-forms">Example of Case Sensitive Forms. The highlighted at symbol and hashtag's heights match the small cap type's x-height.</desc>
      <g class="opentype-feature--fill"><path d="M9.648 8.76a.8.8 0 0 0 .144.337c1.824-.12 2.736-1.97 2.736-3.576 0-2.76-2.5-4.128-5.016-4.128A5.728 5.728 0 0 0 1.655 7.3c0 3.068 2.065 5.2 5.545 5.2a8.99 8.99 0 0 0 3.553-.77 3.247 3.247 0 0 1 .647 1.08 10.58 10.58 0 0 1-4.536.985C2.664 13.8 0 11.257 0 7.415A7.28 7.28 0 0 1 7.608.05c3.456 0 6.48 1.992 6.48 5.28 0 2.448-1.752 5.088-5.593 5.3a2.418 2.418 0 0 1-.36-1.01h-.12A2.5 2.5 0 0 1 5.9 10.634c-1.32 0-2.3-.84-2.3-2.76a4.837 4.837 0 0 1 1.057-3.1A3.737 3.737 0 0 1 7.68 3.407a4.246 4.246 0 0 1 2.617.84zm-1.2-3.96a1.757 1.757 0 0 0-.864-.24A1.75 1.75 0 0 0 6.1 5.5a4.45 4.45 0 0 0-.527 2.185c0 1.15.36 1.56.936 1.56a1.762 1.762 0 0 0 1.39-.82zM127.486 9.648l-.48 3.288c-.168.024-.743.048-1.056.048a6.274 6.274 0 0 1-.72-.048l.5-3.288h-2.977l-.48 3.288c-.168.024-.743.048-1.056.048a6.274 6.274 0 0 1-.72-.048l.5-3.288h-2.367a4.625 4.625 0 0 1 .24-1.272h2.376l.624-3.984h-2.47a4.577 4.577 0 0 1 .24-1.27h2.472l.43-2.622A8.735 8.735 0 0 1 124.2.336l-.433 2.784h3.072l.43-2.62a8.735 8.735 0 0 1 1.657-.168l-.433 2.784h2.28a2.154 2.154 0 0 1 .024.384 4.5 4.5 0 0 1-.1.888h-2.424l-.574 3.988h2.3a4.486 4.486 0 0 1-.072 1.272zm-4.513-1.272h3l.624-3.984h-3.047z"/></g>
      <g><path d="M22.344 1.848v9.53a13.68 13.68 0 0 1 2.112.383 3.944 3.944 0 0 1 .072 1.2h-6.36a3.925 3.925 0 0 1 .336-1.15 7.073 7.073 0 0 1 1.7-.5V1.847H17.28a10.017 10.017 0 0 1-.457 1.92 4.434 4.434 0 0 1-1.3.217V.407H27.05V3.96a4.23 4.23 0 0 1-1.226-.216 10.394 10.394 0 0 1-.528-1.9zM34.824 11.473c.1-.648.336-1.68.48-2.28L37.44.48 40.1.215l2.04 9.05c.168.743.313 1.463.408 2.207h.168a20.223 20.223 0 0 1 .48-2.28l1.27-4.85a16.94 16.94 0 0 1 .793-2.35 7.575 7.575 0 0 1-1.49-.36 4.12 4.12 0 0 1-.21-1.226h4.562a4.347 4.347 0 0 1-.288 1.3 4.392 4.392 0 0 1-1.034.213l-3.312 11.16-2.328.265-2.136-9.265c-.168-.744-.312-1.632-.384-2.232h-.168a20.708 20.708 0 0 1-.408 2.208l-2.257 9.025-2.52.265-3.023-11.21a4.43 4.43 0 0 1-1.272-.55 4.287 4.287 0 0 1-.217-1.178h5.448a4.088 4.088 0 0 1-.216 1.225 9.37 9.37 0 0 1-1.776.336A13.826 13.826 0 0 1 33.05 4.3l1.2 4.944a20.66 20.66 0 0 1 .408 2.232zM50.23 12.96a3.925 3.925 0 0 1 .337-1.15 5.77 5.77 0 0 1 1.536-.5V1.87c-.552-.024-1.2-.1-1.68-.168A3.954 3.954 0 0 1 50.4.407h5.64a6.28 6.28 0 0 1-.072 1.32c-.528.072-1.2.12-1.73.145V11.4a11.294 11.294 0 0 1 1.922.36 3.624 3.624 0 0 1 .1.815 2.305 2.305 0 0 1-.024.385zM65.544 1.848v9.53a13.688 13.688 0 0 1 2.11.383 3.944 3.944 0 0 1 .073 1.2h-6.36a3.985 3.985 0 0 1 .336-1.15 7.073 7.073 0 0 1 1.7-.5V1.847H60.48a10.09 10.09 0 0 1-.457 1.92 4.44 4.44 0 0 1-1.3.217V.407h11.525V3.96a4.235 4.235 0 0 1-1.225-.216 10.4 10.4 0 0 1-.527-1.9zM79.2 1.848v9.53a13.68 13.68 0 0 1 2.112.383 3.944 3.944 0 0 1 .072 1.2h-6.36a3.954 3.954 0 0 1 .336-1.15 7.073 7.073 0 0 1 1.7-.5V1.847h-2.926a10.017 10.017 0 0 1-.456 1.92 4.428 4.428 0 0 1-1.3.217V.407H83.9V3.96a4.235 4.235 0 0 1-1.225-.216 10.4 10.4 0 0 1-.527-1.9zM95.3 11.5a10.288 10.288 0 0 1 .385-1.823 5.182 5.182 0 0 1 1.368-.1v3.385H86.446a3.985 3.985 0 0 1 .336-1.152 5.77 5.77 0 0 1 1.536-.5V1.872a12.558 12.558 0 0 1-1.68-.168 3.93 3.93 0 0 1-.024-1.3H96.79v3.268a4.078 4.078 0 0 1-1.223-.192 6.9 6.9 0 0 1-.576-1.632h-4.535v3.984h3.456a4.11 4.11 0 0 1 .41-.937 4.1 4.1 0 0 1 1.127-.287V8.5a3.443 3.443 0 0 1-1.247-.1 4.894 4.894 0 0 1-.24-1.176h-3.5V11.5zM105.623.264c3.144 0 5.4 1.1 5.4 3.528a3.633 3.633 0 0 1-2.784 3.552 27.59 27.59 0 0 0 2.854 4.44l1.393-.1a1.536 1.536 0 0 1 .023.288 2.6 2.6 0 0 1-.288 1.128 15.73 15.73 0 0 1-2.352.336c-.624-.288-1.8-2.544-3.48-5.832-.7 0-1.44-.024-2.136-.1V11.4a8.606 8.606 0 0 1 1.7.336 5.04 5.04 0 0 1 .048 1.225h-5.76a3.985 3.985 0 0 1 .335-1.15 5.77 5.77 0 0 1 1.536-.5V1.847c-.5-.024-1.248-.1-1.68-.168a3.923 3.923 0 0 1-.024-1.3c1.66-.093 3.557-.116 5.213-.116zm-1.368 5.976c.647.048 1.3.048 1.92.048 1.68 0 2.616-.624 2.616-2.353 0-1.512-1.344-2.23-3.31-2.23-.313 0-.913 0-1.225.022zM138.165.264c4.01 0 6.793 2.016 6.793 6.1 0 4.656-2.977 6.648-6.433 6.648-1.824 0-4.345-.024-6.145-.072a3.994 3.994 0 0 1 .336-1.152 5.8 5.8 0 0 1 1.536-.5V1.943a12.242 12.242 0 0 1-1.68-.12 3.923 3.923 0 0 1-.024-1.3c1.61-.14 4.01-.26 5.617-.26zM136.39 11.5c.527.05 1.224.072 1.775.072 2.93 0 4.56-1.56 4.56-5.04 0-3.17-2.183-4.85-5.016-4.85a12.19 12.19 0 0 0-1.32.073zM153.117.264c3.145 0 5.4 1.1 5.4 3.528a3.633 3.633 0 0 1-2.784 3.552 27.59 27.59 0 0 0 2.855 4.44l1.393-.1a1.536 1.536 0 0 1 .024.288 2.6 2.6 0 0 1-.288 1.128 15.73 15.73 0 0 1-2.352.336c-.624-.288-1.8-2.544-3.48-5.832-.7 0-1.44-.024-2.136-.1V11.4a8.606 8.606 0 0 1 1.7.336 5.04 5.04 0 0 1 .048 1.225h-5.76a3.985 3.985 0 0 1 .335-1.15 5.77 5.77 0 0 1 1.537-.5V1.847c-.5-.024-1.248-.1-1.68-.168a3.923 3.923 0 0 1-.024-1.3c1.662-.093 3.56-.116 5.214-.116zM151.75 6.24c.647.048 1.3.048 1.92.048 1.68 0 2.616-.624 2.616-2.353 0-1.512-1.345-2.23-3.312-2.23-.312 0-.912 0-1.224.022zM165.934 9.1l-.408 1.032a7.3 7.3 0 0 1-.672 1.3 7.926 7.926 0 0 1 1.607.36 4.28 4.28 0 0 1 .193 1.176h-5.16a3.214 3.214 0 0 1 .24-1.08 4.356 4.356 0 0 1 1.415-.6L167.806.264l2.04-.264 4.73 11.52a6.33 6.33 0 0 1 1.2.217 4.23 4.23 0 0 1 .335 1.225h-5.472a3.747 3.747 0 0 1 .336-1.152 7.545 7.545 0 0 1 1.488-.384 4.908 4.908 0 0 1-.77-1.345l-.382-.98zm2.688-7.13a13.42 13.42 0 0 1-.6 1.825L166.485 7.7h4.248l-1.464-3.96a9.856 9.856 0 0 1-.48-1.776zM183.262 4.632a23.4 23.4 0 0 1-.624-2.4h-.168l-1.057 9.168a9.352 9.352 0 0 1 1.752.36 3.944 3.944 0 0 1 .072 1.2H178a3.985 3.985 0 0 1 .336-1.152 5.094 5.094 0 0 1 1.44-.5l1.176-9.433a17.2 17.2 0 0 1-1.728-.168 3.93 3.93 0 0 1-.024-1.3h4.752L186.79 9a13.107 13.107 0 0 1 .48 2.16h.167a19.638 19.638 0 0 1 .48-2.16l2.81-8.593h4.752a6 6 0 0 1-.073 1.3c-.528.07-1.344.144-1.944.168l1.367 9.525a7.815 7.815 0 0 1 1.753.36 2.726 2.726 0 0 1 .168.864 1.8 1.8 0 0 1-.023.336h-5.664a4.01 4.01 0 0 1 .312-1.2 5.753 5.753 0 0 1 1.416-.456l-1.223-9.073h-.167a18.42 18.42 0 0 1-.576 2.4l-2.713 8.45-2.062.19zM203.11 9.1l-.41 1.032a7.3 7.3 0 0 1-.67 1.3 7.926 7.926 0 0 1 1.606.36 4.28 4.28 0 0 1 .192 1.176h-5.16a3.214 3.214 0 0 1 .24-1.08 4.356 4.356 0 0 1 1.415-.6L204.98.264 207.02 0l4.73 11.52a6.33 6.33 0 0 1 1.2.217 4.23 4.23 0 0 1 .336 1.225h-5.473a3.747 3.747 0 0 1 .336-1.152 7.545 7.545 0 0 1 1.487-.384 4.908 4.908 0 0 1-.77-1.345l-.383-.982zm2.69-7.132a13.42 13.42 0 0 1-.6 1.824L203.66 7.7h4.25l-1.465-3.96a9.856 9.856 0 0 1-.48-1.776z"/></g>
    </svg>
    <figcaption>
      <b>tisa</b> Case Sensitive Forms
    </figcaption>
  </figure>
</section>

<section>
  <figure>
    <svg 
      class="opentype opentype--historical-alternates"
      aria-labelledby="title-historical-alternates description-historical-alternates"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 134.301 17.954">
      <title id="title-historical-alternates">Paraside Lost</title>
      <desc id="description-historical-alternates">Example of Historical Alternates. The highlighted "s" characters have been substituted to use an "f" character, which was historically used in place of "s".</desc>
      <g class="opentype-feature--fill"><path d="M69.982 7.73a12.44 12.44 0 0 1-1.7-.193 4.523 4.523 0 0 1-.023-1.393h1.727V4.56c0-3.24 1.97-4.535 4.225-4.535a9.054 9.054 0 0 1 2.616.408 4.5 4.5 0 0 1 .072.815 6.727 6.727 0 0 1-.34 2.112 3.2 3.2 0 0 1-1.416-.384V1.368a1.782 1.782 0 0 0-.77-.168c-1.27 0-2.3.648-2.3 3.12v11.69a13.95 13.95 0 0 1 2.377.432 3.384 3.384 0 0 1 .05 1.1h-6.39a3.332 3.332 0 0 1 .336-1.08 8.876 8.876 0 0 1 1.536-.456zM121.173 7.73a12.44 12.44 0 0 1-1.7-.193 4.554 4.554 0 0 1-.023-1.393h1.728V4.56c0-3.24 1.97-4.535 4.225-4.535a9.044 9.044 0 0 1 2.616.408 4.5 4.5 0 0 1 .07.815 6.7 6.7 0 0 1-.335 2.112 3.2 3.2 0 0 1-1.416-.384V1.368a1.78 1.78 0 0 0-.77-.168c-1.27 0-2.3.648-2.3 3.12v11.69a13.933 13.933 0 0 1 2.376.432 3.357 3.357 0 0 1 .048 1.1H119.3a3.356 3.356 0 0 1 .336-1.08 8.9 8.9 0 0 1 1.536-.456z"/></g>
      <g><path d="M2.16 2.448a14.4 14.4 0 0 1-1.776-.07A5.86 5.86 0 0 1 .336.91c2.088-.19 4.2-.264 6.12-.264 3.528 0 6.217 1.656 6.217 4.992 0 3.673-2.81 5.28-5.64 5.28a20.45 20.45 0 0 1-2.665-.19v5.255c.84.05 1.848.12 2.592.24a4.13 4.13 0 0 1 .072 1.32H0a5.763 5.763 0 0 1 .287-1.272 13.817 13.817 0 0 1 1.873-.312zm2.208 6.865c.768.07 1.728.12 2.568.12 2.184 0 3.456-1.057 3.456-3.673 0-2.353-1.752-3.6-4.272-3.6-.456 0-1.32.05-1.752.1zM20.28 16.13a3.69 3.69 0 0 1-3.36 1.824 3.13 3.13 0 0 1-3.408-3.217c0-2.472 2.088-3.744 4.464-3.744a5.97 5.97 0 0 1 2.232.408v-1.3c0-1.775-.768-2.687-2.28-2.687a7.61 7.61 0 0 0-3.5 1.176 2.076 2.076 0 0 1-.12-.816 2.7 2.7 0 0 1 .264-1.2 9.82 9.82 0 0 1 3.913-.84c2.616 0 3.768 1.27 3.768 4.56v4.657a2.163 2.163 0 0 0 .313 1.25 7.547 7.547 0 0 0 1.656-.29 1.1 1.1 0 0 1 .023.265 2.547 2.547 0 0 1-.24 1.08 6.068 6.068 0 0 1-2.592.7A2.55 2.55 0 0 1 20.4 16.13zm-.048-3.673a7.9 7.9 0 0 0-1.68-.19c-1.873 0-2.93.84-2.93 2.11a1.938 1.938 0 0 0 2.185 1.92 3.016 3.016 0 0 0 2.425-1.175zM29.376 8.3A3.21 3.21 0 0 1 32.5 5.737a3.412 3.412 0 0 1 1.08.19 3.13 3.13 0 0 1 .313 1.44 2.674 2.674 0 0 1-.072.648 3.3 3.3 0 0 0-1.63-.407 2.97 2.97 0 0 0-2.762 1.968v6.434a11.967 11.967 0 0 1 2.376.432 3.33 3.33 0 0 1 .048 1.1h-6.388a3.332 3.332 0 0 1 .336-1.08 8.85 8.85 0 0 1 1.536-.456V7.49h-1.752a2.768 2.768 0 0 1 .432-1.273 6.277 6.277 0 0 1 1.992-.336 4.154 4.154 0 0 1 1.128.145V8.3zM41.88 16.13a3.69 3.69 0 0 1-3.36 1.824 3.13 3.13 0 0 1-3.408-3.217c0-2.472 2.088-3.744 4.464-3.744a5.97 5.97 0 0 1 2.232.408v-1.3c0-1.775-.768-2.687-2.28-2.687a7.61 7.61 0 0 0-3.5 1.176 2.076 2.076 0 0 1-.12-.816 2.7 2.7 0 0 1 .264-1.2 9.82 9.82 0 0 1 3.913-.84c2.616 0 3.768 1.27 3.768 4.56v4.657a2.163 2.163 0 0 0 .307 1.25 7.547 7.547 0 0 0 1.656-.288 1.1 1.1 0 0 1 .023.264 2.547 2.547 0 0 1-.24 1.08 6.068 6.068 0 0 1-2.593.7A2.55 2.55 0 0 1 42 16.13zm-.048-3.673a7.9 7.9 0 0 0-1.68-.19c-1.873 0-2.93.84-2.93 2.11a1.938 1.938 0 0 0 2.185 1.92 3.016 3.016 0 0 0 2.425-1.175zM55.344 1.608h-1.73A2.78 2.78 0 0 1 54.05.336 7.054 7.054 0 0 1 56.208 0a4.9 4.9 0 0 1 1.224.145v14.233a6.532 6.532 0 0 0 .192 1.7h1.8a1.45 1.45 0 0 1 .024.312 2.942 2.942 0 0 1-.192.96 13.4 13.4 0 0 1-3.24.48 4.28 4.28 0 0 1-.48-1.73h-.12a3.875 3.875 0 0 1-3.6 1.85c-2.087 0-4.463-1.44-4.463-5.785 0-3.864 2.376-6.432 5.808-6.432a4.166 4.166 0 0 1 2.186.575zm.024 5.9a6.43 6.43 0 0 0-1.992-.336c-2.64 0-3.84 1.872-3.84 4.656 0 2.88 1.3 4.49 3.1 4.49a3.145 3.145 0 0 0 2.735-1.44zM60.91 7.49a2.768 2.768 0 0 1 .433-1.273 7.025 7.025 0 0 1 2.16-.336 5.11 5.11 0 0 1 1.248.145v10.033a11.157 11.157 0 0 1 1.9.336 3.417 3.417 0 0 1 .072.744 2.38 2.38 0 0 1-.023.408h-5.9a3.332 3.332 0 0 1 .335-1.08 8.85 8.85 0 0 1 1.536-.456V7.49zm4.2-5.594a1.28 1.28 0 0 1-1.344 1.416A1.244 1.244 0 0 1 62.4 1.9 1.286 1.286 0 0 1 63.767.576 1.242 1.242 0 0 1 65.11 1.9zM78.454 12.12c.048 2.57 1.656 4.153 3.913 4.153a11.018 11.018 0 0 0 3.36-.672 2.6 2.6 0 0 1-.312 1.37 8.28 8.28 0 0 1-3.792.983c-3.433 0-5.4-2.568-5.4-5.88 0-3.53 2.184-6.337 5.544-6.337 2.88 0 4.1 2.088 4.1 5.112a11.646 11.646 0 0 1-.072 1.27zm5.28-1.39c.17-1.657-.31-3.674-2.328-3.674-1.7 0-2.808 1.488-2.952 3.673zM94.75 2.425a17.586 17.586 0 0 1-1.776-.168A5.27 5.27 0 0 1 92.926.89h6.29a3.64 3.64 0 0 1-.05 1.343 20.615 20.615 0 0 1-2.208.192V16.01h5.952a21.74 21.74 0 0 1 .265-2.4 6.468 6.468 0 0 1 1.56-.168v4.1H92.59a5.765 5.765 0 0 1 .288-1.272 13.776 13.776 0 0 1 1.872-.312zM117.237 11.665c0 4.01-2.136 6.29-5.448 6.29-3.5 0-5.474-2.16-5.474-6.29 0-3.672 2.353-5.928 5.473-5.928 3.264 0 5.447 2.112 5.447 5.928zm-5.448 4.85c2.207 0 3.264-1.873 3.264-4.85 0-2.568-1.272-4.512-3.265-4.512-2.137 0-3.29 1.8-3.29 4.512 0 2.93 1.25 4.85 3.29 4.85zM128.877 3.217a4.27 4.27 0 0 1 1.607-.384v3.312h3.48a6.277 6.277 0 0 1 .072 1.393h-3.553v6.6c0 1.56.217 2.232 1.56 2.232a9.407 9.407 0 0 0 2.233-.312 1.635 1.635 0 0 1 .023.313 2.145 2.145 0 0 1-.24.937 7.71 7.71 0 0 1-2.953.648c-1.848 0-2.784-1.008-2.784-3.48 0-1.416.024-4.513.12-6.937h-1.656a3.79 3.79 0 0 1 .288-1.248 7.93 7.93 0 0 1 1.393-.433z"/>
    </g>
    </svg>
    <figcaption>
      <b>tisa</b> Historical Alternates
    </figcaption>
  </figure>
</section>

<section>
  <figure>
    <svg 
      class="opentype opentype--swashes"
      aria-labelledby="title-swashes description-swashes"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 179.265 53.362">
      <title id="title-swashes">the painted ox</title>
      <desc id="description-swashes">Example of Swashes. The highlighted "th", "p", and "ox" characters have a fancy ornamental treatment.</desc>
      <g class="opentype-feature--fill"><path d="M22.618 14.92a11.06 11.06 0 0 0 4.257-.944C28.423 5.806 29.67 0 32.852 0c1.2 0 1.98.946 1.98 2.58a13.426 13.426 0 0 1-5.678 11.008c-.645 3.226-1.16 6.407-1.5 8.514 1.635-3.74 4.085-7.91 6.407-7.91 1.12 0 2.064.9 2.064 2.708 0 3.61-3.01 10.062-3.01 13.588 0 1.246.43 1.806 1.032 1.806 1.29 0 3.182-3.784 5.074-8.73a1.31 1.31 0 0 1 .773.432l-.56 1.5c-1.633 4.386-3.87 8.643-6.19 8.643-1.42 0-2.45-1.12-2.45-3.27 0-4 3.052-10.75 3.052-13.5 0-1.03-.3-1.418-.774-1.418-1.547 0-4.857 5.676-6.578 13.114-.215 1.592-.43 3.226-.687 4.86h-2.15a24.452 24.452 0 0 1 .56-4.473l.258-1.634c-1.85 4.342-3.31 6.405-5.2 6.405-1.978 0-2.537-2.666-2.537-6.923a74.46 74.46 0 0 1 1.462-12.083c-3.225-.688-6.88-1.85-9.76-1.85-4.73 0-6.924 3.01-6.924 5.8a4.672 4.672 0 0 0 4.936 4.78 7.872 7.872 0 0 0 4.73-1.676l.773 1.5c-1.246 1.08-3.653 1.596-5.718 1.596A5.894 5.894 0 0 1 0 19.393c0-3.4 2.71-7.01 8.428-7.01 2.968 0 6.708 1.248 9.934 2.022 1.677-8.858 3.01-10.063 4.6-10.063 1.2 0 1.677 1.075 1.677 2.84 0 1.805-.818 4.557-2.022 7.74zm2.537 8.9c.473-2.923.988-6.02 1.548-8.986a12.6 12.6 0 0 1-4.344.86c-.9 2.32-2.064 4.772-3.226 7.18a54.267 54.267 0 0 0-.43 5.85c0 2.493.473 3.61 1.29 3.61 1.42.002 3.097-3.18 5.16-8.512zm-3.827-8.12l-1.075-.086L19.607 20c.56-1.424 1.205-2.886 1.72-4.3zm1.634-9.718c-.86 0-1.634 3.268-2.537 8.814l1.2.13c1.075-3.01 1.935-5.8 1.935-7.87.003-.65-.082-1.078-.598-1.078zm8.857-3.226a61.066 61.066 0 0 0-2.45 9.632 12.776 12.776 0 0 0 4.342-9.46c0-1.03-.172-1.462-.73-1.462-.388-.004-.818.47-1.163 1.286zM59.684 14.32h2.064l-.73 4.643c1.246-2.924 2.794-4.944 4.47-4.944 2.194 0 3.14 2.406 3.14 5.59 0 4.514-1.892 10.662-4.644 13.328 3.4-.9 6.364-4.43 8.256-9.374.215 0 .774.345.774.474l-.516 1.29c-2.15 5.375-6.192 8.857-10.148 8.9a3.15 3.15 0 0 1-3.4-2.666c-.688 3.655-.73 5.332-1.333 7.61 4.3 1.162 8 2.538 12.17 2.538a8.525 8.525 0 0 0 8.3-5.246l1.805.99A11 11 0 0 1 69.746 43c-4.43 0-8.213-1.376-12.428-2.58-2.15 7.61-6.492 12.942-13.33 12.942-5.417 0-8.212-3.525-8.212-7.224 0-4.214 3.525-8.643 10.88-8.643a38.44 38.44 0 0 1 9.2 1.2q.452-2 .773-4.128c.775-4.725 2.753-16.42 3.054-20.248zM37.71 45.966a5.993 5.993 0 0 0 6.408 6.105c5.977 0 9.417-4.73 11.395-12.126a33.83 33.83 0 0 0-8.943-1.376c-6.02 0-8.86 3.83-8.86 7.397zm21.8-16.985c0 1.678.388 3.226 1.764 3.226 2.752 0 5.074-8.084 5.074-12.857 0-2.02-.56-3.567-1.548-3.567-1.59 0-3.44 3.44-4.644 8.3a40.207 40.207 0 0 0-.644 4.898zM160.43 24.9c4.043-2.752 5.333-10.792 8.815-10.75 2.28.044 2.623 3.4 2.623 7.268 1.29-3.57 2.838-7.31 5.2-7.31a2.226 2.226 0 0 1 1.5.6c-.258.6-.516 1.247-.816 1.85a1.66 1.66 0 0 0-1.032-.345c-1.677 0-3.526 3.784-4.86 7.353a42.728 42.728 0 0 0-.3 5.117c0 2.15.3 3.7 1.248 3.7 1.548 0 3.44-3.14 5.59-8.815a1.607 1.607 0 0 1 .86.43l-.56 1.334c-2.494 5.977-4.214 8.77-6.75 8.77-1.893 0-2.408-2.148-2.408-5.46 0-.3.043-.56.043-.86-1.635 3.612-3.183 6.364-5.29 6.364-1.418 0-1.978-1.032-1.978-2.537a8.874 8.874 0 0 1 1.462-4.56l1.55.775a6.494 6.494 0 0 0-1.248 3.525c0 .774.257 1.333.9 1.333 1.5 0 3.01-3.31 4.6-7.224.042-1.98.214-4.043.214-5.677 0-2.236-.215-3.913-1.2-3.913-1.72 0-4 8.084-8.514 10.448-1.247 4.258-3.7 7.912-6.708 7.912-4.945 0-5.2-7.138-3.1-14.49l1.2.3c.26-3.01 2.28-5.934 5.634-5.934 3.794-.006 4.53 5.502 3.325 10.794zm-2.88 2.064a5.664 5.664 0 0 1-6.02-5.2c-.646 3.483-1.678 11.223 1.85 11.223 1.89 0 3.61-2.71 4.686-6.02zm0-1.16a5.85 5.85 0 0 0 .86-.087c1.29-4.9 1.2-10.492-1.376-10.492-4.472-.003-6.278 10.575.516 10.575z"/></g>
      <g><path d="M50.61 23.563c.215 0 .774.3.774.43-1.42 3.957-3.956 10.234-7.912 10.234-3.312 0-4.6-3.182-4.6-7.01 0-5.847 3.01-13.2 7.138-13.2a2.363 2.363 0 0 1 2.45 2.666c0 3.4-3.912 7.268-7.18 7.87a16.765 16.765 0 0 0-.216 2.493c0 2.88.817 5.16 2.967 5.16 2.796 0 5.075-4.643 6.58-8.643zm-9.2-.13c3.612-1.676 5.246-4.686 5.246-6.706 0-1.032-.3-1.55-.86-1.55-1.85.002-3.656 4.26-4.388 8.258zM81.785 14.362h1.935c-1.075 5.29-2.02 10.238-2.537 14.276a14.687 14.687 0 0 0-.172 2.15c0 .988.173 1.548.518 1.548.988 0 2.795-3.01 4.987-8.772a1.314 1.314 0 0 1 .774.43c-3.01 7.268-4.56 10.148-6.365 10.148-1.247 0-1.763-1.548-1.763-4.43l.215-2.063c-1.2 3.44-2.88 6.492-5.2 6.492-1.85 0-2.666-1.935-2.666-4.987 0-6.02 3.14-15.093 7.01-15.093 1.72 0 2.45 1.376 2.666 3.31zm-8.127 14.792c0 1.806.387 3.053 1.29 3.053 2.32 0 5.375-8.73 5.375-12.986 0-2.062-.56-3.438-1.72-3.438-2.365 0-4.945 8.6-4.945 13.372z"/><path d="M90.643 14.32c-1.376 6.58-2.71 12.68-2.71 16.21 0 1.29.345 1.763.774 1.763 1.333 0 2.924-3.14 5.03-8.73.216 0 .775.217.775.432-2.236 5.934-3.74 10.147-6.493 10.147-1.55 0-2.194-1.85-2.194-4.472 0-4.343 1.634-10.965 2.537-15.35zM88.966 9.8a1.96 1.96 0 0 1 1.763-2.1 1.29 1.29 0 0 1 1.29 1.462 1.915 1.915 0 0 1-1.765 2.02 1.24 1.24 0 0 1-1.29-1.382z"/><path d="M91.59 33.927a41.76 41.76 0 0 1 1.46-6.58c.817-4.643 1.72-9.846 2.107-13.027h2.322l-1.033 5.98c1.55-3.225 3.14-6.148 5.72-6.148 1.376 0 2.192.988 2.192 2.752 0 3.61-3.01 10.276-3.01 13.8 0 1.16.43 1.59 1.03 1.59 1.42 0 3.183-3.783 5.074-8.728a1.31 1.31 0 0 1 .774.43l-.473 1.248c-1.678 4.472-3.7 8.9-6.278 8.9-1.42 0-2.45-1.075-2.45-3.053 0-4 3.053-10.964 3.053-13.716 0-1.032-.3-1.59-.99-1.59-1.418 0-4 4-5.59 9.63l-1.59 8.513z"/><path d="M108.83 14.32c1.72-8.773 3.01-9.978 4.6-9.978 1.2 0 1.68 1.075 1.68 2.84a23.8 23.8 0 0 1-1.765 7.137h1.548l-.258 1.375h-1.805c-.9 2.32-2.064 4.772-3.225 7.18a54.046 54.046 0 0 0-.43 5.85c0 2.493.473 3.61 1.29 3.61 1.46 0 3.138-3.268 5.245-8.77.215 0 .73.215.73.43v.086c-2.58 6.88-4.343 10.148-6.707 10.148-1.98 0-2.537-2.666-2.537-6.923a78.654 78.654 0 0 1 1.333-11.266c0-.13.042-.216.042-.345h-1.634l.258-1.376zm2.97 1.38h-1.075l-.645 4.3zm1.634-9.718c-.816 0-1.59 3.1-2.493 8.342h1.377a23.924 23.924 0 0 0 1.72-7.268c-.003-.65-.09-1.078-.605-1.078z"/><path d="M127.105 23.563c.215 0 .774.3.774.43-1.42 3.957-3.957 10.234-7.913 10.234-3.31 0-4.6-3.182-4.6-7.01 0-5.847 3.01-13.2 7.138-13.2a2.364 2.364 0 0 1 2.45 2.666c0 3.4-3.912 7.268-7.18 7.87a16.64 16.64 0 0 0-.216 2.493c0 2.88.816 5.16 2.967 5.16 2.795 0 5.073-4.643 6.578-8.643zm-9.2-.13c3.61-1.676 5.245-4.686 5.245-6.706 0-1.032-.3-1.55-.86-1.55-1.85.002-3.655 4.26-4.39 8.258z"/><path d="M139.146.086h2.02c-.772 6.407-4.9 26.015-4.9 29.455 0 1.592.3 2.107.73 2.107 1.248 0 2.796-3.182 4.646-8.084a1.56 1.56 0 0 1 .816.474c-2.58 6.88-4.772 10.1-6.58 10.1-1.29 0-1.934-1.2-1.934-3.827 0-.56.13-1.59.3-2.924-1.29 3.784-2.88 6.837-5.29 6.837-1.848 0-2.58-2.15-2.58-5.073 0-6.02 3.1-15.093 6.968-15.093 1.59 0 2.407 1.16 2.708 2.967.95-5.543 2.278-12.594 3.096-16.938zM128.48 29.154c0 1.806.388 3.053 1.29 3.053 2.064 0 5.42-8.47 5.42-12.943 0-1.892-.517-3.482-1.764-3.482-2.407 0-4.945 8.642-4.945 13.372z"/>
    </g>
    </svg>
    <figcaption>
      <b>lavanderia</b> Swashes
    </figcaption>
  <figure>
</section>

            
          
!
            
              // Transitions
$default-transition: 500ms ease-in-out;

// Colors
$dodger-blue: #3f86ff;

// Mixins
@mixin column-buster($width) {
    position: relative;
      left: calc(-#{($width / 2) + vw} + 50%);
    width: $width + vw;
}

body {
  margin: 10vw 14vw;
}

section {
  margin-bottom: 5em;
  
  &:last-of-type {
    margin-bottom: 0;
  }
}

figure {
  margin: 0;
  padding: 0;
}

figcaption {
  margin-top: 1.75em;
  
  color: #4a4a4a;
  
  b {
    display: block;
    margin-bottom: 0.15em;

    font-variant-caps: small-caps;
    font-variant-ligatures: common-ligatures;
    letter-spacing: 0.025em;
    text-transform: inherit;
  }
}

.opentype-feature--fill {
  fill: $dodger-blue;

  transition: fill $default-transition;

  // Contexts
  figure:hover & {
    fill: #000000;
    
    transition: fill $default-transition;
  }
}

.opentype-feature--stroke {
  fill: none;
  stroke: $dodger-blue;
  stroke-miterlimit: 10;
  stroke-width: 0.35;
  
  transition: stroke $default-transition;

  // Contexts
  figure:hover & {
    stroke: #ffffff;
    
    transition: stroke $default-transition;
  }
}

.opentype--small-caps {
  width: 70%;
}

.opentype--historical-alternates {
  width: 75%;
}

.opentype--swashes {
  @include column-buster(72);
}
            
          
!
999px
Loading ..................

Console