Fluid-type-scale-calculator - Generate font size variables for a fluid type scale with CSS clamp

Last update: May 19, 2022

Fluid Type Scale Calculator

Generate font size variables for a fluid type scale with CSS clamp.

Overview

Customize everything, grab the output CSS, and drop it into any existing design system.

Features

  • Fully customizable parameters for everything:
    • Baseline min font size, screen width, type scale
    • Baseline max font size, screen width, type scale
    • All of your modular steps
    • Custom naming convention for CSS variables
    • Whether to show output in rems or pixels
  • Output CSS variables for fluid font sizing.
  • Live preview table. Pick a font and enter some sample text to fine-tune the results.

Tech Stack

This project was bootstrapped with my 11ty-sass-images-seo starter and uses the following technologies:

Running Locally

  1. Clone the repo.
  2. Run yarn to install dependencies.
  3. Run yarn dev and visit localhost:8080 to view the app.

Similar Tools

Learn More

GitHub

https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator
Comments
  • 1. Feature: URL sharing

    Merge checklist:

    • [x] Test the major browsers the app supports:
      • [x] Chrome
      • [x] Firefox
      • [x] Safari
    • [x] Test on an actual mobile device.
    • [x] Test with a screen reader.
    • [x] Fix any validation errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-24--zen-ptolemy-a47e6d.netlify.app%2F
    • [x] Test the app for basic functionality (all inputs, validation, copy to clipboard, preview, etc.).
    • [x] Verify that all external links have the correct attributes (noreferrer noopener).
    • [x] Test link sharing functionality (SSR on the /calculate route).
    • [x] Verify that robots.txt is valid: https://www.google.com/webmasters/tools/robots-testing-tool?utm_source=support.google.com/webmasters/&utm_medium=referral&utm_campaign=%206062598
    • [x] Validate JSON-LD: https://validator.schema.org/#url=https%3A%2F%2Fdeploy-preview-24--zen-ptolemy-a47e6d.netlify.app%2F
    • [x] Verify that performance scores are acceptable.
      • [x] Lighthouse (done as part of Netlify build step)
      • [x] WebPageTest: https://www.webpagetest.org/
    • [x] Verify that all meta tags have remained unchanged:
      • [x] Title (regular and OG): Fluid Type Scale - Generate responsive font-size variables
      • [x] Description (regular and OG): Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any existing design system.
      • [x] Keywords: fluid type scale, type scale, CSS clamp
      • [x] Author: Aleksandr Hovhannisyan
      • [x] Canonical URL: https://www.fluid-type-scale.com/
      • [x] Twitter and OG preview image: https://www.fluid-type-scale.com/assets/images/thumbnail.png.
    • [x] Verify that social media preview images are still working (https://cards-dev.twitter.com/validator).
    • [x] Verify that mobile/tablet/desktop still look and function the same.
    • [x] Verify that no-JS experience is acceptable:
      • [x] The page loads, even though it's not interactive/hydrated.
      • [x] Users can change form values.
      • [x] Users can submit the form.
      • [x] On submit, users are redirected to the submission page.
      • [x] The output updates accordingly and any requested fonts load correctly.
    • [x] Verify that the /calculate route is not indexed (excluded from sitemap).
    Reviewed by AleksandrHovhannisyan at 2022-04-05 11:02
  • 2. Support URL sharing and no-JS form submissions

    Description

    This ticket is to support two related enhancements:

    • URL sharing
    • No-JS form submissions

    When a user changes the parameters in the form, the app should update its URL with the serialized query parameters, thus allowing them to share the URL. On page request, the app would read those query parameters on the server side and use them to populate the app's initial state.

    The app should also support no-JS form submissions for the (admittedly rare) case where a user may have JavaScript disabled. In that case, on form submission, users should be redirected to a page whose URL consists of query parameters assembled from the form's data.

    Requirements

    • names for all of the inputs
    • a form action pointing to a dynamic route
    • the 11ty serverless plugin

    The basic idea is then to supply the 11ty serverless query params to the React component and use those to initialize its state. SSR will then return the code output.

    Additional context, ideas, or considerations

    • Not currently possible with Slinkity because it does not work with 11ty Serverless.
    • If and when this is possible, XSS will need to be defended against very carefully.
    • Easy to implement if we migrate to a framework like Next.js.
    Reviewed by AleksandrHovhannisyan at 2022-01-22 20:19
  • 3. UX/code enhancements

    • Added proper return value typing to state reducer
    • Removed rounding control since it's not really contributing much
    • Improved mobile UX for preview so the range input is closer to the table
    • Upgraded slinkity
    Reviewed by AleksandrHovhannisyan at 2022-01-08 13:14
  • 4. Tabular numbers not well aligned

    On the following video, we see the total width taken by the number varies when the values change:

    https://user-images.githubusercontent.com/9340937/150575548-45cfbe7d-dca7-4833-92c4-d64d4af315fe.mp4

    This can be improved using CSS:

    .my-class-for-numbers {
      font-feature-settings: "tnum"; /* optional */
      font-variant-numeric: tabular-nums;
    }
    

    font-variant-numeric alone should be enough.

    Knowledge reference:

    Reviewed by meduzen at 2022-01-21 18:03
  • 5. [WIP] Migrate to Next.js and enable URL sharing

    Related ticket: #17

    Overview:

    • Moves the project to Next.js
    • Adds TypeScript
    • Supports URL sharing/SSR for a dedicated calculate route

    Merge checklist:

    • [x] Test the major browsers the app supports:
      • [x] Chrome
      • [x] Firefox
      • [x] Safari
    • [x] Test on an actual mobile device.
    • [x] Test with a screen reader.
    • [x] Fix any validation errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-20--zen-ptolemy-a47e6d.netlify.app%2F
    • [x] Test the app for basic functionality (all inputs, validation, copy to clipboard, preview, etc.).
    • [x] Verify that all external links have the correct attributes (noreferrer noopener).
    • [x] Test link sharing functionality (SSR on the /calculate route).
    • [x] Verify that robots.txt is valid: https://www.google.com/webmasters/tools/robots-testing-tool?utm_source=support.google.com/webmasters/&utm_medium=referral&utm_campaign=%206062598
    • [x] Validate JSON-LD: https://validator.schema.org/#url=https%3A%2F%2Fdeploy-preview-20--zen-ptolemy-a47e6d.netlify.app%2F
    • [x] Verify that performance scores are acceptable.
      • [x] Lighthouse (done as part of Netlify build step)
      • [x] WebPageTest: https://www.webpagetest.org/
    • [x] Verify that all meta tags have remained unchanged:
      • [x] Title (regular and OG): Fluid Type Scale - Generate responsive font-size variables
      • [x] Description (regular and OG): Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any existing design system.
      • [x] Keywords: fluid type scale, type scale, CSS clamp
      • [x] Author: Aleksandr Hovhannisyan
      • [x] Canonical URL: https://www.fluid-type-scale.com/
      • [x] Twitter and OG preview image: https://www.fluid-type-scale.com/assets/images/thumbnail.png.
    • [x] Verify that social media preview images are still working (https://cards-dev.twitter.com/validator).
    • [x] Verify that mobile/tablet/desktop still look and function the same.
    • [x] Verify that no-JS experience is acceptable:
      • [x] The page loads, even though it's not interactive/hydrated.
      • [x] Users can change form values.
      • [x] Users can submit the form.
      • [x] On submit, users are redirected to the submission page.
      • [x] The output updates accordingly and any requested fonts load correctly.
    • [x] Verify that the /calculate route is not indexed (blocked in robots.txt).
    Reviewed by AleksandrHovhannisyan at 2022-04-01 16:06
  • 6. Disable ESM due to errors on dynamic routes

    Seeing this on the /calculate route:

    {"errorType":"ReferenceError","errorMessage":"module is not defined in ES module scope\nThis file is being treated as an ES module because it has a '.js' file extension and '/var/task/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.","trace":["ReferenceError: module is not defined in ES module scope","This file is being treated as an ES module because it has a '.js' file extension and '/var/task/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.","    at file:///var/task/___netlify-handler.js:1:1","    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)","    at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:60:5)","    at /var/runtime/deasync.js:23:15","    at _tryAwaitImport (/var/runtime/UserFunction.js:74:12)","    at _tryRequire (/var/runtime/UserFunction.js:162:21)","    at _loadUserApp (/var/runtime/UserFunction.js:197:12)","    at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)","    at Object.<anonymous> (/var/runtime/index.js:43:30)","    at Module._compile (internal/modules/cjs/loader.js:1085:14)"]}
    
    Reviewed by AleksandrHovhannisyan at 2022-04-06 22:52
  • 7. UX/UI enhancements

    • Added an Alert component to communicate time-sensitive information to screen readers (e.g., copy-to-clipboard state).
    • Nested <code> as a child of the output and removed redundant styling set on the output element.
    • Removed hard-coded padding from the copy-to-clipboard button and used a spacing variable instead.
    • Cleaned up the styling for the rounding group.

    |Before|After| |-|-| |image|image|

    Reviewed by AleksandrHovhannisyan at 2022-03-25 12:44
  • 8. Use datalist + numeric input for type scale picker instead of select

    Datalist doesn't show in Firefox for numeric inputs (https://caniuse.com/datalist), but the input still works. This seemed like the path of least resistance for allowing custom inputs but also suggesting values natively. The alternative is to conditionally render an additional input for a custom input, but that seems a bit heavy handed.

    Tested with NVDA and VoiceOver on:

    • Chrome 97
    • Firefox 96
    • Safari 15.1

    Works well!

    Roughly what it looks like in Chrome/Edge/Safari:

    image

    Reviewed by AleksandrHovhannisyan at 2022-01-21 23:40
  • 9. Bump follow-redirects from 1.14.5 to 1.14.7

    Bumps follow-redirects from 1.14.5 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-01-16 12:47
  • 10. Make performance/code organization adjustments

    • Debounce input/select handlers by default. Allow overrides on a case-by-case basis.
    • Clean up some props/state for the Preview component.
    • Split form out into separate components in case we need to memo them later (from profiling, this doesn't seem to be worth it).
    Reviewed by AleksandrHovhannisyan at 2022-01-06 12:33
  • 11. Standardize input/select styling

    For consistency across:

    • Firefox (Windows, Mac)—background color was picking up the OS theme.
    • Safari (Mac)—without appearance: none, these were appearing as default OS-themed inputs that don't respect height properties (https://stackoverflow.com/a/17469167/5323344).

    Chrome was the only one that behaved itself, but now they should all look the same.

    Examples:

    Firefox (before)

    image

    Firefox (after)

    image

    Reviewed by AleksandrHovhannisyan at 2022-01-05 00:40
  • 12. Fix inter font rendering issue on mac OS

    Context: I'm currently self-hosting Inter for performance using https://google-webfonts-helper.herokuapp.com/.

    Unfortunately, the app is currently using an outdated version of Inter that renders the uppercase letter A with two little weird holes that are very noticeable on mac OS (and only mac). See issue here: https://github.com/majodev/google-webfonts-helper/issues/130.

    Workarounds that have come to mind:

    • Don't self-host the fonts and instead link to Google Fonts. Noticeably worse for performance per #8.
    • Use https://github.com/takanorip/eleventy-google-fonts/. Downside: it returns the CSS for all charsets rather than just latin.
    • (Temporary patch) Use different sample text and hope people don't notice 😅 Footer text also contains an uppercase A from my name, so this wouldn't really work.
    • Use a different font 😞 Inter is so pretty though...
    Reviewed by AleksandrHovhannisyan at 2022-01-04 23:48
Portfolio site developed with NextJs & React framer-motion for fluid fancy animations

Portfolio site developed with NextJs & React framer-motion for fluid fancy animations

Apr 26, 2022
Loan-app-aralovelace - Simple Loan Calculator Built Using React.js

Production - https://loan-app-aralovelace.vercel.app/ App Calculator App by Aral

Jan 7, 2022
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Dec 18, 2021
🔑 Generate good customizable passwords
🔑 Generate good customizable passwords

Welcome to password-generator-web ?? ?? password-generator-web in production... ?? Generate good customizable passwords Screenshots ?? Table Of Conten

Jan 28, 2022
generate forms from JSON object
generate forms from JSON object

json-obj-form-generator generate forms from JSON object Install npm install --save json-obj-form-generator For more informations check documentation w

Nov 10, 2021
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user.
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user.

<Avatar> Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. We use a fallback system th

May 18, 2022
Create-editorconfig - A simple npm script to generate an .editorconfig file

Create EditorConfig A simple npm script to generate an .editorconfig file. You d

Jan 11, 2022
CLI based on Vite to generate your project easily
CLI based on Vite to generate your project easily

CLI based on Vite to generate your project easily

Apr 1, 2022
This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description
This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description

This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description. I used React and Redux to fetch Pokemon data from the API.

Dec 25, 2021
I have created a Login page type of app using react.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 28, 2021
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

Basic Next.js boilerplate ready to use in any type of websites. View demo » My L

May 10, 2022
Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React
Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React

Mosaic Lite is a responsive dashboard template built on top of TailwindCSS and fully coded in React

May 17, 2022
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

May 13, 2022
VRT starter (Vite, React, Tailwind CSS)

VRT-Starter (vite, react, tailwindcss) The most lightweight, vanilla template for React, Vite, & Tailwind CSS. It's designed to save you a couple minu

Mar 16, 2022
A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps :rocket:

itzmono-vite A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps ?? Batteries Included ⚡ Vite 2 ??️ TypeScript ?? React ?

May 2, 2022
💨 A boilerplate for Vite.js, React TypeScript, & Tailwind CSS

VR2T Boilerplate ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Installation Choose an option: Download as .ZIP then extract/un

Nov 25, 2021
A boilerplate generator for VR2T → Vite.js, React TypeScript, & Tailwind CSS.

VR2T Boilerplate Generator ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Why Use VR2T? Without VR2T, setting up a project woul

Apr 16, 2022
Notus React: Free Tailwind CSS UI Kit and Admin
Notus React: Free Tailwind CSS UI Kit and Admin

Notus React A beautiful UI Kit and Admin for Tailwind CSS and React. Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let N

May 6, 2022
A responsive landing page for food delivery app made with React & Tailwind CSS.
A responsive landing page for food delivery app made with React & Tailwind CSS.

React & Tailwind CSS Landing Page Intro I started this project to gain experience of Tailwind CSS which is a utility-first mobile-first CSS library. L

May 15, 2022