# Font Size defined by DIV width

**URL:** <https://forum.kirupa.com/t/font-size-defined-by-div-width/331431>\
**Category:** web dev\
**Created:** [July 31, 2013, 2:16am UTC](https://forum.kirupa.com/t/font-size-defined-by-div-width/331431 "2013-07-31T02:16:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tailz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tailz/32/7262_2.png) [@tailz](https://forum.kirupa.com/u/tailz)\
**Post date:** [July 31, 2013, 2:16am UTC](https://forum.kirupa.com/t/font-size-defined-by-div-width/331431/1 "2013-07-31T02:16:43Z")

</div>

Hello folks,  
I have a little problem I need a helping hand with…

I have a DIV element that contains a line of text, the DIV element can stretch horizontally to fill the space it is within.

I would like to change the font size of the text inside the DIV element, on the basis of the width of the DIV element.

eg: If the DIV element is 300 to 400 pixels wide, the font size will be 10px. If the DIV element is 401 to 500 pixels wide, the font size will change to 12px. etc…

How would I go about this?

I’ve been googling the subject, and the info I find comes back with the @media attribute, but that refers to the device or screen, not the size of an individual DIV element. So I am a little confused, as I’m not really a web developer, just a Graphic Designer who knows a little HTML/CSS.

So any help, would be predicated.