keep font-size in proportion with its containers size
npm install flowtype
then in your app:
var flowtype =
setup flowtype on
el taking an optional
options object. Possible settings are:
line-heightrelative to the
font-size. defaults to
In the above example when the document is
800px or wider flowtype will set the font size to
22px. When the document is
300px or less it will be set the font size to
14px. And when the document is at any width between
800px it will set the font size to match proportionally. e.g. if the document was
500px wide thats 40% of the distance from
800px so the font size will be set to 40% of the distance from
22px which is
Note: flowtype sets font size in pixels on the
el you passed in. So you need to ensure that any children inside
el have their font set in
ems. Unless you want their font size to stay fixed.
make and navigate your browser to it.
This is based on flowtype.js by simple focus.