lipp / fit-text

A fit text to width responsive web component

fit-text

A very basic and lightweight vanilla fit-text web component, which adjusts the font-size to fit the parent container width.

.

Highlights

• vanilla web component / custom element
• less than 600 byte (minified + gzip)
• no dependencies
• no additional css / js required
• supports custom fonts

The implementation relies on custom elements and shadow dom parts of the web component specs (check support). For using custom fonts, the browser must support the FontFaceSet API (onloadingdone event, check support)

Thus, not every major Browser is supported yet.

Demo

Play with this demo on codepen.io.

Usage

<script src="https://unpkg.com/fit-text-webcomponent"></script>

<div style="width: 50vw;">
  <fix-text>This fits to 50vw</fit-text>
</div>

Also checkout the examples directory. They are deployed here