Implementing Fluid Typography For Headings In Oxygen

In this video, learn how to use the CSS function clamp() in Oxygen's stylesheets to make your headings responsive.

[shirkit]

I wish the Oxygen's general settings for fonts would allow break points as well

[Pixels_and_Points]

Size in pixels / Viewport width == vw
Thus, 105px / 1120 = 9.375vw.
I find that easier than pulling up a calculator.

[amirnouri]

fantastic way to make heading resize automatically. Thank you for sharing.

[clixt]

Now just pair this with Variable Fonts and we're golden. This and VF should be implemented in Oxygen

[MotifConsulting_Denver]

Why aren't you guys using rem for font size in your tutorials?

[old_ogcdigital]

Worth keeping in mind that clamp is NOT a good idea if factoring accessibility into your build (which you should be). A strict maximum font size will cause issues with user zoom settings, and may have unintended consequences of preventing a user from zooming as much as they need to for accessibility purposes

[thebibleproof]

Would you use the real value 9.375vw for h1 on a real site design? Why not 9.5vw ? Will it make much difference with all the strange small device sizes out there?

[domainacres]

I'm wondering why bother with the media query? just define your h1, h2 etc using font-size: clamp(min, Xvw, max); for each sure put the exception in place for non-clamp browsers.
oh if you forgot : you must switch off global font size for headings - manage / settings / global styles / headings .. make sure no font size is displayed - your custom stylesheet should over-ride now.

[thewhiterussian]

This is good except for when you go landscape on mobile phones. Then the heading sizes get super distorted. Not the ultimate solution, but good start.

[HirwaMugabe]

hi, what tool was that for testing the responsiveness of the site at 0:57 ?

[friendsanimation]

Hey wt abt the color picker update for wp5.5

[Natasha-mjuz]

Make a video on System Font.
Heard it reduces load time and optimized for all types of devices.

[ghostofakina]

How does this play out for browsers that don't support modern CSS?

[DudeWithADrone]

Can't get it to work. No idea why.

[Atractiondj]

I don't think this can be called responsive text. This is the text that runs over and decreases to certain values. I found a way to make the perfect responsive text (though when there are more media queries), however, as you see in the layout, the text is in this position (without changing the number of lines and characters in a row, that is, completely exactly the same as, for example, in 320 px as well and at 414 pixels) only the scale of the letters changes, want to tell you how it works? For me personally, this option is not suitable me, I do not want to run over lines as this violates the layout and at certain resolutions, the button will go down a lot