use-fluid-font

Sets the font properties (font-size and line-height) scaling uniformly within the specified limits depending on the screen width. Shorthand for both fluid-prop('font-size') and fluid-prop('line-height').

It's recommended to use this mixin as high order mixin to set project defaults and reduce the boilerplate code.

Arguments

Name	Type	Default	Description
$start *	`list`	—	The list containing start values of screen width and font properties.
$end *	`list`	—	The list containing end values of screen width and font properties.

Font properties are supplied as slash-separated string of font-size and line-height values, just as in the native font property: 14px/1.6. You can also set only font-size (14px) or only line-height (/1.6) value.

Example

@use 'more-sass' as more;

.element {
    @include more.use-fluid-font((320px, '14px/1.5'), (1280px, '20px/1.4'));
}

.element {
    font-size: 14px;
    line-height: 21px;
}

@media (min-width: 320px) {
    .element {
        font-size: calc(14px + 6 * (100vw - 320px) / 960);
        line-height: calc(21px + 7 * (100vw - 320px) / 960);
    }
}

@media (min-width: 1280px) {
    .element {
        font-size: 20px;
        line-height: 28px;
    }
}

Example as high order mixin

// setup.scss
@use 'more-sass' as more;

@mixin fluid-font($min, $max) {
  @include more.use-fluid-font((320px, $min), (1280px, $max));
}

// Other files
.element {
    @include fluid-font('14px/1.5', '20px/1.4');
}

.element {
    font-size: 14px;
    line-height: 21px;
}

@media (min-width: 320px) {
    .element {
        font-size: calc(14px + 6 * (100vw - 320px) / 960);
        line-height: calc(21px + 7 * (100vw - 320px) / 960);
    }
}

@media (min-width: 1280px) {
    .element {
        font-size: 20px;
        line-height: 28px;
    }
}