https://github.com/rikschennink/fitty

✨ Makes text fit perfectly
https://github.com/rikschennink/fitty

flexible fluid font-size javascript pixel resize responsive scale text

Last synced: 27 days ago
JSON representation

✨ Makes text fit perfectly

• Host: GitHub
• URL: https://github.com/rikschennink/fitty
• Owner: rikschennink
• License: mit
• Created: 2017-07-24T09:39:26.000Z (over 7 years ago)
• Default Branch: gh-pages
• Last Pushed: 2023-12-16T14:13:53.000Z (11 months ago)
• Last Synced: 2024-04-14T05:58:54.975Z (7 months ago)
• Topics: flexible, fluid, font-size, javascript, pixel, resize, responsive, scale, text
• Language: JavaScript
• Homepage: https://rikschennink.github.io/fitty/
• Size: 779 KB
• Stars: 3,665
• Watchers: 42
• Forks: 226
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fitty, Snugly text resizing

Scales up (or down) text so it fits perfectly to its parent container.

Ideal for flexible and responsive websites.

**[Visit PQINA.nl for other useful Web Components](https://pqina.nl/)**

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/rikschennink/fitty/blob/gh-pages/LICENSE)

[![npm version](https://badge.fury.io/js/fitty.svg)](https://badge.fury.io/js/fitty)

![npm](https://img.shields.io/npm/dt/fitty)

---

[](https://www.buymeacoffee.com/rikschennink/)

[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Dev updates on Twitter](https://twitter.com/rikschennink/)

---

## Features

-   No dependencies

-   Easy setup

-   Optimal performance by grouping DOM read and write operations

-   Works with WebFonts (see example below)

-   Min and max font sizes

-   Support for MultiLine

-   Auto update when viewport changes

-   Monitors element subtree and updates accordingly

## Installation

Install from npm:

```

npm install fitty --save

```

Or download `dist/fitty.min.js` and include the script on your page like shown below.

## Usage

Run fitty like shown below and pass an element reference or a querySelector. For best performance include the script just before the closing `