Custom CSS and Header sizing

Question

I love the ability to create custom CSS. Everything is there that I want except I don't seem to see a way to control font size of the various headers. In the final exported CSS most headers are defined by font size.

Do I need to tweak Header font sizes in the exported CSS or am I missing something really silly in the theme Style Generator? For example, I can tweak various headers in terms of colors very easily, but not size. (Or I'm trying to do this too early in the morning when my brain is not fully operational!)

Brett Terpstra · Answer

I intentionally didn't include 6 different font size selectors, as the idea was to have people use the rhythm selector to set the font size based off of a base size and a proportional ratio.

This basically sets all the header sizes at once, based on whatever ratio you choose.

You can always open the "Custom CSS" tab in the right-hand controls and include your own CSS selectors, e.g. h1 { font-size: 3em; }.

The goal was simplicity, but it's flexible enough to create whatever you choose. If you feel strongly that there should be individual font size controls for each header, I'm open to adding a section for that, maybe something that expands below the rhythm selector and prepopulates based on the rhythm but allows overrides.

Mathew · Answer

Oh, wow! I did not realize what the Scale Ratio option did. I tested it out and it does a wonderful job!

It might be nice to do the added step you suggest: individual font size controls that expand below the rhythm selector. If nothing else, it makes explicit what the H1 through H6 actually are. But, that said, Scale Ratio is a wonderful quick option!

Thank you very much. Yours sincerely,

Grasshopper

Custom CSS and Header sizing

2 Answers