Font reponsive with css

Question

Good afternoon, I am making an html page and have some blocks that are responsive. Now I need the text displayed inside them to be as well. How can I do this?

Answer 1

An alternative for you to have full control of resizing your sources is to use the media queries of css:

@media screen and (min-width: 480px) {
    p {font-size: 12px;}
}
@media screen and (min-width: 768px) {
    p {font-size: 16px;}
}
@media screen and (min-width: 1024px) {
    p {font-size: 18px;}
}

In that case you can create as many rules as you think necessary.

The second option would be to actually use em. Each em corresponds to the current font size, which by default in browsers is 16px. That is to say:

p {
    font-size: 1em; //16px
}
h1 {
    font-size: 2em; //32px
}
h2 {
    font-size: 1.5em; //24px;
}

Answer 2

In standard EM, 1 MS usually equals 16 pixels, that is, the measure that the browser considers as standard for texts. Using MS is a question of accessibility, as people with difficulty reading can freely increase and decrease the size of the text in a proportional way. What gives more freedom to the user without breaking its layout!

I leave a option if it’s interesting to you. Note that 16 pixels = 100%, 10 pixels is equal to 62.5%. (16 x 0.625 = 10). If you want makes it much easier to calculate values from a decimal basis. It is possible to define the body worthwhile font-size: 62.5% as standard for the whole document. So make 1em equivalent to 10px

Then it would look like this:

body {
  font-size: 62.5%;
}

.bloco {
  width: 100%; 
}
.bloco p {
  font-size: 1em; /* Conforme explicado acima, seria equivalente a 10px */
}

A 12px text, for example, would be equivalent to 1.2em(Read the explanation above). Already a header with 36px would be equivalent to 3.6em(Read the explanation above).

I decided to share this solution that I had applied in a project with needs related to responsive text, freely increase and decrease the text size proportionally.