Creating responsive h tags

Developing with Concrete
1

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

2

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
3

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)”;

4

Here’s how I do it:

 h1{
  font-size: clamp(40px, calc(40px + 0.032 * (100vw - 400px)), 72px);
}
  • 40px is the smallest size
  • 72px is the biggest size
  • 40px will be reached at 400px
  • 72px will be reached at 1300px
  • In between min/max the font grows evenly

Give this code to ChatGPT or your AI of choice and let it do the calculation for you, depending on your needs:

“Please adjust this calculation to reach 14px at 400px as minimum and 16px at 1300px as maximum”

Result:

clamp(14px, calc(14px + 0.00222 * (100vw - 400px)), 16px);

This way you can save yourself potentially a ton of media-queries and keep your code more clean.

5

I agree that clamp is great for this.

Since I’m normally using sass to build a custom theme, I add this function to my project:

@function clamp-px($minFont, $maxFont, $minVp: 320, $maxVp: 1000) {
  @if not unitless($minFont) or not unitless($maxFont) {
    @warn "Font arguments should be unitless";
  }
  @if not unitless($minVp) or not unitless($maxVp) {
    @warn "Viewport arguments should be unitless";
  }
  $minFont: calc($minFont / 16);
  $maxFont: calc($maxFont / 16);
  $minVp: calc($minVp / 16);
  $maxVp: calc($maxVp / 16);

  // y = mx + q
  $m: calc(($maxFont - $minFont) / ($maxVp - $minVp));
  $q: calc(-1 * $minVp * $m + $minFont);
  $m: calc($m * 100);

  // Rounding with precision of 4
  $m: math.div(math.round($m * 10000), 10000);
  $q: math.div(math.round($q * 10000), 10000);
  $minFont: math.div(math.round($minFont * 10000), 10000);
  $maxFont: math.div(math.round($maxFont * 10000), 10000);

  @return clamp(calc($minFont * 1rem), calc($q * 1rem + calc($m * 1vw)), calc($maxFont * 1rem));
}

So then I’ll use it like this:

// (these two values defined somewhere for convenience)
$lower: 400;
$upper: 1300;

.ccm-page h1 {
    font-size: clamp-px(40, 72, $lower, $upper);
}
6

Thanks for all your replies. I have been using media queries but thta is quickly becoming superceded by css advencements. Yes the clamp value is awesome once I get my head around its maths! Be great if Bootstrap could automatically use clamp in their styleheet.

1 Like