Skip to content

Fluid typography: custom values should be set as maximum font size #45504

@ramonjd

Description

@ramonjd

Parent issue:

What problem does this address?

When converting custom font sizes to fluid values, the fluid typography functions calculate the minimum and maximum font sizes either size of the given custom font size.

Depending on the viewport width, the resulting fluid value may have a maximum font size value larger than the original custom value.

This may contradict user expectations.

Screen Shot 2022-11-03 at 1 21 30 pm

Screen Shot 2022-11-03 at 1 21 43 pm

What is your proposed solution?

In future, all custom values should act as the maximum value in a clamp() function.

For example, if 8px is the custom value provided, it would be the maximum as would 1000px.

As for the minimum size, the feature already calculates using a default factor of 0.75. In the case, we should trust that users will know themselves what’s too small for their site and what isn’t.

❗ Open questions

  1. Currently, 1) font values under “styles’ and 2) font size presets without individual min and max sizes, will use the single value as the mid-point, much like we currently do with custom values. Should they also be converted to behave as the upper bound regardless of whether they are greater or smaller than 14px?
  2. Is there any need to revisit or expand the 14px-as-a-minimum rule for presets? The rule is: wherever a supplied min value (that is, a min value from a preset’s fluid.min or computed internally by the function) is < 14px the clamp() value’s min argument will be corrected upwards. How should we set the minimum value where a maximum custom value is < 14px?

cc @mtias @jasmussen

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions