My 2 ways for adaptive font size (2 SCSS mixins)

Published in HTML/CSS, SCSS on

Very often, in Frontend, we need to create adaptive font-size. In my practice, I use two solutions. By default, I write CSS by SCSS pre-processor, so I wrote my SCSS common SCSS mixins library. You can see it here https://mix.csscoder.pro/ - here you can find those ways.

The first way (classic method) - font-scale

Look at a standard situation. We need to add adaptive font size for titles on some section on the page. Size must change from 24px(for mobile) to 46px(for desktop). If you are using my mixins library, you can write your code like this

// scss
.titile-news {
  @include font-scale(24, 46);
}
// result css
.titile-news {
  font-size: 24px;
}
@media only screen and (min-width: 480px) {
  .titile-news {
    font-size: calc( 3.06vw + 9.312px );
    outline: 0.0001vw; /* for Safari browser */
  }
}
@media only screen and (min-width: 1200px) {
  .titile-news {
    font-size: 46px;
  }
}

Live example you can see here

See the Pen CSSCODER MIX - Font scale CSS - Ex2 by Alexander Zidyganov (@csscoder) on CodePen. 

The second way (based on CSS variables) - font-scale-var

This way also assumes using my SCSS library, and it is base on CSS variables. Here you can set two media queries breakpoints, and those will be using for every mixin calls (you can't reassign by options in mixin). This way saves size than the first way. But for this, you must add part code to your the main file SCSS (for avoiding сode duplication).

// put this code to main SCSS file
* {
  --ssfz: calc(var(--minfz) * 1px);
}

@include mq(#{$ss-start-step-font-scale}) {
  * {
    --ssfz: calc(((var(--maxfz) - var(--minfz)) / (#{($_font-scale-var-max-width - $_font-scale-var-min-width) / 100 })) * 1vw + (var(--minfz) - ((var(--maxfz) - var(--minfz)) / (#{$_font-scale-var-max-width - $_font-scale-var-min-width})) * #{$_font-scale-var-min-width}) * 1px);
  }
}

@include mq(#{$ss-end-step-font-scale}){
  * {
    --ssfz: calc(var(--maxfz) * 1px);
  }
}


// in your main CSS file you will get
// that imitation mixin for CSS by variables
* {
  --ssfz: calc(var(--minfz) * 1px);
}

@media only screen and (min-width: 480px) {
  * {
    --ssfz: calc(((var(--maxfz) - var(--minfz)) / (7.2)) * 1vw + (var(--minfz) - ((var(--maxfz) - var(--minfz)) / (720)) * 480) * 1px);
  }
}

@media only screen and (min-width: 1200px) {
  * {
    --ssfz: calc(var(--maxfz) * 1px);
  }
}

After that, you can use the mixin

// scss
.titile-news {
  @include font-scale-var(24, 46);
}

// result css
.titile-news {
  --minfz: 24;
  --maxfz: 46;
  font-size: var(--ssfz);
  outline: 0.0001vw; /* for Safari browser */
}

Live example you can see here

See the Pen CSSCODER MIX - Font scale CSS variable - Ex1 by Alexander Zidyganov (@csscoder) on CodePen. 

I hope that will be helpful.