Scalable font size (responsive?)
Is there a way to make the font size auto-scale based on screen size?
I have tried to put in rem, in % but it doesn't work for me.
4 answers
As an extension to what fellow Error404 has commented to you two things.
You can control the font size with your screen width:
.mifuente {
font-size: 2vw;
}
Or you can do it with the High:
.mifuente {
font-size: 2vh;
}
In more specific cases you have no alternative to using @media to do one thing or another depending on your height and width.
@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 ratio based on the width of your screen.
On the other hand, there are also vh that take the proportion taking the height as a reference.
Finally, you can use media queries. If you do not want it to make such large jumps (depending on the screen you have it will put it to some sizes or others) you can directly indicate by pixels that font-size you want it to have the source for specific screen widths.
Example:
@media (max-width:700px) and (min-width:500px) {
.texto{
font-size: 12px;
}
}
What the above example would do would be to put your font at 12 pixels, when your screen has a minimum of 500 pixels 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 named it in the other answers and is that a maximum / minimum limit is usually required when using the units of measurement vw and vh, considering that there are already screens with several thousand pixels wide and other very small, all this assuming that it is not a fluid design or progressive improvement.
While a couple of media queries would be enough to set the minimum and maximum values, we can also use calc() to set a minimum value and add units of vw or vh as 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 unit of measurement other than rem.
You can try putting them in em although 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 progress.
Then you have the option to put it in pt, but it is commented that it is a bad idea , what the pt does is depend on the client's screen size.
source
What is advised today, good practices is to do everything in em since it is the most comfortable and standard.
Another option is to put a button in terms of accessibility that what you do , is increase the font size , by means of a JS botton , that what you do is increase a percentage the base size and so what you do , with the `em' is increase the size because all are relative to the base size of the font imposed on the template.
*{
font-size: 8px;
}
For example, it is usually set like this, usually it also takes this size.
Note : you usually put the * you indicate that you want everything to have that size , but then individually you can customize it.