making an h tag font size shrink with browser

[mikeman]

Heya there, on http://bit.ly/I9imVs

it is a responsive theme and the h1 text/site-logo on top remains a large h1 tag when the width is shrunk.

when the browser is very small, like on a cell phone, id like to have the title shrink down and remain horizontal, and not have the text fall beneath each other.

whats the most effective way to do this, and im really not experienced with media queries so any advice with some kind of example would be appreciated as well.

Thank you

[Vermaas]

For this example media queries aren’t required. You may use this:

body {

font-size: 100%; /* Makes the font go to 16 pixels */

}



h1 {

font: 1.125em arial; /* 18px :  16px = 1.2em*/

}

Now the font will resize and this resizing will be done based on the width of the browser. No media queries, no nasty tricks. Just standard CSS that works on every browser.

The golden formula is:
target : standard = font-size in em

[strauss884]

Vermaas,

Can you help me with this. I’m trying to what you suggested above and it doesn’t seem to be working for me.

[Paulie_D]

@strauss884

Do you have link or, if not, put your HTML/CSS in Codepen and we can look further.

[Chris Coyier]

Make sure to also check out:

http://fittextjs.com/

and

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

[JohnMotylJr]

@strauss884 : Like @chriscoyier pointed out, fittext.js is simply amazing. I have used it quite a few times. I suggest looking at Chris’s forked copy though. Take advantage of the parameters with fittextjs because it will really control the size.

[strauss884]

gsld.net/civic2/civic2.html

I want the caption text to shrink so it looks more appropriate in relation to size of photo on smaller devices and window sizes.

[Author]

Posts