-
-
Notifications
You must be signed in to change notification settings - Fork 375
Description
Current Behavior
The current type scaling system multiplies a universal --text-scaling factor across all text levels, resulting in uniform scaling rather than a progressive modular scale relationship. This limits typographic hierarchy adjustments when the scale changes.
Relevant variables:
--base-font-size: inherit;
--text-xs: calc(0.75rem * var(--text-scaling));
--text-sm: calc(0.875rem * var(--text-scaling));
--text-base: calc(1rem * var(--text-scaling));
--text-lg: calc(1.125rem * var(--text-scaling));
--text-2xl: calc(1.5rem * var(--text-scaling));
--text-3xl: calc(1.875rem * var(--text-scaling));
Because all text levels are simply multiplied by the same --text-scaling value, increasing or decreasing the scale does not increase the difference between text levels.
Expected Behavior
The type system should anchor to --base-font-size and apply the --text-scaling variable exponentially, following a modular scale pattern. Each level should be a multiple or fraction of the base size.
Proposed structure:
--text-base: var(--base-font-size);
--text-lg: calc(var(--base-font-size) * var(--text-scaling));
--text-xl: calc(var(--text-lg) * var(--text-scaling));
--text-2xl: calc(var(--text-xl) * var(--text-scaling));
--text-sm: calc(var(--base-font-size) / var(--text-scaling));
--text-xs: calc(var(--text-sm) / var(--text-scaling));
This way:
- The base font size stays constant.
- Increasing the type scale makes heading levels proportionally larger while small text smaller.
- The hierarchy between levels reflects a true exponential scale rather than a flat proportional scale.
Reference: https://www.modularscale.com/
Suggested improvement
Refactor the sizing logic to build each text level relative to --base-font-size using exponential calculations involving --text-scaling, instead of directly multiplying every level by the same factor.
Steps To Reproduce
No response
Link to Reproduction / Stackblitz
No response
Environment Information
"@skeletonlabs/skeleton": "^4.1.0",
"@skeletonlabs/skeleton-svelte": "^4.1.0",
"@skeletonlabs/tw-plugin": "^0.4.1",
More Information
No response