How to correct CSS font-size calculation to limit font size

Question

I am working on a class that I am applying to my header bar (header-top-container) in CSS, what I want to do is depending on the screen size have the header's h1 text size be dynamically adjusted with a max size of 28px. When I test it out, the text size keeps getting bigger as I make the window bigger... it never stops.


.header-top-container {
    background: rgb(242,246,248);
    background: -moz-linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    background: linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f6f8",endColorstr="#e0eff9",GradientType=1);
    padding: 10px;
    text-align: center;
    color:#05336b;
}

.header-top-container h1{
    margin-top:0;
    margin-bottom: 0;
    color: #05336b;
    line-height: .5;
    font-weight: 600;
    font-variant: small-caps;
    font-size: calc(14px + (28 - 14) * ((100vw - 300px)/(1600 - 300))); 

} ```

``` HTML
<div class="header-top-container">

        <div class="w3-mobile w3-content">
            <h1> 
                <img src="<?PHP echo SYS_URL;?>resources/logo/bc_ote_scfe_PMS288.png"  alt="Baruch College Office of Testing and Evaluation: Student Course and Facutly Evaluation Logo" class="header-main-logo" /> 
                <br>
                <span id="header-Logo_PageName_lg">5t3<?PHP echo $page_title;?> </span> 

            </h1>
        </div>

</div>

The expected output is the font does not get bigger than 28px

Why not just use a couple [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) and pick just a few font sizes for the header to cover phone, tablet, etc, and set 28px as the font size at your largest breakpoint? — benvc, Jul 02 '19 at 18:27
Yup, that's what I'd do ^^. Rather than calc(), I'd use vw measurements but... figure out how wide the page is when the font is "too big" for your aesthetic (and too small, for that matter), and then pop in media queries to force the font to that size. Some folks call it [CSS locks](https://fvsch.com/css-locks/). — Kerri, Jul 02 '19 at 18:43
I want it to be fully fluid and dynamic, while the user changes the size of their window, not have it jump drastically .. as discussed in https://css-tricks.com/books/volume-i/scale-typography-screen-size/ (about half way down the page) — psycoperl, Jul 02 '19 at 18:51

JRoss · Accepted Answer · 2019-07-02T19:49:30.730

To create responsive typography with a min and max you need to use a combination of calculations and media queries. Below is an example with a min font size of 12px at 600px down and a max of 20px at 1000px and up.

:root {
  font-size: 12px;
}
@media screen and (min-width: 600px) {
  :root {
    font-size: calc(  12px + (20 - 12) *  ( (100vw - 600px) / (1000 - 600) ) );
  }
}
@media screen and (min-width: 1000px) {
  :root {
    font-size: 20px;
  }
}

Here is a pen I created a couple years ago for some more detail in responsive text (also uses typescales): https://codepen.io/WebNesting/pen/gwyvYg

So with your numbers, it would be:

.header-top-container h1 {
    font-size: 14px;
}
@media screen and (min-width: 300px) {
  .header-top-container h1 {
    font-size: calc(14px + (28 - 14) *  ((100vw - 300px) / (1600 - 300)));
  }
}
/* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */
@media screen and (min-width: 1600px) {
  .header-top-container h1 {
    font-size: 28px;
  }
}

How to correct CSS font-size calculation to limit font size

1 Answers1