Responsive Font Size

Question

I tried to come up with a way to change the font size when resizing the parent element. Most likely, this is due to resizing the browser. For example, when I reduce my Chrome, the font will become smaller, and vice versa.

I was thinking about media queries, but that also didn't match what I definitely want. Media queries are great for discovering which device is being used, and that’s all, but not the way I want. I thought the answer lay in some kind of JavaScript, but if there was an answer that uses CSS, I would prefer that. I did some research, but could not find what I wanted.

Answer 1

You can use CSS3 vh , vw , vmin and vmax new values ​​for responsive font.

1vw = 1% of the width of the viewport

1vh = 1% of viewing height

1vmin = 1vw or 1vh, whichever is less

1vmax = 1vw or 1vh, whichever is greater

 h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; } 

More details: https://css-tricks.com/viewport-sized-typography/

Answer 2

You can use media queries. I use this for my test:

 @media all and (max-width:2700px) {html {font-size:50px;transition:1s;}} @media all and (max-width:2000px) {html {font-size:45px;transition:1s;}} @media all and (max-width:1600px) {html {font-size:30px;transition:1s;}} @media all and (max-width:1200px) {html {font-size:25px;transition:1s;}} @media all and (max-width:1100px) {html {font-size:22px;transition:1s;}} @media all and (max-width: 900px) {html {font-size:18px;transition:1s;}} @media all and (max-width: 700px) {html {font-size:15px;transition:1s;}} @media all and (max-width: 500px) {html {font-size:12px;transition:1s;}} @media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}} 

The selected size may not be the best, the transition is to avoid resizing the image when resizing the window.

Good luck

Answer 3

All plugins are shit. Just try using simple css for it.

Example:

 @media screen and (min-width: 1200px){ font-size:80%; } @media screen and (max-width: 768px){ font-size:90%; } @media screen and (max-width: 320px){ font-size:80%; } 

They will be flexible for each viewport. Hope this helps you.

Answer 4

The finished text plugin is really interesting for large fonts. If you are thinking about text and paragraph fonts, this may not be the best solution.

The solution for media processors is the most common approach, although there is also a method called responsive typography, where the font size does not change at predetermined steps, but gradually as wiewport changes.

Essentially, you produce font sizes as a percentage of their parent element, such as a percentage of the body width. The best description I know about technology is http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2

Good luck

Answer 5

http://fittextjs.com/ here is a good plugin that does just that