is it possible to have text resize as the browser gets smaller, css

Question

is there a way to have text resize as the browser gets smaller for liquid based design in percentages.

images divs etc, all rescale but text percentage scaling its not possible! setting it in percentages just changes the unified em setting for that text - in every browser width identicaly.

A while ago I found a similar question here (http://stackoverflow.com/questions/5358183) with a working example. — Nathan Ryan, May 06 '11 at 12:01
Beware, there seems to be no `min-font-size` equivalent ([at least yet](http://stackoverflow.com/a/25552441/812102)). — Skippy le Grand Gourou, May 17 '15 at 22:04
check this ans may be it help you : https://stackoverflow.com/a/61892360/6293856 — Bhavik Hirani, May 19 '20 at 13:35

score 7 · Answer 1 · edited Oct 13 '12 at 17:24

7

Other than using media queries at specific intervals, I'm not really sure.

The way I would do it:

.content {
    font-size:16px;
}

@media all and (max-width: 800px) {
    .content {font-size:14px;}
}

@media all and (max-width: 600px) {
    .content {font-size:12px;}
}

@media all and (max-width: 400px) {
    .content {font-size:10px;}
}

No javascript, pure CSS.

edited Oct 13 '12 at 17:24

dvlden

2,402
8
38
61

answered May 06 '11 at 11:58

tinyBIGideas

194
4
13

If you've replaced what's inside the media queries with your own code then it should work. What happens, nothing? – tinyBIGideas May 06 '11 at 18:22
thanks, However I want all the em width and height of the divs etc, to resize as well! – webestdesigns May 15 '11 at 11:11
works with ems! but have to write @media screen and (min-width: 85em) and (max-width: 100em) { body { font-size:.8em;} } @media screen and (min-width: 100em) and (max-width: 110em) { body { font-size:.9em;} } – webestdesigns Jun 18 '11 at 17:57

Alex Mund · Answer 2 · 2015-06-25T14:29:00.293

2

I believe this is exactly what you were looking for:

http://css-tricks.com/viewport-sized-typography/

edited Jun 25 '15 at 14:29

answered May 20 '13 at 17:25

Alex Mund

431
3
9

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

Yes, it is possible to resize text by handling the onResize event with JavaScript code. There are quite a few issues with onResize, though, including debouncing, which can get complicated.

I know this isn't part of your question, but I wonder if it's a good idea to resize text. After all, the user has already told the browser s/he's happy with the text at its current size. Is it really all that friendly to override the user's manifest preference?

edited May 23 '17 at 12:29

Community

1
1

answered May 06 '11 at 11:59

Pete Wilson

8,610
6
39
51

just so that when the browser is very small it should be possible to retain the basic layout have a look [link](http://www.davidrothassociates.co.uk) – webestdesigns May 06 '11 at 12:04

is it possible to have text resize as the browser gets smaller, css

3 Answers3