How Do You Do max-font-size in CSS?

CSS doesn't have max-font-size, so if we need something that does something along those lines, we have to get tricky. Why would you need it at all? Well, font-size itself can be set in dynamic ways. For example, font-size: 10vw;. That's using "viewport units" to size the type, which will get larger and smaller with the size of the browser window. If we had max-font-size, we could limit how big it gets (similarly the other direction with min-font-size). One solution is to use a media query at a certain screen size breakpoint that sets the font size in a non-relative unit.

Browser compatibility for these functions is pretty sparse as I'm writing this, but Chrome currently has it. It will get there, but look at the first option in this article if you need it right now.