fluidtype

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.

Usage

Just include fluidtype.css in the <head> of your html document, and add the fluidfs (for font-size scaling only), fluidlh (for line-height scaling only) or fluidtype (for font-size AND line-height scaling) 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_minWidth and --vp_maxWidth)
min and max font-size (--fontSize_min and --fontSize_max)
min and max line-height (---lineHeight_min and ---lineHeight_max)
desired CPL (Characters Per Line) (--cpl)
Character Width (---char_width)

See fluidtype.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 way line-height is calculated, in concert with --cpl.

Coming Soon

Automatic calculation of h1 - h6, font-size and line-height values based on scale ratio.
Support for em units to allow manual scaling.

License

gbdrummer/fluidtype

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages