Capsize in SCSS
Capsize makes the sizing and layout of text as predictable as every other element on the screen.
Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.
$ npm i capsize-scss
Add the following options to "sass-loader" in your webpack config
// webpack.common.jsconst fontImporter utils =loader: "sass-loader"options:sassOptions:importer:functions: ...utils
Each font is given it's own mixin. Modifiers like "weight" and "italic"ness are added to the end of the mixin name (as shown below).
Each mixin takes all the options that Capsize takes
/* If the weight of the font is 400 you dont need to specify it in the url or the mixin */;;;;pp.italicp.bold.italic