How can I resize my font depending on browser width?

@multimediocrityOct 11.2014

I would like to make my font size smaller if my browser width falls below a certain number. This is to make the font fit better on small screens. How can I do this? I know there’s a way in CSS, but I’m not sure how.

Thanks!
Multimediocrity

to post a comment

CSS

@kralcxOct 11.2014 — #Use ems. The links below should help you.

CSS Font-Size: em vs. px vs. pt vs. percent

CSS Font Sizes Using Ems, Explained

Why Ems?

@cootheadOct 11.2014 — #Hi there multimediocrity,

[indent]

here is a possible solution...

[color=navy]
 &lt;!DOCTYPE html&gt;
 &lt;html  lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 
 &lt;title&gt;CSS vw&lt;/title&gt;
 
 &lt;style media="screen"&gt;
 h1 {
 font-size:2.5vw;
 text-align:center;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;h1&gt;This text resizes according to screen width&lt;/h1&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;[/color]

[b]Further reading[/b]:-

[indent]https://dev.opera.com/articles/css-viewport-units/[/indent]

[/indent]

[i]coothead[/i]

@multimediocrityauthorOct 11.2014 — #Yeah, those are good solutions, but I don't get a whole lot of control with them. I think the approach I was looking for is this:

@media screen and (max-width: 500px) {

body {font-size: 10pt;}

}

@deathshadowOct 13.2014 — #You are correct, media queries are the answer to what you asked -- BUT:

1) PT is for print, not screen. Use % or EM's.

2) If you set on BODY, it effects EVERYTHING -- if you have to change it on body just because of the device width, it is possible there's something horribly wrong with your layout like fonts that are too blasted large in the first place.

3) you shouldn't have to say screen if you are applying your CSS correctly by having a MEDIA attribute on your LINK... since in a well written site there is no legitimate reason to EVER use the STYLE tag. [i]Which is why I think the STYLE tag should be removed from HTML entirely and the STYLE attribute should be deprecated for all but the rarest of corner-cases.[/i]

There's a reason 99% of my layouts start out with this on BODY:

font:normal 85%/150% arial,helvetica,sans-serif;

... and I've never had the need to change the default font just because of width. Shrinking things like numbered headings (usually the only legitimate place to have larger text in the first place) sure... but for flow text?

How can I resize my font depending on browser width?

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How can I resize my font depending on browser width?

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴