CreatiVista

Font size calculator

Add a viewport width to show its corresponding font size values, and

add a scale step to extend the scale up or down.

px
px
px
px
px
px
:root {
--f-0-min: 16.00;
--f-0-max: 20.00;
--f-1-min: 19.20;
--f-1-max: 24.00;
--f-2-min: 23.04;
--f-2-max: 28.80;
--f-3-min: 27.65;
--f-3-max: 34.56;
--f-4-min: 33.18;
--f-4-max: 41.47;
--f-5-min: 26.54;
--f-5-max: 49.77;
--f-6-min: 47.78;
--f-6-max: 59.72;
--fluid-min-width: 320;
--fluid-max-width: 1240;
--fluid-screen: 100vw;

      --size-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
      --size-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
      --size-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
      --size-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
      --size-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
      --size-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
      --size-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp));
      --size--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));
      --size--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));
    
}