I'm opening this to ideally implement Fluid Typography in the future in Claro once we have a working MVP and can start improvements. It isn't properly defined on the design side yet but it would be a huge improvement.

More about Fluid typography: https://css-tricks.com/snippets/css/fluid-typography/)

CommentFileSizeAuthor
#6 3045797-6.patch34.07 KBmartijn.cuppens

Comments

ckrina created an issue. See original summary.

fhaeberle’s picture

fhaeberle
he/him
Location 🇩🇪 Stuttgart
commented
Version: 8.x-1.x-dev » 8.x-2.x-dev

@ckrina Any plans on still implementing this?

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

Yes, the plan is implementing this at some point in the future but it's a new feature that has a very low priority for now. Anything that is Stable blocker is more important than implementing this feature.
Only #3067208: Add an option to reduce font-size/spacing (scaling) would maybe require this, and only depending of the approach taken.
So this is a new feature, nice to have, but not a stable blocker. :)

fhaeberle’s picture

fhaeberle
he/him
Location 🇩🇪 Stuttgart
commented

+1 consider implementing this at some point in the future after stable

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Project: Claro » Drupal core
Version: 8.x-2.x-dev » 8.9.x-dev
Component: Code » Claro theme
martijn.cuppens’s picture

martijn.cuppens commented
StatusFileSize
new 3045797-6.patch34.07 KB

We recently added something new to Bootstrap called RFS (which will be enabled by default in version 5). This automates fluid resizing and is quite easy to implement (see included patch).

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented
Status: Active » Needs review
dimiter’s picture

dimiter commented

While I did not look in detail at Martijn's fix in #6, I recently 'learned' that you could also set a font-size using the vw-unit. That way, as the screen width decreases, the font-size gets smaller. I see that RFS also uses this trick. Would it be better if we'd set a vw-size on, say, the html/body, and then use only relative font-sizes in other places? What benefit would RFS give us that this approach does not have?

martijn.cuppens’s picture

martijn.cuppens commented

Would it be better if we'd set a vw-size on, say, the html/body, and then use only relative font-sizes in other places?

Nope, this way smaller font sizes can get too small to be readable.

What benefit would RFS give us that this approach does not have?

RFS makes sure only the bigger font sizes resize while keeping the hierarchy in mind (eg. <h1> will always be larger than <h2>)

Read https://css-tricks.com/using-a-mixin-to-take-the-math-out-of-responsive-... and https://css-tricks.com/using-a-postcss-function-to-automate-your-respons... for more background info.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Postponed

Let's postpone this until Claro is stable, and revisit then the strategy to follow taking into account other options like clamp() and to what elements it needs to be implemented (only typography or spacing too).

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.