https://github.com/royalfig/fluid-typography-calculator
A fluid typography calculator. Determine the CSS clamp property given limits for font size and viewport width.
https://github.com/royalfig/fluid-typography-calculator
calculator fluid-typography font rem viewport
Last synced: about 1 month ago
JSON representation
A fluid typography calculator. Determine the CSS clamp property given limits for font size and viewport width.
- Host: GitHub
- URL: https://github.com/royalfig/fluid-typography-calculator
- Owner: royalfig
- Created: 2021-03-20T18:55:19.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:40:46.000Z (over 1 year ago)
- Last Synced: 2025-01-26T18:34:46.168Z (3 months ago)
- Topics: calculator, fluid-typography, font, rem, viewport
- Language: HTML
- Homepage: https://royalfig.github.io/fluid-typography-calculator/
- Size: 2.31 MB
- Stars: 14
- Watchers: 1
- Forks: 3
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fluid Typography Calculator 🧮
## Instructions
How to Use This Calculator
- Enter min and max font sizes in px or
rem. Your base font will always remain within
these limits
- Enter your min and max viewport widths in
px or rem.
- If the viewport is less than or equal to the minimum width
and vice versa. In between these limits, font size will
scale in proportion to the client's viewport width
- The Result panel shows the generated
formula that you can copy into your CSS
## Confused about fluid typography?
Read my post, "[Fluid Typography](https://ryanfeigenbaum.com/fluid-tyopgraphy)" which explains how this calculator works in detail
## Credits 👏
This calculator is inspired by Christopher Kirk-Nielsen's post, "[Modern Fluid Typography with Clamp()](https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/)"
For another fallback strategy that matches clamp's functionality, see Daniel Yuschick's "[Fluid Typography with CSS Clamp() is My New Favorite Thing](https://dev.to/yuschick/fluid-typography-with-css-clamp-is-my-new-favorite-thing-4lg3)"