Button blocks with custom typography settings

Default plus custom line-height

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Default font choices from the theme</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Line height: 3 (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"lineHeight":"3"}}} -->
<div class="wp-block-button" style="line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"lineHeight":"3"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline" style="line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Line height: 3 (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"lineHeight":"3"}}} -->
<div class="wp-block-buttons" style="line-height:3"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

More typography settings

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Default font choices from the theme</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Line height: 3 (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"lineHeight":"3"}}} -->
<div class="wp-block-button" style="line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"lineHeight":"3"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline" style="line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Line height: 3 (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"lineHeight":"3"}}} -->
<div class="wp-block-buttons" style="line-height:3"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Appearance: Light Italic (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"fontStyle":"italic","fontWeight":"300"}}} -->
<div class="wp-block-button" style="font-style:italic;font-weight:300"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"fontStyle":"italic","fontWeight":"300"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline" style="font-style:italic;font-weight:300"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Appearance: Light Italic (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"fontStyle":"italic","fontWeight":"300"}}} -->
<div class="wp-block-buttons" style="font-style:italic;font-weight:300"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Letter spacing: 2px (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"letterSpacing":"2px"}}} -->
<div class="wp-block-button" style="letter-spacing:2px"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"letterSpacing":"2px"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline" style="letter-spacing:2px"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Letter spacing: 2px (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"letterSpacing":"2px"}}} -->
<div class="wp-block-buttons" style="letter-spacing:2px"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Text decoration: Underline (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"textDecoration":"underline"}}} -->
<div class="wp-block-button" style="text-decoration:underline"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"textDecoration":"underline"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline" style="text-decoration:underline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Text decoration: Underline (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"textDecoration":"underline"}}} -->
<div class="wp-block-buttons" style="text-decoration:underline"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Letter case: Uppercase (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"textTransform":"uppercase"}}} -->
<div class="wp-block-button" style="text-transform:uppercase"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"textTransform":"uppercase"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline" style="text-transform:uppercase"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Letter case: Uppercase (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"textTransform":"uppercase"}}} -->
<div class="wp-block-buttons" style="text-transform:uppercase"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: theme's Large (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"fontSize":"large"} -->
<div class="wp-block-button has-custom-font-size has-large-font-size"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","fontSize":"large"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-large-font-size"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: theme's Large (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"fontSize":"large"} -->
<div class="wp-block-buttons has-custom-font-size has-large-font-size"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: custom 1.5em (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"fontSize":"1.5em"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:1.5em"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"fontSize":"1.5em"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-font-size is-style-outline" style="font-size:1.5em"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: custom 1.5em (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"fontSize":"1.5em"}}} -->
<div class="wp-block-buttons has-custom-font-size" style="font-size:1.5em"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: theme's Large <em>with</em> line-height of 3 (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"lineHeight":"3"}},"fontSize":"large"} -->
<div class="wp-block-button has-custom-font-size has-large-font-size" style="line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"lineHeight":"3"}},"className":"is-style-outline","fontSize":"large"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-large-font-size" style="line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: theme's Large <em>with</em> line-height of 3 (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"lineHeight":"3"}},"fontSize":"large"} -->
<div class="wp-block-buttons has-custom-font-size has-large-font-size" style="line-height:3"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: custom 1.5em <em>with</em> line-height of 3 (for each Button block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"typography":{"fontSize":"1.5em","lineHeight":"3"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:1.5em;line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"typography":{"fontSize":"1.5em","lineHeight":"3"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-font-size is-style-outline" style="font-size:1.5em;line-height:3"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Font size: custom 1.5em <em>with</em> line-height of 3 (set on the Buttons block)</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"fontSize":"1.5em","lineHeight":"3"}}} -->
<div class="wp-block-buttons has-custom-font-size" style="font-size:1.5em;line-height:3"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->