Feat: Inherit Font Family from Neve

[preda-bogdan]

Inherit Font Families from Neve if previously set in Neve. When the FSE theme is activated settings related to Typography should be inherited from Neve if present and applied to the default style.

[preda-bogdan]

@Codeinwp/design-team

What do you guys think about using Responsive typography?

What I want to do is remap the sizes that we now have:

{
          "slug": "small",
          "size": "14px",
          "name": "Small"
        },
        {
          "slug": "normal",
          "size": "18px",
          "name": "Normal"
        },
        {
          "slug": "medium",
          "size": "24px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "28px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "40px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "64px",
          "name": "Huge"
        }

to instead be resized based on the normal font size, the normal font size will be computed based on a root multiplied by an adaptive-ratio that is tied to the viewport-width. Instead of defining specific values for each size, the values will be automatically computed based on the root and the scale factor between sizes. We can use a clamp to fix the max and minimum values for each size.

Here is an example:

rootFontSize = 12
adaptiveRatio = 0.8
scale=1.4

# normalFontSize will computed as it follows:
normalFontSize = rootFontSize * 1px  + ( adaptiveRatio * 0.5vw )

# For a viewport of 1920px the 0.5vw is equal to (1920*0.5)/100 => 9.6px
normalFontSize = 12px + 7.68px => 19.68px

# We can further clamp this value between a min and a max

maxNormal = 18px
minNormal = maxNormal / 2  - min value will be half the max value

# Using this here is the final font size:

normalFontSizeClamp = clamp( 9px,  normalFontSize, 18px )

### Desktop: 1920
normalFontSizeClamp = 18px - the max size after clamp

### Tablet: 1180
normalFontSizeClamp = 16.72px

### Tablet: 820
normalFontSizeClamp = 15.28px

### Mobile: 375
normalFontSizeClamp = 13.5px

The other fonts will use the scale factor to be computed: E.g.

smallFontSize = normalFontSize / scale
mediumFomtSize = normalFontSize * scale
largeFontSize = mediumFontSize * scale
xLargeFontSize = largeFontSize * scale
hugeFontSize = xLargeFontSize * scale

Here are some images using this technique: Mobile

Tablet

Desktop

I will also link a PR where I'm implementing the font migration from Neve for you to test this.

@Codeinwp/theme-dev Your feedback is welcome here.

[mghenciu]

Sounds like a good idea, Bogdan.

I think something about Fluid Typography was rolled out with WP 6.1, mentioned here and here. Another example is applied here, for the Frost FSE theme.

Not sure if you are referring to exactly the same thing. But long term, I would keep Typography in sync with the Core approach - as hopefully soon they will add Font Sizes per device, and we should be ready for that.

[JohnPixle]

I am also optimistic about the fluid typography. I think we can try it. Here is another article about this from Rich Tabor's blog.

The only issue I see is the one mentioned at the end of the article about compatibility with earlier than 6.1 versions.

I think it's worth giving this a try @preda-bogdan Feel free to translate the values for the Typographic Sizes with what you propose and we can try this at the demo.

Thanks for this!

[preda-bogdan]

@JohnPixle cc @mghenciu You can use the build from the PR to play around with the fluid typography and let me know if it works for you. The PR also inherits the font family, font size, line height, and weight from Neve if they've been set there. For the font family, we only import the family if it is already one of the fonts that the theme has available.

Let me know your thoughts.

[mghenciu]

Sorry in advance for the long comment :)

I've tested now, by doing this:

• created a instance with Neve
• imported the Architecture Gb demo
• installed Neve FSE fluid typography build.

Overall looks good, nice job Bogdan. Here are some side by side screens (Neve FSE left side and Neve legacy on right side):

Desktop

Nothing major on Desktop, I would say, only this 2 small things (we can live with them):

---

Tablet

On Tablet it also looks ok, overall. But due to the limited space, the differences between font sizes are more visible. Ideally we should try to be in the same range when doing font-size inheritance. In this examples is visible that the Headings are much bigger in FSE:

---

Mobile

On Mobile same thing applies as on the Tablet. But overall nothing major, and probably looks worse when compared to the original demo; but in a normal context - the visual differences are not major:

---

Based on testing this demo side by side, I think we can also create a new issue and look into inheriting the Button border radius - if possible. What do you think?

[preda-bogdan]

@mghenciu Thank you for taking the time to look over this. We can increase the adaptiveRatio and it will allow the font to have larger steps hence resulting in reaching maximum and minimum sizes much faster, I believe this can provide better approximations on smaller screens.

Inheriting the button border radius should not be a problem.

I will link the changes here.

[JohnPixle]

@preda-bogdan I tried the build at the demo, but I can hardly see any resizing of the text based on the viewport size 🤔 I set the adaptive ratio bigger values (3) but did not manage to notice any difference.

Also, I think the body text size is now smaller? It was 18px before.

[preda-bogdan]

@JohnPixle I've updated the PR, and fixed the issues that you and Mihai reported. Here are two videos with the fluid scaling the first one here is with Neve Settings inherited, and the second one here is on a clean install.

Also if we desire to start the scaling later or sooner we can adjust the viewport max value here:

"fluidSize": "calc(var(--wp--custom--typography--root-font-size) * var(--wp--custom--typography--adaptive-ratio) * (100vw/1280))"

For sooner we can use 1920 as a higher value than 1280 and for later we can add a smaller value.

cc: @mghenciu This should also better match your use case as I've now preserved the minimum values better.

Let me know if this works for you. Thank you!

[JohnPixle]

@preda-bogdan I just did a quick test and the Typography is looking fluidly good 👍🏻 Thanks for taking care of this!

[preda-bogdan]

@JohnPixle great! I will merge this to development and sync the design branch with these changes. Then we can continue on that one. Thank you for taking the time to have a look at this. 🚀

[JohnPixle]

Awesome, thanks Bogdan!

[preda-bogdan]

The changes are now on development

[pirate-bot]

:tada: This issue has been resolved in version 1.0.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: