Revolutionizing WordPress typography using theme.json

-sidebar-toc>        -language-notice>

Words form the foundation of the Internet in spite of the plethora of digital media. That means that the fonts you choose for your site will be a crucial aspect of your design and layout.

WordPress typography is able to evoke moods, aid in branding, and more. Full site editing (FSE) is a feature of WordPress puts customizing this typography at the fingertips of customers. Additionally, the theme.json file helps the developers create WordPress themes that take advantage of this.

This article explores WordPress typography, both for FSE and theme.json. However, the discussion also includes key contexts such as the typeface you are using and the technical aspects to consider and the future direction of how we use typography in the design.

Typeface on the internet: a quick history

When you go back to the early designs for web, you can see that, in spite of the diversity in design, the typefaces were consistent in their presentation. This is a result of availability, as well as a requirement. In a nutshell, without the technology we have now, words on the web could only utilize fonts on your computer.

The mid- to late '90s "web user" could only have a handful of predictable typefaces: Times New Roman, Arial, Helvetica, Georgia and Verdana. The latter two are Microsoft commissions that render perfectly for web use regardless of time.

WordPress and typography

Current default themes use standard font stacks to create an elegant, contemporary and high-quality presentation. Older default themes use pairings like Noto Sans and Noto Serif (for Twenty Fifteen) as well as Montserrat as well as Merriweather (for Twenty Sixteen).

To showcase this typography "circle of the world", Twenty Sixteen uses Helvetica and Georgia as options for fallback. The twenty Ten default theme only utilizes Helvetica, Arial, and Georgia:

Although these options provide the foundation for WordPress design within each theme, they may also inspire you to take note of how you utilize typography -- which is something WordPress FSE can help with.

A brief overview of full site editing as well as theme.json

The design of your website is unified options in a number of ways:

• The editing method is used that Blocks offers for the entire website, not only your material.
• A template library forms an integral part of the configuration which allows you to modify these using the same tools as the content you have created.
• Styling also happens within the site Editor and provides a general setting scheme.
• Site editing doesn't need any codes to use one of the options available. It is a bridge between design and development.

You can consider the theme.json file to as a prototype version of FSE. You'll need JavaScript Object Notation (JSON) skills to use the file, however this is within the capabilities for the vast majority of website owners. It's a central configuration file that manages your styles and settings.

Every setting is based on the key/value pair value:option which you are able to apply this in a variety of ways:

• Defining global color palettes.
• The process of setting up font families and sizes.
• Modifying Block-specific styling.
• The management of spacing and layout preference.

Typography is set up in the WordPress Site Editor

If you're familiar with how to use the Block Editor You can use it with the Site Editor. Within WordPress, navigate through the appearanceand then the Editor screen. This displays the home screen of the Editor for Site:

The Styles screen on the left side of the navigation offers you a variety of global style options, including fonts that change:

In the majority of cases, individual settings for various factors of typography can provide the most benefit. Two small icons in the middle of the Styles screen that will open additional options, including Style Book and Edit Style Book and the Edit Styles pencil icon.

Additionally, you are able to set typography options at an element level and for each Block.

The Font Library

This edit styles>> Typeography screen will display the Font Library but it does not have this specific title in the Editor for Sites. This lets you handle types and fonts by using several different ways:

• It is possible to upload and manage typefaces that you have created.
• You can use Google Fonts directly within WordPress.
• Create font collections using PHP.

To access the Font Library from the section for Typography in the Site Editor sidebar, click the Manage Fonts icon:

Here, the library tab displays the typefaces that are currently registered for your theme and indicates which ones are active:

By clicking through one of them, it lets you activate or deactivate the individual fonts.

On the upload option, can use an uploader that allows you to drag and drop files. download your fonts of choice in TTF, WOFF, WOFF2, and OTF formats.

Choose the fonts you want to download from the extensive listing, and click to click the Install button. When the successful notification appears these fonts will be displayed in the Library tab:

This lets you use the fonts the same way as any other font on your website. Now, you have to customize them to fit your needs.

The Style Book

One of the risks of choosing and setting typefaces is the fact that you aren't sure how it will look together with layouts, color schemes and formats. The Style Book is invaluable, because it allows you to preview the typography options across various elements.

Selecting the eye icon can let you open the Style Book, and there are five tabs in the Style Book:

• Text: Go here for a tutorial on working with paragraphs, headings and lists and many other components that focus on text.
• Media: Here, you can alter the videos, images and audio presentation designs.
• Design The section combines structural design facets, like separators, columns and buttons.
• Widgets The HTML0 widgets have two elements to this screen including dynamic generation like collections of archives or comments. Also, there is a search bar, social media icons, and tag clouds here.
• Theme It focuses on your header elements for your site including the title, tagline navigation and logo.

If you select one of the elements in the Style Book, you have several options in the sidebar. The font settings for each Block here instead of specific elements.

You can arrive at the identical screens by clicking the styles>> Blocks section from the site Editor homepage. Whatever you choose, the choices you see let you customize the typeface (and additional) for each Block in granular detail.

Typography tuning options in the Site Editor

In all blocks and elements, you have the same core options available to the user. Below is an overview of each option within the Panel.

Font type and size

The Font drop-down menu is straightforward: choose the font you would like to apply to the specific element or Block:

These Size settings are the most customizable in The Site Editor. Select a size within a range between Small and Extra Extra Large:

If you modify theme.json, you have the ability to change these settings -- but can't use using the Editor for Sites. The Setting Custom Size button provides an option to define the size you want using an array of sizing units:

There are a variety of ways to modify typography inside the Site Editor, including techniques that you normally utilize CSS to do.

Appearance, line height, and letter spacing

The appearance drop-down menu appears straightforward: select one of the fonts from a long list, and then it'll be applied to your text. But, it's unlikely that you'll be able to use all the fonts that are suitable for the weight you select.

The tests we conducted show that WordPress does not filter this list to show only accessible font weights. In addition, it will apply a "nearest match" when you choose a weight without a matching font. We use, for example, Cardo Normal, Cardo Bold, and Cardo Bold Italic for our example site. Selecting the Semi Bold, Bold, Extra Bold and Black, you can use just Cardo Bold:

Line height does not use the presets feature and is a balance between the font you choose, its appearance as well as size. This value puts more space between each line and it's often a practical solution when the text appears cluttered in a row:

The spacing for letters is the same, and it follows the CSS tradition of adding to the spacing naturally in place:

As with custom font sizing, you can select different sizes of measurement. A relative measurement is the most common choice here. WordPress assigns the letter spacing a CSS default of "normal." This allows the browser choose the value which, based on our experience, this works optimal.

It's common usage to employ tiny positive letter spacing values -- usually no more than 0.12rem/em -- and almost no negative spacing.

The last option - letter case - allows you to choose whether to make texts lower, upper or sentence case. You can also eliminate the casing. This will help you maintain the consistency of text, because you don't need to specifically use a specific case in the creation of content.

How do you use theme.json to determine the typography of your WordPress theme's typography

This Site Editor tool is great for those who don't have any technological knowledge. Its theme.json file is what you need to ensure that the Site Editor gives users everything they need to modify their websites. The configuration file serves as the base of development for your theme.

This article doesn't cover the layout and structure of the theme.jsonfile, but we're looking at the best way to define, set, and apply typography within.

Learning how to read the theme.json structure and defining the global settings

You use JSON to define all elements within theme.json, which includes typography. The typography element is nestled in the settings item within the file. Thereafter, you'll add additional elements, properties, and objects in order to create your website's typography.

 "version": 3,
 "settings": 
 "typography": 
 "fontFamilies": [
 
 "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
 "slug": "system-font",
 "name": "System Font"
 
 ],
 "fontSizes": [
 
 "slug": "small",
 "size": "13px",
 "name": "Small"
 ,
 
 "slug": "medium",
 "size": "20px",
 "name": "Medium"
 
 ]
 
 
 

The entire set of elements follows a similar pattern. The defaults (and the easiest to comprehend can be described as global settings. They are arranged in an easy fashion, however you can also define typography settings for specific Blocks.

"styles": 
 "blocks": 
 "core/paragraph": 
 "typography": 
 "fontFamily": "var(--wp--preset--font-family--primary)",
 "fontSize": "var(--wp--preset--font-size--medium)",
 "lineHeight": "1.5"
 
 ,
 "core/heading": 
 "typography": 
 "fontFamily": "var(--wp--preset--font-family--secondary)",
 "fontWeight": "700"
 
 
 
 

This makes use of blocks as Blocks property, and also a unique namespace for every Block you wish to focus on. In addition, it creates two layers to nest, there is no alternative to this strategy. However, you'll have many properties to explore.

Registration of fonts

• fontFamily maps to that the font family CSS value. This will be the stack of typefaces you wish to include in your theme.
• name is the name you will see in the Website Editor when selecting the font. It will be human-readable.
• Slug appends to the custom CSS property that can be used in the future.

For system fonts, this is easy:

...
 "typography": {
 "fontFamilies": [
 
 "name": "Primary",
 "slug": "primary",
 "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
 ,
 
 "name": "Secondary",
 "slug": "secondary",
 "fontFamily": "system-ui, sans-serif"
 

For registration of custom web fonts, you must that you utilize the FontFace property, and then define a few attributes:

...
 "name": "Secondary","slug": "secondary","fontFamily": "'Open Sans', sans-serif","fontFace" (for example:"fontFace": ["fontFamily": "Open Sans""fontFace": "OpenSanss""fontWeight": "300 800","300 800", variation of the font weight. "fontStyle": "normal" The value has to be the correct CSS font-style value. "fontStretch": "normal" Also, this must be a valid CSS font-stretch value. "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats. ,
 ...

After you've registered your Fonts, select them from the various drop-down menus within the Site Editor.

It's a boilerplate to use when building a theme, but also lets you register and define typography too. Once you register the fonts you want to register in any way that feels suitable for you (we suggest the Font Library), you are able to begin looking at the size.

Preparing fonts and sizes within theme.json

Another core task with typography is setting the size of fonts. It is done using an attribute called the fontSizes property that allows you to define predefined fonts for the Site Editor:

"settings": 
 "typography": 
 "fontSizes": [
 
 "slug": "small",
 "size": "12px",
 "name": "Small"
 ,
 
 "slug": "x-large",
 "size": "32px",
 "name": "Extra Large"
 
 ]
 
 

Similar to other typography settings, WordPress will generate a unique CSS property for each preset using the name you supply:

body 
 --wp--preset--font-size--small: 12px;
 --wp--preset--font-size--x-large: 32px;
 

WordPress disables the fluid typography feature by default, however, you can switch this off using boolean values. You can set at an overall degree...

 "version": 2,
 "settings": 
 "typography": 
 "fluid": true
 
 
 

...or for each preset and size you define:

 "name": "Medium",
 "size": "1.25rem",
 "slug": "md",
 "fluid": 
 "min": "1rem",
 "max": "1.5rem"
 
 ,

The max and min values and maximum numbers let you know the limits of scalability that apply to every font size that you choose to define.

Utilizing the latest typography features

The theme.json provides a full complement of options, similar to what is available in the Site Editor. This lets you customize the fonts on your website to a set of defaults that make sense for the theme you're using:

"styles": 
 "typography": 
 "letterSpacing": "0.02em",
 "textTransform": "uppercase",
 "textDecoration": "underline",
 "lineHeight": "1.55rem",
 "fontStyle": "normal"
 
 

You can choose to enable or disable these options. Each choice is a boolean value, which allows you to customize options with the Site Editor as well. There are several customizations you can make that go beyond the Site Editor's offerings:

• customFontSize will be turned on by default and allows users enter the custom sizes of fonts -- but you can turn it off if you wish to tightly control the available options.
• dropCap defaults to false however, if you choose to enable it you have the option of turning on drop caps for the initial letter of any Paragraph blocks.
• textColumns enables an "columns" option for every text contained in an Block, and this is turned off by default.
• writingMode enables options to change the text orientation within The Site Editor. You can give users a choice between horizontal and vertical text.

The range of theme.json means you should work there first in the process of creating themes. The features available within the Site Editor let you or your users modify WordPress typography.

How to implement typography using theme.json A practical case

FSE allows design and development through WordPress simpler than it has ever been. Additionally, the basic process of choosing and applying those fonts becomes easier. Some of this is because of design trends, but the tools exist to fill in the gaps when there isn't a graphic designer on hand to aid.

We can start with the fonts you use most often.

1. Combine typefaces with complementary styles

In reality, due to the latest fashions in design, there's less work involved. It's because the body text may make use of system fonts- specifically the primary operating system (OS) typeface. Your only job is to choose something that works alongside it.

This isn't a tutorial on the pairing of typefaces. However, we have some tips to offer:

• OS typefaces for the body copy typically are sans-serif. This means looking for either a serif font or a sans-serif font that appears like something else, is unique and is distinctive.
• Simple is best, perhaps you should only use the OS font, if it fits in the style.
• Explore different combinations as you can get a feel for the typefaces that work best (and which do not).

With a pair of fonts, be aware of their dimensions in relation to each other, not just on the page but relative to each other.

2. Find the right absolute and comparative sizing

Selecting the right font size is important, since the incorrect absolute sizes can ruin the user experience. It's also an area where you may want to use the default fonts. We encourage users to play around since each pairing will have their own "space" to display the fonts.

Typescale is a great tool to assist you in creating the perfect WordPress typography, no matter what your need:

One of the greatest features of the tool is the scale choices. It basically does all the job for you by allowing you to select complimentary font sizes. The font we choose is Major Third as our Major Third scale here, which has a factor of 1.2 and a base dimension of 16px.

In the middle of the screen, you can find the size that has been calculated of each paragraph and heading and can choose from several measurements. Take note that Typescale also lets you change the letter spacing, line height, font weight, and more: all adjustable in theme.json.

3. The application of defaults inside theme.json

Once you have the right size and typeface, you can integrate them in your theme.json file. Here's an example of how is a typical theme.json file will be like:

 "version": 3,
 "settings": 
 "typography": 
 "fontFamilies": [
 
 "fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
 "slug": "ubuntu-sans",
 "name": "Ubuntu Sans"
 ,
 
 "fontFamily": "\"Playfair Display\", serif",
 "slug": "playfair",
 "name": "Playfair Display"
 
 ],
 "fontSizes": [
 
 "slug": "small",
 "size": "13px",
 "name": "Small"
 ,
 
 "slug": "medium",
 "size": "16px",
 "name": "Medium"
 ,
 
 "slug": "large",
 "size": "20px",
 "name": "Large"
 ,
 
 "slug": "x-large",
 "size": "25px",
 "name": "Extra Large"
 ,
 
 "slug": "huge",
 "size": "31px",
 "name": "Huge"
 
 ]
 
 ,
 "styles": 
 "typography": 
 "fontFamily": "var(--wp--preset--font-family--system)",
 "fontSize": "var(--wp--preset--font-size--medium)",
 "lineHeight": "1.8"
 ,
 "blocks": 
 "core/paragraph": 
 "typography": 
 "fontSize": "var(--wp--preset--font-size--medium)"
 
 ,
 "core/heading": 
 "typography": 
 "fontFamily": "var(--wp--preset--font-family--playfair)",
 "fontWeight": "700"
 
 ,
 "core/post-title": 
 "typography": 
 "fontSize": "var(--wp--preset--font-size--huge)"
 
 
 
 
 

The same typesetters to every Block as well as think about styling each heading with a distinct style. Make sure you have a consistent and hi-level WordPress typography system that will be the basis of the theme's style. This will create a consistent appearance across your website The Site Editor can give the user more freedom and flexibility to customize.

's role is a key component of the WordPress theme development workflow

Summary

FSE is maturing as is theme.json is central in the entire process of WordPress editing. Typography is a critical factor in this regard, and WordPress gives developers tools as well as access to elements that would have previously required a foundation in CSS as well as PHP.

The Site Editor's user-friendly interface, and the adaptability that is theme.json, you are able to create typography that improves your website's visual appeal, is in sync with your logo and adds to the overall user experience.

We'd like to know about your experiences with WordPress typography and if FSE can be the key to your success. Please share your ideas with us in the comments below.

Jeremy Holcombe

Senior Editor for WordPress Web Developer as well as Content writer. Apart from everything related to WordPress I like playing golf, at the beach, and watching movies. Also, I have height issues.

•                   LinkedIn