Question about resizing fonts

[Martin Roberts]

I've been trying out Chisai - very well designed and easy to use! I've been trying to customize main.css a bit and have a question about font sizes - I'm not v good with css and am not familiar with the sizing protocol that you define (that block of --var and calc variables under root:). I'd like to reduce the overall font sizes to around 75% of their current defaults, and was wondering what would be the best way to do that.

[Thomasorus]

No problem, it can be confusing when you are not familiar with CSS.

With Chisai I wanted a way to have a programmatic and automatic way of handling fonts, margins and paddings for responsive, instead of relying on media queries. To do this, I created variables which size change depending on the width of the window.

First off, you have to know that for most browsers, the font size when not set in CSS is 16pixels. So when you start using rem units, 1rem means 16px, 2rems means 32pixels, etc... And of course, you can re-define this size. That's what is done in the :root block with : font-size: calc(1rem + 0.5vw); (note that we use vw which means viewport width).

So if you want to change the global font size and reduce them to around 75% of their current defaults, you need to change the 0.5vw in font-size: calc(1rem + 0.5vw); to 0.5 minus a quarter of 0.5, which is 0.375: `font-size: calc(1rem + 0.375vw);

All the variables from --s-5 to --s5 will then reflect this without you having to change anything, as they are using rem unites.

I hope it answers your question.