Fluid Template

In CSS there is the so-called "Fluid Typography" technique, where the font size is calculated depending on the actual screen size. This technique can also be used in the APL world.

The formula we use for this is:

[minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))

The formula looks quite fancy, but in the end it is nothing else but: "I want the font size to go between 22px on a 320px screen to 40px on a 1000px screen."

You can also use this formula for other properties like line-height or padding.

Learn more about this technique