Using calc() in your CSS

How calc() works is a great article that explores some of the benefits of using calc() in your CSS. The author mentions that you can mix relative units that can give us a width of 100% of the screen less 100px  (ie=  width: calc (100% – 100px); which is super cool). She also mentions that the calc value is actually the expression of the calc equation and not the resultant value (SWEET), and that calc functions can be nested for further awesomeness!

I really love that the following is a thing:

html {  
    font-size: calc(100vw / 30);
}

This in effect scales the font to 1/30th of the viewport width, which makes text pretty much keep the line breaks and spacing you want regardless of the size of the viewport. I LOVE THIS.

Original article by Ire Aderinokun:
https://bitsofco.de/how-calc-works/