Description

This issue is a follow-up to #9488, dividing up the work comprising this issue into individual bite-sized chunks.

We would like to reduce the size of the BNPL PMME text in relation to the label title font size. Note that since both of these elements are sized dynamically, we will need to calculate the size of the payment method label and then reduce the PMME font size in relation to this element.

PMME text in question to be altered

Acceptance criteria

I think the main problem is the text "4 interest-free payments..." is 2-3 text sizes too large, which is the main disparity from the design. If the text was smaller in scale to the PM name, the logo would appear less visually imbalanced. Can we bump the text on those lines down to 13px? (In the Figma file I'm seeing 13/16 scale for shortcode and 13/15 for blocks between the two lines).
#9488 (comment)

• PMME font-size should be dynamically measureed as 2-3px or equitable scale smaller than the radio button label.
• Changes should be applied to both blocks and shortcode checkouts.
• Should not affect changes made in Improve BNPL PMME and icon placement in shortcode checkout #9817.

Limitations

Note that we should attempt to make this placement as consistent across themes as possible, but be aware that different themes control the positioning of these radio label elements very differently. If there are limitations to what we are able to achieve, please explain the limitations on this issue with the expectation that this is part of a series of incremental changes and we should try to accomplish the best experience possible within the constraint of what is feasible.

Additional context

#9488 (comment)