diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 6776824c01a990..644d65b7615571 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -540,10 +540,14 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
*/
if ( ! $minimum_font_size_raw ) {
$preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16;
- // Logarithmic scale factor: Min font scale that tapers out as the font size increases.
- $minimum_font_size_factor = 1 - 0.12 * log( $preferred_font_size_in_px );
- // Constrains the minimum font size factor between min and max values.
- $minimum_font_size_factor = min( max( $minimum_font_size_factor, $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
+
+ /*
+ * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+ * that is, how quickly the size factor reaches 0 given increasing font size values.
+ * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+ * The scale factor is constrained between min and max values.
+ */
+ $minimum_font_size_factor = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );
// Only use calculated min font size if it's > $minimum_font_size_limit value.
diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js
index b23647b3aa15f2..4992e83880a9f4 100644
--- a/packages/block-editor/src/components/font-sizes/fluid-utils.js
+++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js
@@ -108,11 +108,15 @@ export function getComputedFluidTypographyValue( {
? fontSizeParsed.value
: fontSizeParsed.value * 16;
- // Logarithmic scale factor: Min font scale that tapers out as the font size increases.
- // And constrains the minimum font size factor between min and max values.
+ /*
+ * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+ * that is, how quickly the size factor reaches 0 given increasing font size values.
+ * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+ * The scale factor is constrained between min and max values.
+ */
const minimumFontSizeFactor = Math.min(
Math.max(
- 1 - 0.12 * Math.log( fontSizeValueInPx ),
+ 1 - 0.075 * Math.log2( fontSizeValueInPx ),
DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN
),
DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX
diff --git a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js
index 5c38b5096a523f..a50737a6dc0a86 100644
--- a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js
+++ b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js
@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
fontSize: '30px',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)'
+ 'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
);
} );
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
fontSize: '30px',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)'
+ 'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
);
} );
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
maximumViewPortWidth: '1000px',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(17.756px, 1.11rem + ((1vw - 5px) * 2.449), 30px)'
+ 'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
);
} );
@@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
scaleFactor: '2',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 1.913), 30px)'
+ 'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.725), 30px)'
);
} );
diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js
index d8847ab8664d64..a91a8f39e8eccc 100644
--- a/packages/block-editor/src/components/global-styles/test/typography-utils.js
+++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js
@@ -89,7 +89,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 1.75rem)',
+ 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
},
{
@@ -101,7 +101,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(1.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)',
+ 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
},
{
@@ -113,7 +113,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
+ 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
},
{
@@ -127,7 +127,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)',
+ 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
},
{
@@ -140,7 +140,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
+ 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
},
{
@@ -154,7 +154,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
+ 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
},
{
@@ -167,7 +167,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
+ 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
},
{
@@ -271,7 +271,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 80px)',
+ 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
},
{
@@ -392,7 +392,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)',
+ 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
},
{
@@ -405,7 +405,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)',
+ 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
},
{
diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js
index 70c444cb230897..01d597a1ff15c2 100644
--- a/packages/block-editor/src/hooks/test/use-typography-props.js
+++ b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -44,7 +44,7 @@ describe( 'getTypographyClassesAndStyles', () => {
style: {
letterSpacing: '22px',
fontSize:
- 'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)',
+ 'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
textTransform: 'uppercase',
},
} );
@@ -70,7 +70,7 @@ describe( 'getTypographyClassesAndStyles', () => {
style: {
textDecoration: 'underline',
fontSize:
- 'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)',
+ 'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
textTransform: 'uppercase',
},
} );
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 469647cdbf5c2e..99376bf23adfcf 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -379,7 +379,7 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '1.75rem',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 1.75rem)',
+ 'expected_output' => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
),
'returns clamp value with em min and max units' => array(
@@ -387,7 +387,7 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '1.75em',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(1.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)',
+ 'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
),
'returns clamp value for floats' => array(
@@ -395,7 +395,7 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '70.175px',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
+ 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
),
'coerces integer to `px` and returns clamp value' => array(
@@ -403,7 +403,7 @@ public function data_generate_font_size_preset_fixtures() {
'size' => 33,
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)',
+ 'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
),
'coerces float to `px` and returns clamp value' => array(
@@ -411,7 +411,7 @@ public function data_generate_font_size_preset_fixtures() {
'size' => 70.175,
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
+ 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
),
'returns clamp value when `fluid` is empty array' => array(
@@ -420,7 +420,7 @@ public function data_generate_font_size_preset_fixtures() {
'fluid' => array(),
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
+ 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
),
'returns clamp value when `fluid` is `null`' => array(
@@ -429,7 +429,7 @@ public function data_generate_font_size_preset_fixtures() {
'fluid' => null,
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
+ 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
),
'returns clamp value if min font size is greater than max' => array(
@@ -503,7 +503,7 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 80px)',
+ 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
),
'should not apply lower bound test when fluid values are set' => array(
@@ -557,7 +557,7 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '12rem',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)',
+ 'expected_output' => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
),
'should apply scaled min font size for px values when custom min font size is not set' => array(
@@ -565,7 +565,7 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '200px',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)',
+ 'expected_output' => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
),
'should not apply scaled min font size for minimum font size when custom min font size is set' => array(
@@ -718,7 +718,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
'block_content' => 'This is a heading
',
'font_size_value' => '4rem',
'should_use_fluid_typography' => true,
- 'expected_output' => 'This is a heading
',
+ 'expected_output' => 'This is a heading
',
),
'return_content_if_no_inline_font_size_found' => array(
'block_content' => 'A paragraph inside a group
',
@@ -742,7 +742,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
'block_content' => " \n \n
A paragraph inside a group
\n \n
A paragraph inside a group
\n \n
A paragraph inside a group