Font fluid

Dynamic font size relative to viewport width.

Preview

Module & Import

js

import { fontFluid } from 'gadjet/dist/module/style/font-fluid.js';

Function signature

fontFluid({
    vwMin: number = 300,
    vwMax: number = 1200,
    fontSizeMin: number = 16,
    fontSizeMax: number = 18
}) => string;

param { vwMin: number = 300 }

param { vwMax: number = 1200 }

param { fontSizeMin: number = 16 }

param { fontSizeMax: number = 18 }

return

Usage

js

import { addStyle, fontFluid } from 'gadjet';

addStyle`
html {
    ${fontFluid({
        vwMin: 300,
        vwMax: 1200,
        fontSizeMin: 16,
        fontSizeMax: 18
    })}
}`;