Skip to content

Type scaling implementation doesn’t follow modular scale logic #4042

@Typogram

Description

@Typogram

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions