The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.?Create a ticket in our bug tracker.
In WordPress 6.1, “Fluid font sizes” make their debut. This enables font sizes to adapt to changes in screen size, for example, by growing larger as the viewport width increases, or smaller as it decreases.
How to use fluid font size in your theme
Fluid font sizes can be activated for blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based themes and classic themes via a theme.json file.
The new boolean settings.typography.fluid acts as a toggle that, when set to true, will convert the following values to a clamp() function:
font size preset values within settings.typography.fontSizes
custom font sizes, whether defined in theme.json or the editor
The clamp() function contains an upper, lower and preferred font size. The latter will adjust itself according to the width of the viewport.
For presets, individual font sizes can be defined by their minimum and maximum values, which determine the smallest and largest values of a font size. Moreover, individual preset font sizes can opt out by setting settings.typography.fontSizes.fluid to false.
In the absence of explicit minimum and maximum values, the editor will scale the existing size value up and down to calculate smallest and largest values automatically using computed lower and upper font size values based on the single value.
Themes that don’t opt into the fluid font size enhancementenhancementEnhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. will see no difference in the way fonts presently work. It is still possible to roll a custom clamp() or other fluid-like formula in the size and fontSize property values.
Applying fluid font sizes in the editor
Nothing changes in the way the typography UIUIUser interface works or appears in the editor.
Where fluid font size presets have been defined in theme.json, users can apply these values using the font size picker:
Any custom value set in the editor will also be converted and saved as a clamp() value:
Current issues and limitations
Fluid font sizes will only work where a font size is defined in px, em or rem units. For the purposes of computing a “preferred font size” the algorithm will convert font sizes in px to rem assuming a base size of `16px`, which is the equivalent of 1em or 1rem.
This is to not only make the job of calculating the clamp formula easier, but to encourage the use of relative sizes: setting the font size to scale proportionally with whichever base size the browser sets will help to maintain accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility).
The first iteration has also made some base assumptions in relation to:
Minimum and maximum viewport widths (1600px and 768px).
Calculating minimum and maximum font sizes in the absence of specific values.
The rate of scale between minimum and maximum font size boundaries.
At the moment, static values exist for the purposes of generating clamp formulae. A follow-up pull request PR is exploring a way to make these parameters configurable.
You must be logged in to post a comment.