Currently I'm doing an experiment with my first Design System(I have chosen Bootstrap) and Design Tokens(Style Dictionary npm module)

I configured and build all good,

Later I wanted to achieve as follows, <h1> font size to be different for web and devices. I know media query handle this requirement some extend. Is there any other way to handle this?


There are a number of ways forward, and you've mentioned @media queries already--though that's not the easiest way.

I'm stealing the best answer from StackOverflow https://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters

You can use this to change font-size based on viewport width:

h1 {
  font-size: 16px; /* Default for browsers that don't support calc() or vw */
  font-size: calc(12px + 0.9vw);

You can also use clamp() for something even easier, but check the browser usage against your needs, as it has less support than above.

h1 {
    font-size: 25px;
    font-size: clamp(2rem, 4vw, 2.5rem); /* min, default, max */

Not the answer you're looking for? Browse other questions tagged or ask your own question.