Fluid-font
This mixin - very useful - allows to determine a minimum and maximum size for a font. Between these two dimensions, the font will be resized automatically according to the width of the viewport.
Special thanks to Geoff Graham for the mixin concept and to Mike Riethmuller for the calculation logic.
How to use it
@use "sailorcss" as s;
// example with breakpoint prefixes (values in $s-breakpoints required)
h2 {
@include s.fluid-font(sm, xl, 24px, 48px);
}
// example with pixels viewport values
h3 {
@include s.fluid-font(640px, 1440px, 20px, 40px);
}
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
@include s.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.