Fluid-font

Let's say it, Responsive font-size(RFS) is amazing. But one downside is that the maximum and the minimum viewport value is the same for all your fonts. Why if you could have a better control on your fluid font-size, with an easy-to-use mixin ? There you go.

Special thanks to Geoff Graham for the mixin concept and to Mike Riethmuller for the calculation logic.

How to use it

Exemple with breakpoint name ($s-breakpoints required)


h2 {
  @include fluid-font(sm, xl, 24px, 48px);
}

Exemple with pixels


h2 {
  @include fluid-font(640px, 1440px, 24px, 48px);
}

How it works

For the above example, the H2 font-size will be 24px for a 0 to 640px viewport. From 640px to 1440px, it will be fluid from 24px to 48px, based on the screen width. Then, for 1440px and up, the font-size will stay at 48px.

Mixin arguments

The mixin needs 4 arguments when you use it with include.

@include fluid-font($min-bp, $max-bp, $min-font-size, $max-font-size)

$min-bp

The minimum breakpoint that your font-size will become "fluid".
The value can be a string like "sm" or "md" from your $s-breakpoints in config.scss or a pixel value like 600px or 1200px.

$max-bp

The maximum breakpoint that your font will stay at the biggest value.
The value can be a string like "xl" or "xxl" from your $s-breakpoints in config.scss or a pixel value like 1200px or 1400px.

$min-font-size

The smallest size for your font. This size will be used on screens smaller to your $min-bp value.

$max-font-size

The biggest size for your font. This size will be used on screens bigger or equal to your $max-bp value.