Responsive font without media queries

Responsive font without media query

.headline h2 {
  text-align: center;
  font-size: 70px;
}

The above font doesn’t look good on the small screen, I can give different CSS in media queries. Is their auto adjustment method w/o writing the media queries?

You can use css clamp() along with vw units to get a responsive text with min and max requirements.

2 Likes

Or to give a simpler answer (Paul’s is thorough), don’t use px to define font sizes…ever.

Use one of the variable sizing schemes. These all use the baseline font of the user and sets the font size relative to that. For easy math, I’m going to say the user has set their base font size as 20px.

  • % - set as a percentage of the base font (75% = 15px, 150% = 30px)
  • em/ex - scales based on the size of the letter m or x
  • rem - scales same as em BUT is based on the size of the container. If you set a div to have a font-size of 20px and another to the size of 30px, in the first one, a size of 2rem would be 40px but in the second, it would be 60px
  • vh/vw - set the size relative to the height OR width of the viewport.

There are others but those are the basics. You can find the various variable sizing units here.

Where Paul’s CLAMP comes into play is the variable sizings can get out of control quickly, ESPECIALLY if you use the viewport sizes. What CLAMP does is ensure those sizes don’t get out of control.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.