I been trying to think of a way to change the font size as the parent element sizes changes. Most likely this would be due by the browser size being changed. Such as when I make my Chrome smaller the font will bee smaller as well as well as vice versa.

I was thinking media queries, but it also wasn't suiting what I exactly want. Media queries great for detecting what device being used and all, but not how I want it to be. I was thinking the answer lies in some kind of JavaScript, but if there was an answer that uses CSS I would prefer that. I've done some research, but couldn't find exactly what I wanted.

I been trying to think of a way to change the font size as the parent element sizes changes. Most likely this would be due by the browser size being changed. Such as when I make my Chrome smaller the font will bee smaller as well as well as vice versa.

I was thinking media queries, but it also wasn't suiting what I exactly want. Media queries great for detecting what device being used and all, but not how I want it to be. I was thinking the answer lies in some kind of JavaScript, but if there was an answer that uses CSS I would prefer that. I've done some research, but couldn't find exactly what I wanted.

• javascript
• html
• css
• responsive-design

5 Answers 5

You can use mediaqueries. 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;}}

Size chosen might not be the best, the transition is to avoid jumping size to size while resizing window.

Have fun !

All plugins are crap. 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 on each and every viewport. Hope this helps you.

The fit text plugin is really interesting for large fonts. If you are thinking of text and paragraph fonts, it's maybe not the best solution though.

The media query solution is the most mon approach, though there is also a technique called responsive typography, where the font sizes change not in predetermined steps, but progressively as the wiewport changes.

Essentially you size the fonts as a percentage of their parent element, for example a percentage of the body width. The best description I know of the technique is http://wwwmagazine./tutorials/build-responsive-site-week-typography-and-grids-part-2

Good luck!

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

1vw = 1% of viewport width

1vh = 1% of viewport height

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

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

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

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

http://fittextjs./ here is a nice plugin that does exactly that