Kevin Powell - Community•2mo ago

h1 responsive

Hello I want to make my h1 responsive. I know I can do that with media queries but I wonder if there is also another way ?

25 Replies

13eck•2mo ago

Clamp on the font size

roelofOP•2mo ago

Thanks I think I have to play what the middle value will be

13eck•2mo ago

Yeah, the middle value is really the key. And it's soo dependant on the font family you choose.

reznaeous•2mo ago

Found https://www.mcneece.com/clamp-generator/ not long ago ... might help.

Mark McNeece

McNeece

Clamp Generator ⭐

Clamp Generator lets you nail responsive font sizes and layouts without the CSS headache by generating perfect clamp() function values for fluid typography across all devices.

13eck•2mo ago

Why does it care about the viewport size but not the font being used? It's kinda jank, IMO.

roelofOP•2mo ago

The font I have to use is Inter

roelofOP•2mo ago

https://fonts.google.com/specimen/Inter

Google Fonts

Inter - Google Fonts

Inter is a variable font family carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-

roelofOP•2mo ago

@13eck this is what I have so far https://roelofwobben.github.io/social-links/ So still a lot of work to do to make it look well I think h1 needs to be between 16px and 42px Can someone help me figure out what the middle value of clamp needs to be ?

13eck•2mo ago

I’m busy out and about so can’t post much on mobile, but I’d find a good formula to use for your body text. Use that as the font size on html. That way your body text, headings, etc will use that as their em for sizing

roelofOP•2mo ago

oke And I can wait till you are at home

Kevin Powell•2mo ago

https://utopia.fyi has a nice font-size clamp generator

Utopia

Fluid responsive design

roelofOP•2mo ago

@Kevin thanks I find it a confusing one Do I have to add this to my css to make it work:

/* @link https://utopia.fyi/type/calculator?c=320,16,1,1240,42,1,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step--1: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-0: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-1: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-2: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-3: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-4: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-5: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
}

/* @link https://utopia.fyi/type/calculator?c=320,16,1,1240,42,1,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step--1: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-0: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-1: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-2: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-3: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-4: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
  --step-5: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
}

Kevin Powell•2mo ago

It makes an entire range, so all your text can be resposnive. In this case, they're all the same, so just go with one, and use the variable

roelofOP•2mo ago

oke and not be worried about this message :

    Step 5 fails when the viewport is between 1169px and 1742px
    Step 4 fails when the viewport is between 1169px and 1742px
    Step 3 fails when the viewport is between 1169px and 1742px
    Step 2 fails when the viewport is between 1169px and 1742px
    Step 1 fails when the viewport is between 1169px and 1742px
    Step 0 fails when the viewport is between 1169px and 1742px
    Step -1 fails when the viewport is between 1169px and 1742px
    Step -2 fails when the viewport is between 1169px and 1742px

    Step 5 fails when the viewport is between 1169px and 1742px
    Step 4 fails when the viewport is between 1169px and 1742px
    Step 3 fails when the viewport is between 1169px and 1742px
    Step 2 fails when the viewport is between 1169px and 1742px
    Step 1 fails when the viewport is between 1169px and 1742px
    Step 0 fails when the viewport is between 1169px and 1742px
    Step -1 fails when the viewport is between 1169px and 1742px
    Step -2 fails when the viewport is between 1169px and 1742px

Kevin Powell•2mo ago

where are you getting that? I would just do:

h1 {
  font-size: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
}

h1 {
  font-size: clamp(1rem, 0.4348rem + 2.8261vw, 2.625rem);
}

13eck•2mo ago

My suggestion is

html {
    font-size: clamp(1em, 0.5em + 0.875vw, 2em);
}

html {
    font-size: clamp(1em, 0.5em + 0.875vw, 2em);
}

Or similar. That way the responsive font is set for all font sizes and heading, etc will inherit the changing size. So you don’t need to re/set the sizes on all various elements that have sizes.

roelofOP•2mo ago

On the same page as I see the clamp thing Thanks, I will try that also

curiousmissfox•2mo ago

Its a warning that the clamp doesn't adhere to WCAG standards to zoom to 200%

curiousmissfox•2mo ago

Because the min was 16px and max was 42. It goes away if you adjust to difference > min(16) max(24) or min(28) max(42) etc Its kinda cool, utopia has added the "make it relative to viewport OR container" and changes vw to cqi. Hadn't seen that on there before.

13eck•2mo ago

Are you sure it’s clamp causing the issue or the units chosen? That’s why I always advocate for using rem in the clamp function: so it allows for zoom and user-override font sizes

curiousmissfox•2mo ago

The values chosen in utopia made too large a difference between min and max values. Sorry that was confusing to use the min and max fx in my response; OP had these min and max values which was triggering the error that it couldn't zoom to 200% with those vals

curiousmissfox•2mo ago

OPs utopia link https://utopia.fyi/type/calculator/?c=320,16,1,1240,42,1,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12

Utopia

Fluid type scale calculator

Fluid responsive design

roelofOP•2mo ago

oke, then I have to look what font-size here is used

noergaard•2mo ago

I think I will make a tool for this and add to my side project. It seems many of the clamp generators out there are good, but not perfect

13eck•2mo ago

I'm seeing all your font sizes in px which just makes accessibility-minded people cry Your font sizes should always be rem or em based. If you use px it will override any defaults set by the user. That's why I suggest using clamp on the body (not html as I said above, that was my bad for trying to type on mobile). As rem is based on the root font size, so if your user sets their default font size to 20px then 1rem is 20px. If you set the base font size to 16px then you're overwriting the user's default, which is bad mojo. Also,

* {
    box-sizing: border-box;
    margin: 0;  /* but */
    padding: 0; /* why  */
    font-family: 'Inter', sans-serif;   
}

* {
    box-sizing: border-box;
    margin: 0;  /* but */
    padding: 0; /* why  */
    font-family: 'Inter', sans-serif;   
}

What's the point of this? Why are you nuking margin/padding? You're adding more problems then you're solving. Try adding some bullet lists and see what happens. If you want to remove the default margin on the body element then remove it there, don't fuck with all the other elements to fix one! so if you do

body {
    font-size: clamp(1rem, 0.5rem + 0.875vw, 2rem);
}

body {
    font-size: clamp(1rem, 0.5rem + 0.875vw, 2rem);
}

This sets your default font size of between 1rem and 2rem (16px to 32px unless the user changes their settings) based on the size of the viewport. This then automatically changes the header font sizes as they are based on this default size: h1 is usually 2em, so will be twice the size of your body text. And yes, that clamp is the one that I always start with as it's a decent growth factor for the system fonts. Play around with it and see if it works for you—I do increments of 1/8 for all font-based units (hence the 0.875, or 7/8ths). If that's too much, drop it down to `0.5rem + 0.75vw.

Gaming

Programming

h1 responsive

Did you find this page helpful?