One Simple Trick for Better Web Typography (Fluid Scale)

[@moneybernd2003]

oh this is wonderful! thanks for sharing this

[@sanojen]

Great video! Will definitely use this in the future. But one thought - it would be nice if there was a preset or similar that makes it easier to avoid entering the variable text every time?

[@yourthemeco]

Yep, the next steps if you would like to go with this approach would be to create a Component for each text size or a Preset.

[@bill-hodgson]

I really think this video should explain how the Font sizes in the Theme Options works, and then explain why use custom CSS and ignore theme options all together? It tends to suggest that the Theme Options approach is redundant, which will confuse the enthusiastic non-coders. We need to understand both approaches to make sense of this video IMO. Bill.

[@yourthemeco]

For many, the native typography settings in Theme Options will be just fine. We give a lot of optionality out of the box for things like root font sizes, heading settings, native stepped and scaling, etc without having to get into custom CSS. This is covered in detail in the docs: theme.co/docs/typography. The purpose of this tutorial is to show an implementation for those who want a 100% fluid approach. One isn’t better or worse, they’re simply different.

[@KenWilsonHQ]

@@yourthemeco What would be an easy way to combine the CSS and template styles? It would be better to select H1, H2, etc and have the font automatically be the default color, font-family and size (with the css size name already there). If we then want to customise based on the content, we can dive into the settings.

[@yourthemeco]

Based on what you said, it sounds like you want to use Components or Presets along with this approach. I'm not 100% sure, but let us know if this info helps.

[@DiegoLapetina]

So much easier

[@LasstUnsSpielen]

I love you

[@yourthemeco]

Right back atcha!