Block Font Sizes and Fluid typography

Back in August, 2020 a Gutenberg issue proposed the following enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature.:

It’d be nice to allow to have fluid typography option so that design would look good on all viewports. This would open the door for designers to make a more bold visual expression that’s difficult to do with fixed font size.

An experimental pull request (PR), Block supports: add fluid typography #39529, puts forward a way to realize this enhancement by allowing theme authors to enable fluid typography across their site.

This post is to raise awareness of the issue and ongoing work in the area, and to request feedback on the PR‘s proposed approach.

What is fluid typography?

Fluid typography is a fancy way of describing font properties, such as size or line height, that scale fluidly according to the size of the viewport.

Taking font size as an example, when a site’s font sizes are fluid they will adapt to every change in screen size, for example, by growing larger as the viewport width increases, or smaller as it decreases.

Contrast that idea with properties that respond to specific viewport sizes, such as those defined by media queries, but do nothing in between. 

About the proposed approach

Theme authors can already insert their own fluid font size values in theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.. The TwentyTwentyTwo theme, for example, employs clamp() values for several font sizes.

However, it’s still necessary to create a fluid font size value for every font size in order to achieve a uniform effect across a site.

The PR attempts to generate fluid font size values dynamically so that theme authors don’t have to worry about implementation details.

In order to achieve this, it add several new properties to theme.json font size presets:

"settings": {
    ....
    "typography": {
        "fluid": {
            "min": "768px",
            "max": "1600px"
        },
        "fontSizes": [
            {
                "size": "2rem",
                "fluidSize": {
                    "min": "1.8rem",
                    "max": "2.5rem"
                },
                "slug": "medium",
                "name": "Medium"
            }
        }
}

Note typography.fluid and typography.fontSizes[].fluidSize, both of which contain the following properties:

  1. min – In fluid, the minimum viewport width, In fluidSize, the minimum font size.
  2. max – In fluid, the maximum viewport width. In fluidSize, the maximum font size.

Using these properties, GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ will construct a unique clamp() formula for every font size and output the value in the font size preset CSSCSS Cascading Style Sheets. var. For example:

--wp--preset--font-size--medium: clamp(1.8rem, calc(1.8rem + ((1vw - 0.48rem) * 1.346)), 2.5rem);

The formula controls how a font scales between minimum and maximum values, relative to the viewport width.

If values required to reliably construct a clamp() formula are missing, such as a minimum or maximum font size, an alternative font size value using CSS max() or min() is returned accordingly.

Fluid font size example in Gutenberg

I encourage you to inspect the PR for further details, and play around with different designs.

Feedback

Initially, I’d expect to release the changes to theme authors via the theme.json interface only.

The intention is to garner feedback on design, functionality and APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. before diving into UIUI User interface controls and, beyond that, introducing fluidity to other properties such as spacing.

On that note, I invite folks to check out the branch and leave their thoughts in the PR comments. If you can spare the time to test the changes, I’d appreciate input on:

  • Whether the new theme.json  properties are easy to understand.
  • Usage across themes and potential backwards compatibility issues.
  • AccessibilityAccessibility Accessibility (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). For example, supporting (and ultimately recommending) the use of relative sizes such as rem.
  • Possible alternatives.

All feedback is welcome and will be rewarded with healthy doses of digital kudos.

Thank you!

#gutenberg, #request-for-comment, #typography