Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fluid Typography Option #24480

Open
iamtakashi opened this issue Aug 11, 2020 · 3 comments
Open

Fluid Typography Option #24480

iamtakashi opened this issue Aug 11, 2020 · 3 comments

Comments

@iamtakashi
Copy link

@iamtakashi iamtakashi commented Aug 11, 2020

It'd be nice to allow to have fluid typography option so that design would look good on all viewports. This would open the door for designers to make a more bold visual expression that's difficult to do with fixed font size.

@mtias told me about clamp https://developer.mozilla.org/en-US/docs/Web/CSS/clamp, and that looks a pretty good solution.

fluid-type

Related #23323

@mtias
Copy link
Contributor

@mtias mtias commented Aug 25, 2020

This would be neat to consider — also cc @nosolosw @jorgefilipecosta for global styles and theme.json consideration.

@jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented Aug 25, 2020

Following the suggestion, I gave in #24250 (comment).

I think the attributes where we reference a fontSize, lineHeights, padding, margins, widths, etc... should all be strings (instead of multiple attributes one for values and other for units as we have now in some cases).
Then in some cases, we can parse the value e.g:"13px" and display a UI control for changing that value. In other cases, we may not be able to parse the value, e.g.: "clamp(1rem, 10vw, 2rem);" for this case, we would show a text input where the user can use a raw mechanism to change the value.
When we think some type of value should have an easier to edit interface, we implement a parser for the value and a UI to manage it. For example, we may then add a mechanism that allows setting and editing clamp values in a specific UI component for "clamp".

If tomorrow CSS allows a new font size computation e.g: "font-size: next-size-computation( 10px, 10rm, ...). Themes would be able to use that mechanism right away without us needing to change any line of code (the value would be shown as a raw value). In a future version, we may then include a UI to edit that type of value if we think it has a big usage of is useful for building themes and patterns.

@aristath
Copy link
Member

@aristath aristath commented Aug 25, 2020

I think the attributes where we reference a fontSize, lineHeights, padding, margins, widths, etc... should all be strings (instead of multiple attributes one for values and other for units as we have now in some cases).

+1 to that... I started working on a similar approach for column widths (see #24711 (comment))
The context is different, but the implementation is pretty much the same: switched a control to string, allowing users to enter a value of their choosing with validation for the units they enter.
Personally on my themes & sites I like doing something like font-size:calc(14px + 0.25vw) to define the root font-size, and everything else is then in em units.
That calc() however would require a freeform text field in global styles, can't be done without it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants