Adjust the font size in CSS based on a specified range of values

When the screen size is small (mobile), the font size is fixed at 14px. On really large screens, the font size is set to 18px, ensuring it never goes below 14px or above 

18px>. This is achieved using media queries.</p>

<p>However, for the in-between range, I want the font size to be dynamic, ranging between <code>14px
and 18px. To achieve this, I am currently using font-size: calc(.5vw + .85em);, which works adequately but not perfectly. I am unsure how to calculate it so that it starts at 14px and ends at 18px between a screen width of 40rem (16 * 40) and 65rem.

Any suggestions?

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(.5vw + .85em);
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}
<div class="wrap">
  <p>
    text
  </p>
</div>

I have also included an example here: https://jsfiddle.net/6ybkp7a1/6/

Example

If my screen width is 40.1rem (slightly above 40rem), the font size should be around 14.1px, slightly higher than 14px.

cssfont-size

Answer №1

Give this a shot. It will smoothly transition from 14px to 18px.

How does it function?

100vw represents our screen size, so the range will fluctuate between 40rem and 65rem in the specific area. By subtracting 40rem, we obtain a range between 0rem and 25rem. Equating 25rem to (16px * 25) = 400px. Thus, our range is now from 0 to 400px. Dividing by 100 and adding 14px, results in a range between 14px and 18px.

.wrap {
  font-size: 16px;
}

p {
  font-size: calc(14px + (100vw - 40rem)/100); /*or 14px + 1vw - 0.4rem */
}

p:before {
  content: 'Desktop: ';
  opacity: .5;
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}
<div class="wrap">
  <p>
    text
  </p>
</div>

Answer №2

To ensure consistency across different screen sizes, be sure to include a media query for min-width: 40rem. This will help bridge the gap between your existing media queries and cover any screen sizes in between.

For a practical demonstration, refer to this example on JSFiddle:

.wrap {
  font-size: 16px;
}

@media screen and (max-width: 40rem) {
  p {
    font-size: 14px;
  }
  p:before {
    content: 'Mobile: ';
    opacity: .5;
  }
}

@media screen and (min-width: 40rem) {
  p {
    font-size: calc(.5vw + .85em);
  }
  p:before {
    content: 'Desktop: ';
    opacity: .5;
  }
}

@media screen and (min-width: 65rem) {
  p {
    font-size: 18px;
  }
  p:before {
    content: 'Desktop large: ';
    opacity: .5;
  }
}
<div class="wrap">
  <p>text</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a full-screen image and align it horizontally from the center using CSS styling

When I fill a screen with an image using the following code: width:auto; height:100%; The image fills the screen vertically and almost entirely horizontally, but it gets cropped off on the right side. Is there a way to make the image float centered on th ...

css

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...

cssangulartypescriptsassionic2

How can you center a left floated div?

I am seeking to showcase a series of images in a horizontal layout on my page. Beneath each image, there are several links that need to be grouped together within a container. So far, I have tried placing them in floating divs, which align them to the lef ...

htmlcss

How can I make an element begin sticking to the page at 50px when scrolling, and then stop sticking at 2000px?

I am looking for a solution to position an image relative or absolute initially, then make it stick after some scrolling, and finally return it to its original behavior before transitioning to another section on the page. I've tried using this script ...

jquerycssscrollposition

After adding more rows, the css formatting seems to disappear

After populating flexigrid using a JavaScript method from another .js file, I noticed that the CSS is lost once new rows are inserted. Surprisingly, other sections on the page are not affected. The code snippet I am using is as follows: var newTbl = &apo ...

jquerycssflexigrid

Achieving a 100% height sidebar that remains visible on the screen at all times in Bootstrap

Looking to achieve this specific layout: I want the left col-md-3 to maintain a consistent 100% height and always be visible on the screen - it's going to be a menu. The right side should function normally with scrolling capabilities. Appreciate any ...

csstwitter-bootstrap

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

htmlcssvertical-alignment

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

javascriptjqueryhtmlcssaccordion

Is there a way to include captions within a bootstrap carousel-item without compromising the responsiveness and alignment of the indicators and controls?

<div id="myUniqueCarousel" className="carousel slide" data-bs-ride="true"> <div className="unique-carousel-indicators"> <button type="button" data-bs-target="#myUniqueCarousel" data-bs-slide-to="0" className="active" aria-curre ...

htmlcssbootstrap-5

I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this? https://i.sstatic.net/kioAZ.png Here's my HTML code: <mat-form-field appearance= ...

javascripthtmlcssangulartypescript

Incorporating CSS into an HTML document with Jersey/Grizzly

This is the structure of my project: src/main/java -- main.java src/main/resources -- webapp -- -- css -- -- js -- -- images -- -- pages -- -- -- home.html Currently, my Maven project utilizes Jersey and Grizzly. I am able to call my REST services and lo ...

javahtmlcssmavengrizzly

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

javascriptcssnode.jsreactjsbootstrap-5

Save this text in HTML format to the clipboard without including any styling

When using this code to copy a htmlLink to the clipboard: htmlLink = "<a href='#'>link</a>"; var copyDiv = document.createElement('div'); copyDiv.contentEditable = true; document.body.appendChild(copyDiv); ...

javascripthtmljquerycssclipboard

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

javascripthtmlcsssvgpng

What could be causing the black spaces to appear after my text in HTML?

I recently tried to implement text on an image following a tutorial I found at https://css-tricks.com/text-blocks-over-image/. Here is the code snippet I used: .image{ position: relative; } h2{ position:absolute; top: 200px; left: 200px; wi ...

jqueryhtmlcssdebugging

Carousel with Bootstrap: Heading positioned over the content

My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having Trouble with Cascading Style Sheets (CSS) for Docked Menu

Click here for the code snippet It seems like everything should be functioning correctly... right? The CSS provided in the sample is pretty straightforward: command,a {float:left;border:1px solid blue;} And the HTML code is just as simple: <menu> ...

htmlcss

Mastering the Art of Absolute Positioning in HTML Tables' Header Row

I have a table with 80 rows. How can I make the first row fixed? I attempted to add position: fixed; to the but unfortunately, it didn't work. Is there a way to achieve this using CSS or jQuery? <table> <thead> <tr> <td sty ...

jquerycsshtml

CSS margin dispute

I'm facing an issue with two CSS classes - container and top_menu. The top_menu should not have a margin on top when used within the container class, but it somehow does. Removing the container div resolves this. How can I resolve this problem? Below ...

htmlcssmargin

The beginning of my HTML input is not at the top of the page

I have a query regarding the custom input line I created recently. When I adjust the height of the input, instead of aligning with the top, the text appears vertically centered. Moreover, the text does not wrap to a new line once it reaches the outermost ...

htmlcss