Appendix | Font-Weight and Non-breaking Spaces

The options detailed below are available for Title, Paragraph, List, and Button content blocks.

Font-weight

A font family's applied font-weight directly impacts brand communication. Typically, brand guidelines provide specific use cases for a given font-weight to predictably contrast, emphasize and contextualize content. For example, a font family using the "Extra light" weight is often used to call out details not presented with the "Regular" variant.

These guidelines often create a need for multiple versions of the same font within a single design. With our font weight control feature, this is achievable within the builder

Title blocks using different weights variants for the Oswald font family

Font-weight values are not available for all fonts. Each font family has a set of defined weights that may be distributed across different font files or provided by a single file.

Font-weight settings are managed via the same editor configuration settings that you use to configure custom fonts. The widget displays only "Regular" and "Bold" as available choices if no options are specified.

The new font-weight selector

What's the difference between the font-weight and the bold option in the text toolbar?
The text toolbar that floats on top of the selected content block applies semantic styles to selected characters, while the options in the sidebar apply to the whole content block.

This title uses the Extra-light variant of the Oswald font family, but the bold style has been applied to "semantics" to highlight it.

Non-breaking space

Non-breaking spaces look exactly like standard spaces but act like a magnet between two words. While traditional spaces may add a line break in an undesirable location (for example, between a two-word phrase like “thank you”), a non-breaking space will keep those two words together. If they do not fit together in one line, a non-breaking space will move them to the next line.

The non-breaking space option in the Title text toolbar

Essentially, the non-breaking space adds a control layer over text rendering when a horizontal space constraint is present.

There are two main reasons that this may happen:

• A web font fails to load, a common issue with some email clients (e.g., Gmail).

• The mobile viewport forces the text to break into multiple lines.

A title that splits into two lines when displayed on mobile

The same title with nonbreaking spaces applied between some words

Changes to existing elements

Consolidated text controls for buttons

We've added the font-weight and font-family properties to the Button content block to provide a more solid experience when editing button labels. This change adopts the same UI disposition presented in the Title block, which has performed well in user tests. We've added these properties as drop-down menus to the content tab of the sidebar.

In addition, the text toolbar has changed by adopting a more compact layout displayed in two lines. We've also enhanced the toolbar with support for merge tags, symbols, and the non-breaking space option.  

Host Application Configuration Changes

Client-side Configuration

The host application must specify an editor configuration to enable a specific font family's font-weight. If no fontWeight property is defined in customFont, only "Regular" (400) and "Bold"(700) will display in the drop-down menu in the content tab of the sidebar.

Here is an example of customFonts property inside the editorFonts object:

// ...
editorFonts: {
  customFonts: [
    {
      name: "Comic Sans MS",
      fontFamily: "'Comic Sans MS', cursive, sans-serif"
    },{
      name: "Indie Flower",
      fontFamily: "'Indie Flower', cursive",
      url: "https://fonts.googleapis.com/css?family=Indie+Flower"
    },{
      name: "Roboto",
      fontFamily: "'Roboto', sans-serif",
      url: "https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap",
      fontWeight: {
        100: 'Thin',
        300: 'Light',
        400: 'Regular',
        500: 'Medium',
        700: 'Bold',
        900: 'Black',
      }
    }
  ]
}
// ...