A revolutionary approach to WordPress typography using theme.json

-sidebar-toc> -language-notice>

Words form the foundation of the Internet despite the variety of digital media. This means the fonts you select for your site will be an essential element of your layout and design.

WordPress typography has the ability to inspire moods, help with branding, and much more. Full editing on the web (FSE) is a feature of WordPress puts customizing this typography at the fingertips of users. In addition, WordPress' theme.json file helps the developers create WordPress themes that take advantage of this feature.

This article explores WordPress typography, including FSE and theme.json. However, the discussion is also a discussion of key factors like the typeface you are using and the technical elements to be considered as well as the direction to follow for how we use typography in the design.

Typeface on the web A brief history

In a look at the initial designs of web You will see that despite the diversity in design the fonts were uniform in appearance. It was because of accessibility, and also the requirement. If you don't have modern technology internet, the words you see on the web could be limited to fonts that are installed on your computer.

The middle-to-late '90s "web user" had only a handful of predictable typefaces: Times New Roman, Arial, Helvetica, Georgia and Verdana. Two of them are Microsoft commissions that render perfectly suitable for use on the internet regardless of time.

WordPress and typography

Current default themes use traditional font stacks for an elegant, contemporary and professional presentation. Older default themes use pairings like Noto Sans as well as Noto Serif (for Twenty Fifteen) and Montserrat as well as Merriweather (for Twenty Sixteen).

For a visual representation of this typeface "circle of the world", Twenty Sixteen uses Helvetica and Georgia as options for fallback. The twenty Ten default theme uses Helvetica, Arial, and Georgia:

Although these options provide the basis to WordPress style within every theme, they could encourage you to take note of your use of the use of typography. This can be something WordPress FSE is able to help you with.

A quick overview of all editing of the site along with theme.json

The style of your site offers unified choices in a number of ways:

• This editing technique is one by Blocks for the entire website, not just your content.
• Template libraries are an integral element of configuration, allowing users to edit these templates using identical tools that you used to create the content you have created.
• Styling also happens within the Site Editor and offers a general setting of the style.
• Editing sites doesn't require any codes to use one of the options that are available. It's an intermediary between development and design.

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 it's a possibility for the vast majority of webmasters. It's a central configuration file that manages your styles and settings.

Every setting depends on value:key value:option that allows you to apply this using a range of methods:

• Defining global color palettes.
• It is the process of setting up font families and sizes.
• Modifying block-specific style.
• Controlling spacing and layout preference.

Typography can be set in the WordPress Site Editor

If you're comfortable with the way to utilize the Block Editor you are able to make use of it in conjunction with the Site Editor. In WordPress, navigate through the layoutand after that, the editor screen. The screen that displays is the home screen of the Editor for Site:

The Styles display on the left of the navigation offers you a variety of styles that are global such as fonts that alter:

In the majority of cases, individual settings for various aspects of typography may be the best option. 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.

In addition, you have the ability to define typography choices at the element level, and for each Block.

The Font Library Font Library

This edit styles>>> Typography screen will display The Font Library but it does not include this particular title within the Editor for Sites. This lets you handle types and fonts using a number of different ways:

• It is possible to upload and manage typefaces that you've created.
• You can use Google Fonts directly within WordPress.
• Create collections of fonts by using PHP.

To access the Font Library, go to the section for Typography within the site Editor sidebar, simply click"Manage Fonts": manage Fonts symbol:

This is where the tab for the library tab displays the typefaces that are currently registered with your theme. It also shows what typefaces are currently active.

If you select any of them, it lets you enable or disable the individual fonts.

When you select the upload option, can use an uploader, which permits you to drag and drop your files. Download your preferred fonts in TTF, WOFF, WOFF2 as well as OTF formats.

Choose the fonts that you would like to download from the extensive list and then click the Download button. When the successful notification appears the fonts will appear on the Library tab:

It allows you to use fonts just like every other font you have on your website. Then, you need to customize them to fit your needs.

The Style Book

One of the challenges in choosing and setting typefaces is that you aren't sure what it's going to look like with color schemes, layouts and other formats. The Style Book is invaluable, as it permits you to preview the typography options for various components.

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

• Text: Go here for a tutorial on working with paragraphs, headings and lists, as well as other elements focused on text.
• Media In this section, you modify the video as well as the images and audio designs.
• Design The section combines the structural elements, including buttons, separators and columns.
• Widgets The HTML0 widgets include two components that are displayed, including dynamic generation, such as collections of archives or comments. Also, there is an search bar, social media icons, and tag clouds.
• Theme It is focused on your header elements for your site such as the tagline, title navigation, and logo.

If you select any of the options in the Style Book, you have several options in the sidebar. You can set the font settings for every Block here instead of particular elements.

You can arrive at the identical screens by clicking the style>the Blocks section on the Site Editor homepage. No matter what you select, the choices you see let you customize the typeface (and further) for every Block with fine detail.

Typography tuning options in the Site Editor

In every block and element there are the same core options available for the user. Here is a brief overview of every option in the Panel.

The font's type and size

The Font drop-down menu can be a bit confusing Select the font you wish to use for the particular block or element:

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

If you edit theme.json, you can modify these settings -- but aren't able to use the Editor to create Sites. The setting custom Size button offers an opportunity to specify the dimensions you desire by using a variety of size units:

There's an array of methods to alter typography in the Site Editor. This includes ways that you would normally use CSS to accomplish.

Appearance, line height and spacing between letters

The appearance drop-down menu is simple to select one of the fonts from an extensive list and then it'll be added to the text. It's likely you'll be able to use every font that is appropriate for the weight that you choose.

The tests we ran show that WordPress doesn't filter this list to show the only weights for fonts available. Furthermore, it'll apply the term "nearest match" when you choose a weight without a matching font. For example, we use, Cardo Normal, Cardo Bold and Cardo Bold Italic for our demonstration site. If you select Semi Bold, Bold, Extra Bold and Black, it is possible to use only Cardo Bold:

Line height does not use the presets feature, but is a balance between the font you pick in terms of appearance, as well as size. This value puts more space between each line and is often an effective option when text is too crowded in one row.

The spacing between letters and spaces is identical, and adheres to the CSS practice of expanding the spacing naturally in place:

With custom font sizes there are a variety of dimensions of measurement. A relative measurement is the most common selection in this case. WordPress uses the letter spacing as to a CSS default value of "normal." The browser is able to select the one that, from our experience it is optimal.

It's common usage to employ small positive letter spacing values generally not greater than 0.12rem/em with almost no negative spacing.

The final choice - the letter case - allows the user to decide whether you want to have text lower, upper or sentence cases. Also, you can eliminate casing. This can help maintain the consistency of text, as you won't have to make use of a particular casing when creating the content.

What is the best way to use theme.json to identify the typeface of your WordPress theme's typography

The Tool for the Site Editor tool is ideal for people who do not have any technological knowledge. Its theme.json file is the only thing you require to make sure that the Editor provides users the tools they need to alter their website. The configuration file is the basis for developing the theme.

The article isn't going to examine the layout or structure that are contained in the theme.jsonfile, but we'll be looking at the most effective way to define, set the fonts, and then apply them within.

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

You use JSON to define all elements within theme.json, which includes typography. Its Typography element is located inside the settings element within the file. After that, you'll need to add other elements, properties and objects in order to design your site'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 entirety of the elements is based on the same pattern. The defaults (and the most simple to grasp) are described as the global settings. They're arranged in a simple manner, 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" 

The blocks are used to create a Blocks property. It also creates a unique namespace for every Block you wish to focus on. In addition, it creates two layers for nesting. you can't go wrong with this strategy. But, there are many properties to explore.

Registration of fonts

• fontFamily corresponds to that font family's the CSS values. This is the set of typefaces you wish to include in your theme.
• name will be the title that you will see on the Website Editor after selecting the font. It is human-readable.
• Slug adds an individual CSS property that can be used later on.

To use system fonts, this is easy to do:

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

In order to register your custom fonts, make sure make use of the FontFace property after which you can define some 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 font style must be the correct CSS font-style value. "fontStretch": "normal" Also, this must be an acceptable CSS font-stretch style. "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 the Fonts Select your fonts from the different drop-down menus within The Site Editor.

It's a boilerplate you can utilize in the creation of themes however, it also allows you to register and define typography too. After you have registered the fonts you wish to use in a manner which you think is suitable (we suggest using the Font Library), you have the ability to look at the dimensions.

The preparation of fonts and sizes in theme.json

The other major task of typography is determining the size of fonts. It is done with the help of an attribute known as"the FontSizes property which permits users to specify specific fonts that are pre-defined for the Site Editor.

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

As with other typography settings, WordPress will generate a distinctive 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 as default. However, you can switch this off with boolean value values. It is possible to set the font at an overall degree...

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

...or for every preset size and type you define:

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

The max and min value as well as maximum numbers will let you know the limits to scalability which are applicable to each font size that you choose to set.

Utilizing the latest fonts and typography techniques.

The theme.json provides a full complement of options, comparable to those accessible within the site editor. It lets you alter the fonts used on your site by adjusting the default fonts suitable for your theme:

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

You can choose to either enable or deactivate these options. Each option is a binary value that allows users to modify options using the Site Editor too. There are a number of modifications you could make beyond the Site Editor's offerings:

• customFontSize will be turned on by default and lets users input custom sizes of fonts -- but you can switch it off if wish to tightly control the possible options.
• dropCap is set to false by default however, if you choose to enable it you have the option of turning on drop caps for the first letter of each paragraph blocks.
• textColumns enables an "columns" option to each text in a Block that can be disabled by default.
• writingMode lets you change the orientation of text within the Site Editor. It allows users to have a selection between vertical or horizontal text.

The wide range of theme.json means you need to start there when you begin your process of developing themes. The options available through the Site Editor lets you or your users edit WordPress typography.

The best way to incorporate typography with theme.json A case study

FSE lets you design and develop via WordPress easier than it ever been. Additionally, the basic selection and application of the fonts is made easier. A large part of this is due to the evolution of the latest trends in design, however there are tools to help fill those gaps in the absence of a graphic designer on hand to assist.

Let's start with the fonts you are using most often.

1. Combine typefaces with complementary styles

Actually, because of new trends in design, there's less effort required. The reason is that the body text can employ typefaces that are part of the system, specifically the primary operating system (OS) font. The only thing you have to do is choose something that works alongside it.

This isn't a tutorial on the pairing of types. But, here are some tips to offer:

• OS typefaces that are used in body copy usually are sans-serif. That means you should look for serif typeface or sans-serif font that appears like an alternative, however is distinctive and is distinctive.
• The simpler the better, maybe it is best to use only the OS font if it fits in the style.
• Explore different combinations as you will get familiar with the typefaces that work best (and which do not).

If you have a couple of fonts, be aware of their dimensions relative to one another, not just in relation to one another.

2. Find the right relative and absolute sizing

The right font size is crucial as the use of incorrect absolute sizes can ruin the experience for users. It's also an area where you may want to use the default fonts. We recommend that users have fun playing around since each pairing will possess their own "space" to display the fonts.

Typescale is a great tool for making the best WordPress typography, regardless of what you need it to do:

One of the greatest tools is the scale choices. The tool basically completes it's work through the option to pick different font sizes. The font we choose is Major Third as our Major Third scale, which has a rate of 1.2 as well as a base size of 16px.

On the center of the screen, you will find the size that has been calculated for every paragraph or heading, and then pick from various sizes. Take note that Typescale can also be adjusted to change the spacing of letters, line size, weight of the font, and more: all easily adjustable within theme.json.

3. The defaults that are applied inside 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. Here's an example of how 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 same typeetters for each Block, and think about styling each heading in a distinctive fashion. Be sure to have an identical and high-quality WordPress typography that can form the base of the theme's style. This will create a consistent style across all your websites. Site Editor gives the user more freedom as well as the ability to modify.

Its function is an essential component of its role in WordPress design workflow.

Summary

FSE is maturing as is theme.json is central to all WordPress editing. Typography is a critical factor with regard to this as well. WordPress offers developers tools as well as access to features that require a base in CSS in addition to PHP.

The Site Editor's user-friendly interface, and the ability to adapt that's theme.json, you are able to create the perfect typography for your site that enhances its aesthetic appeal, and is consistent with the logo of your company and enhances the general user experience.

We'd like to hear your thoughts on WordPress typography and if FSE could be the key to your achievement. Share your thoughts with us via the comments below.

Jeremy Holcombe

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

•       LinkedIn

This post was first seen on here