Estimated reading time: 5 minutes
In this second typography lesson, I bring up the theme.json font style settings as well as line height, font weight, and text decoration settings.
Prerequisites: Global Styles & theme.json.
Last updated
Line height
The custom line height is one of the theme.json settings that are not experimental. WordPress supports it without the Gutenberg plugin active:
-In comparison to the font family and font size, it is not possible for developers to choose the values that should be available in the line height control. You can only enable or disable the theme.json line height.
The control starts at the default value: 1,5, and the value is unitless. The lowest possible value is 0, and there is no upper limit. Meaning, you can not use negative values.
This setting is the equivalent of add_theme_support( 'custom-line-height' );.
The learn which blocks support the line height control please see the block reference.
The global styles disable the custom line height by default. You can enable the control by setting typography.lineHeight to true, or, by enabling the appearanceTools.
{
"version": 2,
"settings": {
"typography": {
"lineHeight": true
}
}
}Use the following example to add support for line height to a single block:
{
"version": 2,
"settings": {
"blocks": {
"core/site-tagline": {
"typography": {
"lineHeight": true
}
}
}
}
}Or enable it on the root level and disable it for a specific block:
{
"version": 2,
"settings": {
"typography": {
"lineHeight": true
},
"blocks": {
"core/site-tagline": {
"typography": {
"lineHeight": false
}
}
}
}
}Drop cap
The drop cap is a text setting that is only enabled for the paragraph block. The first letter of your text is capitalized and enlarged:
To disable the drop cap, set the value of settings.typography.dropCap to false:
{
"version": 2,
"settings": {
"typography": {
"dropCap": false
}
}
}The drop cap is different from the other typography features because it is a block attribute, not a block support.
There is no way to set the position or size of the drop cap using theme.json without using custom CSS. To style the drop cap, you can use the .has-drop-cap:not(:focus):first-letter CSS selector.
The font appearance setting
In the appearance control, you can now select different combinations of regular, italic, and font weights:
Blocks enable this control with two separate block supports: __experimentalFontWeight and __experimentalFontStyle. It is possible for a block to support one but not the other.
Note that if you disable font weight and font style for a text block like a heading, the block toolbar will still have the bold and italic styles available.
Font weight
Font weight is enabled by the block editor by default, and you can select between these values:
- Thin: 100
- Extra Light: 200
- Light: 300
- Regular: 400
- Medium: 500
- Semi Bold: 600
- Bold: 700
- Extra Bold: 800
- Black: 900
Unfortunately, ot is not possible to limit the font weights to those supported by the current font family.
Many users have requested this feature, but the development team has not built it into Gutenberg yet.
You can disable the font weight control for all blocks with the following code in theme.json:
{
"version": 2,
"settings": {
"typography": {
"fontWeight": false
}
}
}And for a single block:
{
"version": 2,
"settings": {
"blocks": {
"core/site-title": {
"typography": {
"fontWeight": false
}
}
}
}
}Font Style
You can turn off the font style (italic) for all bocks by setting typography.fontStyle to false in theme.json:
{
"version": 2,
"settings": {
"typography": {
"fontStyle": false
}
}
}How to turn off font style for a single block:
{
"version": 2,
"settings": {
"blocks": {
"core/site-title": {
"typography": {
"fontStyle": false
}
}
}
}
}Text transform
The text transform control inside the typography panel includes the option to change the text to uppercase, lowercase, or capitalized:
It is enabled by default, and you disable it by setting typography.textTransform to false:
{
"version": 2,
"settings": {
"typography": {
"textTransform": false
}
}
}Example of how you can disable it for a single block:
{
"version": 2,
"settings": {
"blocks": {
"core/site-tagline": {
"typography": {
"textTransform": false
}
}
}
}
}Letter-spacing
The letter-spacing setting is enabled by default, and you disable it by setting typography.letterSpacing to false.
{
"version": 2,
"settings": {
"typography": {
"letterSpacing": false
}
}
}Example of how you can disable it for a single block:
{
"version": 2,
"settings": {
"blocks": {
"core/site-tagline": {
"typography": {
"letterSpacing": false
}
}
}
}
}Text decoration
You can use the text decoration control to add an underline or a line through the text.
Supported by navigation, post title, and read more.
This setting can lead to unexpected results such as duplicate underlines if the theme is also styling link underlines.
If you want to disable the text decoration option, set typography.textDecoration to false:
{
"version": 2,
"settings": {
"typography": {
"textDecoration": false
}
}
}Applying typography styles with theme.json
These code examples assume that your theme has all typography settings enabled.
You can add typography styles for the website and as defaults for all blocks in the root level of the styles section in theme.json:
{
"version": 2,
"styles": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
}
}
}Expand to view an example structure with elements (links and headings)
I included the H1 heading in the example. To add support for more headings, repeat the styles for level H2 to H6.
{
"version": 2,
"styles": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
},
"elements": {
"link": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
}
},
"h1": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
}
}
}
}
}You add styles for individual block types under styles.blocks.blockname.typography:
{
"version": 2,
"styles": {
"blocks": {
"core/site-tagline": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
}
}
}
}
}Expand to view an example structure with a single block and elements (links and headings)
I included the H1 heading in the example. To add support for more headings, repeat the styles for level H2 to H6.
{
"version": 2,
"styles": {
"blocks": {
"core/site-title": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
},
"elements": {
"link": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
}
},
"h1": {
"typography": {
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
}
}
}
}
}
}
}Resources
The typography block support section in the block reference.