Creating responsive h tags

How do I create responsive h tags for the headings of my site?
I am using % as a font size.

you could use following css/scss for the different bootstrap breakpoints. Replace .your-responsive-font with h1 and use % or pixel values.

.your-responsive-font {
  font-size: 1em;
}
@media (min-width: 576px) and (max-width: 767px) {
  .your-responsive-font {
    font-size: 1.25em;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .your-responsive-font {
    font-size: 1.5em;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .your-responsive-font {
    font-size: 1.75em;
  }
}
@media (min-width: 1200px) {
  .your-responsive-font {
    font-size: 2em;
  }
}
1 Like

You can use media tags as mentioned but I find that best for when you want to be specific. What I personally use is clamp(); There are also libraries you can pull if you are rolling your own theme/package. RFS comes to mind: github.com /twbs/rfs

But like I said I prefer, clamp(); and fluid type: Fluid type scale calculator | Utopia
To make sense of the various ratios and to pull/preview values: typescale. com/

If using clamp(); with LESS in the Concrete compiler you will have to escape it, as they haven’t updated it in a while (Last time I had to use it). So font-size: ~“clamp(blah)”;