Kevin Powell - Community•17mo ago

Font-size CSS

how can i use the min and max function in font-size css i want to in 1200px font-size get 60px and less than 1200px font-size get 40px

13 Replies

vince•17mo ago

By 1200px font size do you mean 1200px screen size?

BERSERK•17mo ago

yes i meant the 1200px screen size

vince•17mo ago

Look into clamp: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

clamp() - CSS: Cascading Style Sheets | MDN

The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

vince•17mo ago

Clamp works like this:

.class {
  font-size: clamp(minValue, preferredValue, maxValue);
}

.class {
  font-size: clamp(minValue, preferredValue, maxValue);
}

BERSERK•17mo ago

yeah , I did check the clamp() but I don't understand where the maxvalue will apply to the property and when the minvalue will apply it to the property

Myndi•17mo ago

Clamp is divided in order: minimum value it will take, changing value, maximum value it will take - clamp(min, changing, max). So something like clamp(1rem, 5vw, 2rem) won't be smaller than 1rem or bigger than 2rem.

vince•17mo ago

To add onto what was just said, you don't need a media query with clamp.

BERSERK•17mo ago

so as you said the changing is the breakpoint to change the size what about the min() and the max()

vince•17mo ago

No, that's not what they mean. Read the mdn docs I linked. If you want to change it on breakpoints you can do

.class {
  font-size: 60px;
}

@media (max-width: 1200px) {
  .class {
    font-size: 40px;
  }
}

.class {
  font-size: 60px;
}

@media (max-width: 1200px) {
  .class {
    font-size: 40px;
  }
}

Clamp is generally the better option imo because less media queries the better Also don't use px for media queries or font sizes, use rem

BERSERK•17mo ago

ok ok i need to practice this more to understand it deeply thanks bor bro*

vince•17mo ago

No problem, basically just to reiterate: clamp() is really good for typography because you don't need to rely on media queries when changing font sizes. It takes 3 arguments: min, preferred, max. min is the smallest the font size will be. preferred is the preferred value, which is to say the value that clamp will try to use (you should make this a unit that scales with screen size, like vw). max is the largest the font size can grow. Don't use px for your font size as it won't adapt based on user browser preferences. A user can set their default browser font size to 24px for example, and if you have your font sizes in rem, it will calculate 1 rem to be equal to 24px. If you make configure your font sizes to be in px, it will disregard user browser preferences. For media queries, it's generally regarded to use rem as well, though I did read that you can use px if you really want to (though you'd be losing support for IE I believe). By default, 1 rem = 16px though. So you can either use a VSCode extension that does the calculation for you (https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem) or you can use a website (https://nekocalc.com/px-to-rem-converter).

jamesoza•7mo ago

I would also suggest using the REM to PX Converter, I found a very nice tool (https://codebeautify.org/rem-to-px-converter); by default, 1 rem = 16px, but it can be changed.

Jochem•7mo ago

While you can change it, you shouldn't. It's an accessibility nightmare waiting to happen.

Gaming

Programming

Font-size CSS