[SOLVED] Is there such a thing as min-font-size and max-font-size?

Is there such a thing as min-font-size and max-font-size?

I'm trying to make a font in a div responsive to the browser window. So far, it has worked perfectly, but the parent div has a max-width of 525px. Resizing the browser further will not make the font stop resizing. This has made me wonder if there is such a thing as min-font-size or max-font-size, and if such a thing does not exist, if there is a way to achieve something similar.

I thought that using percentages at font-size would work, but the bit of text won't scale accordingly to the parent div. Here's what I have:

The CSS for the parent div:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

The CSS for the piece of text in question:

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

Solution

No, there is no CSS property for minimum or maximum font size. Browsers often have a setting for minimum font size, but that’s under the control of the user, not an author.

You can use @media queries to make some CSS settings depending on things like screen or window width. In such settings, you can e.g. set the font size to a specific small value if the window is very narrow.