# Creating responsive h tags

**URL:** https://forums.concretecms.org/t/creating-responsive-h-tags/7658
**Category:** Developing with Concrete
**Created:** [June 20, 2024, 10:05pm UTC](https://forums.concretecms.org/t/creating-responsive-h-tags/7658 "2024-06-20T22:05:09Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![finelinecreative](https://forums.concretecms.org/user_avatar/forums.concretecms.org/finelinecreative/32/5178_2.png) [@finelinecreative](https://forums.concretecms.org/u/finelinecreative)
#### Post date: [June 20, 2024, 10:05pm UTC](https://forums.concretecms.org/t/creating-responsive-h-tags/7658/1 "2024-06-20T22:05:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![gotofil](https://forums.concretecms.org/user_avatar/forums.concretecms.org/gotofil/32/4572_2.png) [@gotofil](https://forums.concretecms.org/u/gotofil)
#### Post date: [July 9, 2024, 3:10pm UTC](https://forums.concretecms.org/t/creating-responsive-h-tags/7658/3 "2024-07-09T15:10:20Z")

</div>

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](http://github.com) /twbs/rfs

But like I said I prefer, clamp(); and fluid type: [Fluid type scale calculator | Utopia](https://utopia.fyi/type/calculator/)  
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)”;

---

<div class="post-metadata">

### Author: ![Kiesel](https://forums.concretecms.org/user_avatar/forums.concretecms.org/kiesel/32/3495_2.png) [@Kiesel](https://forums.concretecms.org/u/Kiesel)
#### Post date: [August 29, 2024, 3:57pm UTC](https://forums.concretecms.org/t/creating-responsive-h-tags/7658/4 "2024-08-29T15:57:57Z")

</div>

Here’s how I do it:

```auto
 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:

```auto
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.

---

<div class="post-metadata">

### Author: ![mesuva](https://forums.concretecms.org/user_avatar/forums.concretecms.org/mesuva/32/4014_2.png) [@mesuva](https://forums.concretecms.org/u/mesuva)
#### Post date: [August 29, 2024, 5:09pm UTC](https://forums.concretecms.org/t/creating-responsive-h-tags/7658/5 "2024-08-29T17:09:03Z")

</div>

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:

```auto
@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:

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

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

```

---

<div class="post-metadata">

### Author: ![finelinecreative](https://forums.concretecms.org/user_avatar/forums.concretecms.org/finelinecreative/32/5178_2.png) [@finelinecreative](https://forums.concretecms.org/u/finelinecreative)
#### Post date: [August 30, 2024, 11:20pm UTC](https://forums.concretecms.org/t/creating-responsive-h-tags/7658/6 "2024-08-30T23:20:54Z")

</div>

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.