Kevin Powell - Community•12mo ago

Question regarding responsive font sizes

Hello! I'm a new~ish web developer building a responsive website. After researching on responsiveness, I've noticed that most people either go for clamp() or set different font sizes for specific break points. What i would like to understand is if there are any benefits/disadvantages between them, and which is one of them is more recommended. Thanks in advance ^

3 Replies

Kevin Powell•12mo ago

Either one is fine, and you can even do both if you want. I often use clamp() for my larger font sizes, and just have set ones that I change in media queries for the regular text. I wouldn't say one is better than the other, or that one is a a better practice than the other. It also depends on the design your working with as well, a lot of the time that can inform your decisions.

13eck•12mo ago

In my opinion clamp()is better because you can set-it-and-forget-it. You set the min, max, and "grow factor" and regardless of the screen size the font will change (up to a point) and you don't have to worry about setting a new font size in each of your media queries. I'm a big fan of:

:root {
  --1rem: clamp(1rem, 0.875rem + 0.5vmin , 2rem);
}

body {
  font-size: var(--1rem);
}
h1 { font-size: calc(2 * var(--1rem)) ; }
h2 { font-size: calc(1.5 * var(--1rem)); }
h3 { font-size: calc(1.17 * var(--1rem)); }
h4 { font-size: var(--1rem) }
h5 { font-size: calc(0.83 * var(--1rem)) }
h6 { font-size: calc(0.67 * var(--1rem)) }

:root {
  --1rem: clamp(1rem, 0.875rem + 0.5vmin , 2rem);
}

body {
  font-size: var(--1rem);
}
h1 { font-size: calc(2 * var(--1rem)) ; }
h2 { font-size: calc(1.5 * var(--1rem)); }
h3 { font-size: calc(1.17 * var(--1rem)); }
h4 { font-size: var(--1rem) }
h5 { font-size: calc(0.83 * var(--1rem)) }
h6 { font-size: calc(0.67 * var(--1rem)) }

h1–h6 based on Jen Simmons' CSS Remedy: https://github.com/jensimmons/cssremedy/blob/master/css/remedy.css. Of course modify the middle (and potentially last) value of the clamp() function as-needed to work for your chosen font.

omo•12mo ago

Thank you for your answers! I'll try to use out both methods and see which one i prefer with. Thanks again ^

Gaming

Programming

Question regarding responsive font sizes