The most innovative method of WordPress typography by using theme.json

Nov 15, 2024
Revolutionizing WordPress Typography with full site editing and theme.json

-sidebar-toc> -language-notice>

Words are the basis of the Internet in spite of the multitude of digital media. The fonts you select for your website will become the most important element in your design and layout.

WordPress typography is able to create moods, assist with branding, and much more. Full editing on the web (FSE) is a feature of WordPress lets you customize this type of typography at the fingertips of its users. In addition, WordPress' theme.json file assists developers to design WordPress themes that take advantage of this feature.

This article focuses on WordPress typography, which includes FSE and theme.json. The article is also a discussion of key factors like the typeface that you use and the technical elements that need to be taken into consideration along with the general direction to follow for how we use typography in the design.

Typeface on the internet brief history

If you look over the initial designs of the web You will see that in spite of the diverse style, the fonts were uniform in appearance. The reason for this was accessibility and the necessity. If you do not have the latest technology internet, the words appear on the internet might be limited to fonts that are installed on your computer.

The mid-to-late 1990s "web user" had only a handful of fonts with a certain look: Times New Roman, Arial, Helvetica, Georgia and Verdana. Two of them are Microsoft commissions that are perfectly acceptable for use on internet, no matter the date.

A comparison of two serif typefaces, Verdana and Georgia. The image shows uppercase and lowercase letters – as well as numbers – in both fonts. Verdana appears more condensed and geometric, while Georgia has more pronounced serifs and a slightly more traditional look.
The specimens are of the Verdana font, as well as Georgia fonts.
The Google Fonts website showing font previews and filtering options. The preview text reads, "Everyone has the right to freedom of thought," displayed in different fonts, including Roboto, SUSE, and Noto Sans Hannunoo. Filter options for language, writing system, and font properties are visible on the left-hand sidebar.
The main Google Fonts interface.

WordPress and typography

Current default themes use classic font stacks to create modern, elegant and professional appearance. Older default themes use combinations such as Noto Sans as well as Noto Serif (for Twenty Fifteen) and Montserrat and Merriweather (for Twenty Sixteen).

Visual representations of the "circle of the globe", Twenty Sixteen uses Helvetica as well as Georgia as options for fallback. The Twenty Ten default theme employs Helvetica, Arial, and Georgia:

The WordPress.org theme preview for "Twenty Ten" displaying a scenic header image of a tree-lined path. The left-hand sidebar shows theme information and download options, while the main area presents sample content and layout.
The Twenty Ten demo page is accessible on WordPress.org.

While these choices provide the base for WordPress style within every theme, they can also prompt you to take note of the usage of typography. This is something that WordPress FSE could assist you in.

An overview of the main edits to the site, together with theme.json

The WordPress Site Editor interface displaying a landscaping company's homepage. The page has a blue background with white text reading
The user interface for the WordPress Site Editor is similar to Block Editor. Block Editor however, with an expanded scope of customization.

Your site's style provides unified options with a variety of options:

  • This editing method is used developed by Blocks that covers the whole site, not only the pages you publish.
  • Template libraries are an essential part of configuration. They allow users to modify these templates using identical tools you employed for creating the content that you've made.
  • Styling also happens within the Site Editor and offers a general setting of the fashion.
  • Editing sites doesn't require any codes in order to utilize one of the alternatives readily available. It's an intermediary between design and development.

It is possible to think of the theme.json file to be a model variant of FSE. It requires JavaScript Object Notation (JSON) capabilities to work with the file, but it's an option for the vast majority of webmasters. This is a central configuration file that controls your styles and configurations.

A code editor window titled is displayed over a scenic background of forested mountains. The editor shows a portion of a WordPress theme.json file with various styling configurations. The code includes settings for calendar, categories, and code elements, using CSS variables for colors and spacing. Line numbers are visible on the left, and the editor interface has a dark theme for improved readability against the backdrop.
A theme.json document will be shown using an editor designed specifically for programming.

Every setting depends on value:key value:option that lets you apply this using a range of options:

  • Defining global color palettes.
  • It's the process of creating font families and dimensions.
  • Modifying the block-specific style.
  • Controlling spacing and layout preference.

Typography can be set within the WordPress Site Editor

If you're comfortable in the method of using the Block Editor, then you're allowed to use it using The Site Editor. Within WordPress, navigate through your layoutand then, you'll be able to access go to the editor screen. This screen is the home screen of The Editor of Site:

The WordPress Site Editor home screen. The left-hand sidebar shows design options, while the main area displays a blue-themed homepage with the heading "A commitment to innovation and sustainability" and an image of a modern building.
This is The Home Screen of Site Editor.

The Styles display to the left of the navigation offers you a variety of styles that are universal like fonts that change:

A GIF of the WordPress Site Editor showcasing various theme style presets. The main content area displays "A commitment to innovation and sustainability" with a description of Études firm. It changes the color scheme and typography based on the selections within the left-hand sidebar, which shows style options and color schemes.
There's a range of styles available for the WordPress Site Editor. WordPress Site Editor.

In the majority of cases, individual settings for various elements of typography could be the best option. Two small icons on the Styles screen will reveal additional options, including Style Book and Edit Style Book as well as the edit styles pencil icons.

A portion of the WordPress Site Editor showing style options on the left-hand side, and a preview of the website on the right. Two icons for viewing and editing are highlighted in red.
The icons for Style Editing within the Editor for Site.

Additionally, you are given the ability to define typography choices on the element level and for each Block.

The Font Library Font Library

The edit style>>The Typography screen will display The Font Library but it doesn't include this particular title within Edit Styles for Sites. You can manage the different fonts and types in a number of different ways:

  • You can download and manage typefaces you've made.
  • You can use Google Fonts directly within WordPress.
  • Make collections of fonts by using PHP.

To access the Font Library, go to the category for typography within the website Editor sidebar, simply click"Manage Fonts": control the Fonts symbols:

The Typography settings panel within the Site Editor showing font options, including Cardo, Jost, System Sans-serif, and System Serif. A Manage fonts button is highlighted in the top right corner. The panel is displayed alongside a blue website background containing Latin text, demonstrating the applied typography styles.
The manage Fonts icon is located in the WordPress web editor.

This is the place where the tab that is linked to libraries is located. The library tab lists the typefaces that are currently registered in your theme. It also lists the typefaces that are active.

The WordPress Font Library interface displaying installed and theme fonts. Merriweather Sans is listed as an installed font with four active variants. Theme fonts include Cardo, Jost, System Sans-serif, and System Serif, each with their respective active variants.
This is WordPress's Font Library user interface. WordPress Font Library interface.

If you pick one of them, it will let you disable or enable each font.

The Font Library selection dialog box displaying options for the Cardo font family. The dialog shows three variants: Cardo Normal, Cardo Bold, and Cardo Normal Italic, each with a checkbox selected. Above the variants, there's a note cautioning that too many font variants could slow down the website.
The latest fonts that are accessible on the site editor's Font Library.

If you opt for an upload option, you will be able to use an uploader, which permits users the ability to drop and drag documents. You can download your favorite fonts in TTF or WOFF formats, as well as WOFF, and OTF formats.

The WordPress Font Library showing options to install Google Fonts. The search bar lets users find specific fonts, and a list displays various font options including Merienda, Merriweather, and Metal Mania. Pagination controls are visible at the bottom.
It's part of the Google Fonts library within the WordPress Site Editor.

Choose the fonts you want to download from the large list and then click the Download button. Once the notification is successful, the fonts will be displayed on the Library tab:

The WordPress Font Library displaying installed and theme fonts. Merriweather Sans is listed as an installed font with four variants active. Theme fonts include Cardo, Jost, System Sans-serif, and System Serif, each with their respective active variants.
The fonts used on a WordPress instance.

It allows you to use fonts just like every other font you have on your site. After that, you'll have to modify them to fit your needs.

The Style Book

One of the issues with selecting and setting typefaces is that you aren't certain of what the font will look like with color schemes, layouts and other types. The Style Book is invaluable, since it allows you to test the options of typography of various elements.

The WordPress Style Book editor interface showing a blue background with "Code Is Poetry" repeated in different font sizes as headings. The right-hand sidebar displays style options for typography and elements.
The Style Book of the Site Editor.

Clicking on the eye icon will bring up the Style Book, and there five tabs in this Style Book:

  • Text Visit this page for a tutorial on working using headings, paragraphs, and lists, as well as other elements focused on text.
  • Media In this part you can modify the audio and video, as well as the audio and images.
  • Design The page combines basic elements of the site, such as separators, buttons and columns.
  • Widgets The HTML0 widgets have two elements which are shown, such as dynamic generation such as collections of archives or comments. There is also a search bar as well as social media icons as well as tag clouds.
  • Theme It is focused on your header elements for your site such as the title navigation, tagline and your logo.

If you choose one of the options from the Style Book, you have several options in the sidebar. You can set the font settings for every Block, instead of specific elements.

The Style Book showing the Typography settings panel with options for headings and paragraphs. The heading "Code Is Poetry" is displayed in various sizes, with a sample paragraph below. Font customization options are visible on the right-hand side.
There's no limit on how you can alter typography right using Style Book. Style Book.

It is possible to access the similar screens by clicking style>the Blocks section on the Site Editor homepage. Whatever you choose, the choices you see let you customize the typeface (and further) each Block's typeface with exquisite specificity.

The Site Editor offers options for tuning the typography of your site. Site Editor

In every block and element you will find the same options for users to choose from. This is a quick overview of every option on the Panel.

The font's style and size

It is possible that the The Font drop-down menu can be confusing. Select the font you wish to use for the particular block or element:

The Style Book interface displaying a paragraph from Don Quixote and a list of characters from Alice in Wonderland. The right-hand sidebar shows typography settings, including font selection (currently set to Cardo) and various text formatting options. A quote by Julio Cortázar is featured in a blue box at the bottom.
Choosing a font from the available fonts on the Typography tab.

The size settings are the most flexible of configurations available in The Site Editor. Pick a size in a space between small and extra Large.

The Site Editor's Typography settings panel. The font is set to Cardo, size is set to Medium (M), and the appearance drop-down menu shows Regular selected. Line height is set to 1.55, and additional options for letter spacing and letter case are visible.
WordPress offers preset font sizes in the Editor. Editor.

If you make edits to theme.json, you can modify these settings -- but aren't able to utilize the editor for creating Sites. The Customizing Size button offers an option to set the dimensions you desire by using different sizes:

The Site Editor interface showing typography settings for a site. The main text area displays a paragraph in white on a blue background. The right-hand sidebar lets you customize font, size, appearance, and line height, with the Cardo font selected and size set to 1.2 rem.
Choose a font that's custom as well as the device.

There's an array of methods to modify the fonts in the Site Editor. This includes ways that you typically utilize CSS for accomplishing.

Appearance, line height and spacing between letters

The look drop-down menu is simple to select one font from the extensive selection, and then it'll be placed in the text. Most likely, you'll be able to use every typeface that's appropriate to the weight that you choose.

The Appearance drop-down menu within the WordPress Site Editor. The panel is set to Regular. Below it, a line height adjustment control is set to 1.55, with plus and minus buttons for fine-tuning.
The appearance drop-down menu can be found in the WordPress Editor. Editor.

Our tests show that WordPress doesn't filter this list to show the only weights for fonts offered. Additionally, it will apply the concept of "nearest match" when you choose an option that does not match the font. For example, we use, Cardo Normal, Cardo Bold and Cardo Bold Italic for our demo site. If you select Semi Bold, Bold, Extra Bold and Black, you can use the only Cardo Bold:

A GIF of the WordPress Site Editor showing a blue background with a quote from Don Quixote on the left-hand side. The right-hand sidebar shows a user cycling through options within the Appearance drop-down menu.
The font's appearance can be altered inside the WordPress Site Editor. WordPress Site Editor.

Line height does not use the presets feature, but is a balance between the font that you choose for its appearance in addition to the dimension. This value puts the line in a more spacious space and is often a viable option when text is too overcrowded on one line.

A GIF of the WordPress Site Editor showcasing a change in the line height setting within the right-hand sidebar. The main area displays text from Don Quixote and a list of characters from Alice in Wonderland. A quote at the bottom reads, "In quoting others, we cite ourselves."
The line's height is adjustable within The WordPress Site Editor.

The spacing between letters and spaces is the same, and adheres to the CSS practice of expanding the spacing naturally with the following:

The Site Editor Typography sidebar showing the font set to Cardo, with options to adjust size, appearance, line height, and letter spacing. A blue background with white text showcases how the letter spacing (5 px here) appears on the website.
The letter spacing may be extended enough to render the letter difficult to read.

With custom font sizes there are a variety of dimensions of measurement. The relative measure is the most popular choice in this instance. WordPress employs spacing of letters as the CSS default that is "normal." The browser is able to choose the value that according to our experiences, is optimal.

The most common practice is to use smaller positive letters spacings that are generally less than 0.12rem/em with almost no negative space.

The final option, the lettercase - permits users to choose whether to make text lower, upper or sentence cases. Also, you can remove the casing. This can help maintain the text's consistency, as you won't have to use specific casings when writing the text.

What is the best way to utilize theme.json to determine the typeface of your WordPress theme's typography?

This Tool for the Site Editor tool is ideal for users with no technological skills. Its theme.json file is the sole thing you'll need to make sure that the Editor provides users the tools they need to change their websites. The configuration file serves as the foundation for the development of the theme.

The article isn't going to look at the layout or structure which are in the theme.jsonfile, but we'll be looking at the best method to set, define the fonts, then implement them within.

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

JSON is used to describe the elements in theme.json, which includes typography. Its Typography element is contained within the settings element within the file. Following that, you'll need to create additional components, properties, and objects in order to create the layout of 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 whole of the components is based on the same design. The default settings (and the most simple to comprehend) can be described as general setting. They're arranged in a simple fashion, however you could 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" 

The blocks are used for creating an Blocks property. Also, it creates a unique namespace for every Block that you wish to focus on. It also creates two layers of nesting. It is impossible to go wrong using this method. But, there are many properties to explore.

Registration of fonts

  • fontFamily corresponds to that typeface family's the CSS values. This is the set of fonts that you want to incorporate into your theme.
  • name will be the name that appears on the Website Editor after selecting the typeface. It's human-readable.
  • Slug provides an independent CSS property that is able to later be used.

In order to use fonts from the system, this is easy to accomplish:

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

To register your fonts that you have created, make sure make use of FontFace. FontFace property following which you are able to define a few characteristics:

... "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 font's style should be the correct CSS font-style value. "fontStretch": "normal" Additionally, it must be an acceptable CSS font-stretch type. "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats. , ...

After you've created your site, you can now select the Fonts Select your fonts using the drop-down menus within The Site Editor.

A blue background with white text reading CREATE BLOCK THEME in a bold sans-serif font. The words are stacked vertically with CREATE at the top in the largest size, BLOCK slightly smaller in the middle, and THEME smallest at the bottom.
The Create Block header image used for the theme was straight from WordPress.org.

It's a boilerplate you can make use of when creating themes, but it permits you to register and define typography too. Once you've registered the fonts that you want to utilize in a way that you believe is appropriate (we would recommend that you use our Font Library), you can look at the sizes.

The process of preparing size and fonts in theme.json

Another important aspect of typography is the determination of the font size. This is accomplished by using the property known as"the FontSizes property which permits users to specify particular fonts, which have been pre-defined to be used in the Site Editor.

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

Like other settings for typography, WordPress will generate a distinct CSS property for each preset, based on the name that you provide:

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

WordPress disables the fluid typography feature on default. But, it is possible to turn off the feature by using boolean values. You can set the font to an overall angle...

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

...or to each preset size and type that you decide to define:

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

The maximum and minimum values along with maximum numbers let you know the limits to scalability which are applicable to each size of font you decide to define.

Utilizing the latest fonts as well as typography techniques.

theme.json theme.json provides a wide range of options like those available within the site editor. You are able to change the fonts you use on your site by adjusting the fonts that are default to fit your theme:

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

You can choose to activate or disable these choices. Every option is a binary value that allows users to modify choices using the Site Editor as well. There are several changes you can make that go in addition to the options offered by Site Editor:

  • customFontSize is turned on by default and lets users input specific font sizes -However, it is possible to switch off the feature if you want to tightly control the possible choices.
  • dropCap is set to false as default. However should you decide to activate it, you'll can turn drop caps to the initial letter in each paragraph block.
  • textColumns enables an "columns" option to every word in the Block that can be disabled by default.
  • writingMode allows you to change the orientation of text within the Site Editor. The feature allows users to make the option of choosing between horizontal or horizontal text.

The vast array in theme.json means you need to start there when you are beginning your process of developing themes. The choices available with Site Editor let you and your customers modify WordPress typography.

How to best integrate typography into a theme.json A Study of a case

FSE allows you to create and build with WordPress easier than it previously was. Additionally, the basic choice and use of fonts is made easier. A large part of that is due to changes in fashions in design. However, there are also tools that can help make up for the absence of a graphic designer who is available.

We'll start by focusing on the fonts you are using most often.

1. Combining typefaces and styles to create a harmonious look.

Actually, because of new designs, there's less effort required. This is because the body text can employ typefaces that belong to the system, specifically the primary operating system (OS) font. All you need to decide on is choosing a font which is compatible with it.

This isn't a tutorial on pairing different types. Here are a few suggestions:

  • OS typefaces that are used in body copy typically are sans-serif. This means that you must search for serif typeface or sans-serif fonts that look like an alternative, however distinct and distinctive.
  • The less complicated, the better. maybe it is better to stick with the OS font if it fits in the style.
  • Explore different combinations as you will get familiar with the fonts that perform best (and those that don't).
The Google Fonts website displaying the Playfair Display font specimen. The sample text reads, "Whereas disregard and contempt for human rights have resulted" in various sizes. Options for specimen, type tester, glyphs, and about, and license are shown, along with a Get font button.
This is Google's Fonts sample webpage to be used for Playfair Display.

If you're using a variety of fonts, be aware of the dimensions they have in relation to one another, not just in relation to each other.

2. Find the right relative or absolute size

The correct size of font is essential as the use of incorrect absolute sizes can cause a negative experience for users. This is also a place where it is possible to choose the default fonts. We advise that users enjoy playing with the fonts since each pair has their own "space" for displaying the fonts.

Typescale is a great tool for making the best WordPress typography no matter what you need it to do:

The Typescale web app interface for customizing typography. The left-hand panel shows font settings, while the right-hand side displays a preview of different heading sizes and a sample landing page design.
The Typescale website.

One of the greatest tools is the scale choices. It will work through the option to pick different font sizes. The font we choose is Major Third as our Major Third scale. This font has an average of 1.2 and a base dimensions of sixteen pixels.

A typography scale interface from Typescale, displaying various heading sizes for
There are many ways to scale fonts in Typeface.

On the center of the screen, you will notice the size that's been calculated for every heading or paragraph. You can then pick from various sizes. Note that Typescale can be adjusted to change the spacing of letters, line size, weight of the font, and many more. These are all adjustable within theme.json.

3. The defaults applied within theme.json

When you've got the correct font and size Once you have the right font and size, you can incorporate them into the theme.json file. This is an example of the typical theme.json file will look similar to:

 "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)" 

It is important to use the exact typeetters for every Block, and think about how to style each heading in a distinctive style. You should ensure that you use a similar and top-quality WordPress typography, which can be the base of the theme's style. It will help create a uniform design across your sites. Site Editor offers users more flexibility and the option to change.

Its function is an essential part of its function in the WordPress workflow for design.

An artistic illustration of the Dev logo. It depicts a person working at a computer in a dark environment. The image uses shades of blue and purple, showing hands typing on a keyboard and adjusting equipment. A monitor displays a stylized K logo.
The Dev logo.
The My interface showing a Push to Live dialog box. Options to push files and databases from staging to live environment are presented, with checkboxes for specific files, folders, and database tables.
It is a single push.

Summary

FSE is maturing as is theme.json is central for all WordPress editing. Typography is an important factor when it comes to this also. WordPress gives developers the tools they need and also access to functions that need the use of CSS in addition to PHP.

With the Site Editor's intuitive interface as well as the capability to adapt that's theme.json, you are able to create an ideal typeface for your website, which enhances its visual appeal and matches the branding of your business and improves your user experience.

We'd like to hear your thoughts on WordPress typography and how FSE might be the key to your success. Share your thoughts with us in the comments section below.

Jeremy Holcombe

Senior Editor of WordPress Web Developer as well as Content writer. In addition to everything that is related to WordPress I enjoy playing golf or at the beach as well as watching films. In addition, I'm struggling in height.

The post first appeared here. this site

Article was posted on here