Responsive font size

Responsive font-size

/* please refer to https://developer.mozilla.org/fr/docs/Web/CSS/clamp() */
font-size: clamp(40px, 10vw, 70px); /* clamp(MIN, VAL, MAX) */

Responsive text css

/* Uses vh and vm with calc */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

@media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

Responsive font size

div {
  font-size: clamp(16px, 3vw, 32px);
}

Source: stackoverflow.com

How to make fonts respnsive

h1 {
  font-size: clamp(16px, 5vw, 34px);
}

Responsive text

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Source: css-tricks.com

Similar codes

0 vote241 views1 answer
Css every other element than self
CSS
24 votes246 views3 answers
Link font size html
CSS
20 votes246 views3 answers
Center align div vertically and horizontally css
CSS
2 votes233 views1 answer
How to distribute vertically the items in css
CSS
18 votes316 views6 answers
Install bootstrap angular 9
CSS
1 vote229 views1 answer
Css break wrap header
CSS
76 votes264 views6 answers
Display flex css
CSS
8 votes228 views5 answers
Css multicolor background
CSS
4 votes282 views1 answer
Animation-direction property
CSS
0 vote223 views2 answers
Tailwind css form
CSS