CODEWITHSUNDEEP
htmlcss
Skyy2010
Skyy2010

Reputation: 855

css responsive fluid html font size based on rem

I want to implement the example from css-tricks based on rems. This is what I got so far. However, the scaling does not work as intended, and the font size increases only tiny amounts. What is the mistake?

html {
  font-size: 1rem;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(1rem + 2 * ((100vw - 20rem) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 3rem;
  }
}

I assume that 2 * ((100vw - 20rem) / 680) returns a px value. If that's true. How can I change it to return rem instead?

Edited to add some clarifications: I want to use rem instead of px because this allows the user to overwrite the default font size in the browser.

The term 2 * ((100vw - 20rem) / 680) is between 0 and 2 (1 rem equals 16px on normal font size). This is what I want to achieve. I want to have font-size: 1rem + [0, 2]rem between 320 and 1000px viewport width. A linearly increasing rem function based on the viewport width.

Here is a link to a sandbox example.

Edit 2: I think what I want to achieve is not possible. If the user increases the default font size by 50%, I want the scaling factor also increase by 50%: font-size: 1rem + [0, 2 * 1.5]rem.

The current problem is that the part 2 * ((100vw - 20rem) / 680)) needs to be rem based. This is not possible because there is no way in CSS to strip the unit. If I could strip the unit, I could do this: 2rem * strip-unit((100vw - 20rem) / 680))

Upvotes: 1

Views: 1460

Answers (2)

Jim D
Jim D

Reputation: 179

Here is a solution for fluid fonts I got from Creating a Fluid Type Scale with CSS Clamp

After some tweaking I ended up with the following Sass code to generate the clamp function.

    /*
   From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
   Generates the css clamp function.  
   Focused on font-size, but may be used for margins and padding

   Usage:  
      clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
      font-size: clamped(26px, 36px, 600px, 1200px);    
      font-size: clamped(26px, 36px);      //using width default values
Output:
    font-size: clamp(1.63rem, 1.11vw + 1.28rem, 2.25rem);

*/

@use "sass:math";
@use "sass:map";

// Default min-mix browser width values for clamped function
$default-min-bp: 500px;           
$default-max-bp: 1400px;           

// Convert pixels to rems.
@function to-rems($px) {
  $rems: math.div($px, 16px) * 1rem;
  @return $rems;
}


//round a to number of decimal places.
@function rnd($number, $places: 0) {
  $n: 1;
  @if $places > 0 {
    @for $i from 1 through $places {
      $n: $n * 10;
    }
  }
  @return math.div(math.round($number * $n), $n);
}

// Generate css for clamp
@function clamped($min-px, $max-px, $min-bp: $default-min-bp, $max-bp: $default-max-bp) {
  $slope: math.div($max-px - $min-px, $max-bp - $min-bp);
  $slope-vw: rnd($slope * 100, 2);
  $intercept-rems: rnd(to-rems($min-px - $slope * $min-bp), 2);
  $min-rems: rnd(to-rems($min-px), 2);
  $max-rems: rnd(to-rems($max-px), 2);
  @return clamp(#{$min-rems}, #{$slope-vw}vw + #{$intercept-rems}, #{$max-rems});
}

Upvotes: 0

user6709166
user6709166

Reputation:

If you want a responsive font size then you can use View Width too, no need to use calc or rem for that.

Just change this so you can try it out:

HTML {
  font-size: 5vw;
}

View width goes from 0 to 100 so you know how much room you have to work with.

edit: I personally haven't found out how to scale on both axis yet but just the X-axis works good enough in most cases.

Upvotes: 1

Related Questions