Anyone know why the base font size is specified with a calculation in the head of theme.liquid?

[galenking]

Is there anyone on the Shopify Dawn team who was part of the original typography design for Dawn? Is it just me or is the CSS unusually complex for the typography?

For example, why is the base font size specified with a calculation in the head of theme.liquid? https://github.com/Shopify/dawn/blame/afa073abd018f78e1b9883dd1fba1b5364b1e28a/layout/theme.liquid#L229

Is that because it needed to pull from the theme settings? Surely there’s a more elegant way to do this.

[haroldao]

I don't get your question... I don't see something wrong with Dawn's codebase... 👀

[tomatic]

@galenking Since the browser's base font size is typically 16, multiplying that by 0.625 gives you a base font size of 10, which is a nice round number to base all other font sizes off of using rems. I assume that's why they did this.

[BrayanRinconMendoza]

If I'm not wrong, Dawn has this relationship for the base font-size, 1rem = 10px.

So, 1px = 0.1rem.

Hope this helps.

[PaulNewton]

The deep "why" is not actually formally documented as 62.5% for the html font-size rule is from the inital commit going through the blame history.

The newcalculation is explained in the blame's commit's pull request #688 (Add typography heading and body font size scale setting #688)

The setting value is used as a multiplier in CSS to a scale up base font-size

Not a perfect explanation since it's not clear WHAT&WHY base font-size (aka 62.5%) explicitly means or why it was used in the first place but others have touched on it here.

Yes, typographic and other design guideline/opinions should be publicly declared and documented outside of an issue/pull-request and private figma files
which I doubt is gonna happen in a source-available only repo with a readme as it's only "documentation"

A baseline for comparison of what unusually complex is in dawn or shopify themes, css color rules were and are now generated from is colors settings drops and component rgb properties and filters :sick: ; see #83 & #97
#83 Update color variables for rgb. Remove unused color variables

#97 Update color CSS variables in Liquid to only use RGB

📜🧙‍♂️and I could have sworn there was an entire color snippet doing a ton of brute work with liquid at some point but maybe that's another theme

[PaulNewton]

Just in case part of the question is about the source location of that rule in theme.liquid:
What would be the reason to move global properties out of theme.liquid.
Where else should global/base properties be defined that can then be overridden in the cascade of other files & structures.

Should typography, colors, etc be their own files (asset or snippet)?

Especially now with the inline_asset filter finally being a reality https://shopify.dev/docs/api/liquid/filters/inline_asset_content
It's easier to modularize things without having to build a custom build system but there's still a step of extracting/refactoring all the pieces out of theme liquid etc.