This CSS Library leverages CSS Container Queries to dynamically alter font-size and line-height values in response to resizing of elements. There is no JavaScript involved, only liberal use of CSS Container Queries, Custom Properties and the calc function.
Credit for the math belongs to Chris Pearson, creator of the Golden Ratio Typography Calculator.
Just include fluid-typography.css in the <head> of your html document, and add the fluid attribute to the DOM elements you would like to exhibit the fluid behavior. See example.html for an example implementation.
For the algorithm to work in CSS, the following values are necessary:
- min and max viewport width (
--vp-width_minand--vp-width_max) - min and max font-size (
--font-size_minand--font-size_max) - min and max line-height (
--line-height_minand--line-height_max) - desired CPL (Characters Per Line) (
--cpl) - Character Width (
---char-width)
See fluid-typography.css for the default values.
NOTE: The default Character Width is
2.27. This value was chosen because it is the average character width of 135+ fonts. This value should work well in most cases, but tweaking it can sometimes provide better results. Changes to this value will affect the wayline-heightis calculated, in concert with--cpl.
- Automatic calculation of
h1 - h6font-sizeandline-heightvalues