Scalable font size (responsive?)

As an extension to what fellow Error404 has commented, I'll tell you two things.

You can control the font size with the width of your screen:

.mifuente {
    font-size: 2vw;
}

Or you can do it with the height:

.mifuente {
    font-size: 2vh;
}

In more specific cases you have no alternative to use @mediadepending on your height and width to do one thing or another.

@media (max-width: 200px) and (max-heigth: 160px) {
    .mifuente {
        font-size: 20px;
    }
}

You can use vw(view port) units.

font-size: 3.5vw;

These will take the proportion based on the width of your screen.

On the other hand, there are also vhthat take the proportion taking the height as a reference.

Lastly, you can use media queries. If you don't want it to make such big jumps (depending on the screen you have, it will set it to some sizes or others) you can indicate directly by pixels what font-size you want the font to have for specific widths of the screen.

Example:

@media (max-width:700px) and (min-width:500px) {
    .texto{
       font-size: 12px;
    }
}

What the above example would do is set your font to 12px, when your screen is a minimum of 500px and a maximum of 700px. You can adjust it to your needs and you can use as many as you want.

I see that they have not mentioned it in the other answers and it is that a maximum / minimum limit is generally required when using the units of measurement vwand vh, taking into account that there are already screens with several thousand pixels wide and others very small, all of this assuming it's not fluid design or progressive enhancement .

Although a couple of media queries would suffice to establish the minimum and maximum values, we can also use them calc()to set a minimum value and add units of vwo vhas the resolution increases:

font-size: calc(1rem + 1vw);

In this example the minimum size will be 1rem and 1% of the current viewport width value will be added to it.

For the upper bound we can use a "normal" media query:

@media (min-width: 200rem) {
  p {
    font-size: 3rem;
  }
}

Just in case, you can use any other unit of measure other than rem.

You can try to put them in emalthough it will depend on the source that the screen has, if for example:

The base font is at : 8px.

1 em = 8px , 2 em = 16px and so on.

Then you have the option to put it in pt, but it is said that it is a bad idea , what it does ptis depend on the size of the client's screen. font

What is advised today, good practice is to do everything in emsince it is the most comfortable and standard.

Another option is to put a button in terms of accessibility that what it does is increase the font size, through a js button, that what it does is increase the base size by a percentage and so what you do, with the ` em' is to increase the size because they are all relative to the base size of the font imposed in the template.

*{
 font-size: 8px;
}

For example, it is usually set like this, it usually also takes this size.

Note : You usually put the *signal that you want everything to have that size, but then individually you can customize it.