Format text

The Typography panel formats the text of a block: font, size, weight, case, line height, underline, shadow and orientation. This article describes each setting. You will also learn how to set the base size of the page and how to mark a passage written in another language.

Open the Typography panel

1. Select a block that holds text, for example a heading, a paragraph or a button.
2. In the inspector, open the Styles tab.
3. Expand the Typography panel if it is collapsed.

The panel has the Font list, the Font size list and the Styles row, each of whose buttons opens a setting. Depending on the block, some settings are not displayed.

Like any setting of the Styles tab, typography is set per state and per screen. Find your way around the editor describes the row of states and the row of screens.

Understand inheritance

A new block imposes nothing. Each setting takes the value of the block’s style, then that of the page. You set only what must change.

An icon appears next to Font, Font size or Styles when a value differs from the inherited one. The circular arrow restores the style’s value. The crossed-out circle removes the inherited value. The trash can removes your value. On the Styles line, the icon acts on all the settings of the row at once.

A button in the Styles row shows the value in effect, the style’s included. A text can therefore appear in bold without any setting from you: the weight comes from its style.

Choose the font

1. Open the Font list. Each font is displayed in its own typeface.
2. Choose a font installed on your site. Default restores the font of the block’s style.

A block that carries a product style, such as Heading 2, shows Heading font, the font your site’s design assigns to headings. A paragraph shows Default: it takes the font of the page’s texts. Choosing a font in the list replaces it on that block only.

Choose the size

1. Open the Font size list.
2. Choose a size. Default restores the size of the block’s style.

Each size is displayed by its value, for example 1rem or 14px. A fluid size shows its two bounds. The list sorts sizes by unit, px then em then rem, then by increasing value.

Create a size

1. Next to Font size, click New (+).
2. In the Size field, enter the value and choose its unit: px, em or rem.
3. Click Save. The size applies to the block and joins the list for all the blocks of the site.

For a large heading that grows with the screen, check Fluid. The Minimum, Preferred and Maximum fields then replace the size. The preferred size usually combines two values, for example 2rem + 3.6vw, with the ƒ button Combine two values with calc(). Without the three values, the form answers Set the three sizes (minimum, preferred and maximum) as lengths or formulas.

Edit a size

Only the site’s administrators see New and Edit: other roles choose a size from the list.

The Edit button (pencil) appears when a size is chosen. The new value applies to all the blocks that use that size. The form reminds you Your changes will apply to every block that uses it.

Two sizes never carry the same value. A size with a value already taken is refused with a message like 1rem already exists. Pick that value instead. 1rem and 16px are two different values: the first follows the page’s base size and the second does not.

The scale shipped with your site

Each site starts with ten sizes in rem. 1 rem is the base size of the page, which is 16 px for almost all visitors. A design from the catalog can change these values.

The 6xl step is for the short heading of an opening, a few words in very large type. A size shipped cannot be deleted and keeps its step name when its value changes. Its variable can be reused in Add advanced CSS.

The settings of the Styles row

Each button in the row opens a small menu. A pressed button signals an active value. By default, all the settings take the inherited value.

Create a text shadow

A text shadow is an entry of the design system: you create it once and apply it to as many texts as you want. Your site has none at the start.

1. In the Styles row, click Text shadow, then New (+).
2. Enter a Name. It is required.
3. In Layer 1, set the X and Y offset in pixels, the Blur and the color.
4. To stack a second effect, click Add layer. A shadow has up to eight layers, which Move up and Move down reorder. The first layer is painted on top.
5. Click Save. The shadow applies to the text.

A text carries a single shadow. For a different shadow on hover, choose another one on the Hover state. The Edit button changes the shadow for all the texts that carry it.

A text shadow has no spread or inner shadow. An empty name or a layer that sets nothing is refused, with Name is required. or Give every layer an offset, a blur or a color.

For example, a white heading on a busy photo stands out with two layers: the first sharp, short and dark and the second wide and very blurred.

Set the page’s base size

The sizes of the scale in rem are calculated from the page’s base size. Changing that size enlarges or reduces all the text of the site, in the same proportions.

By default, the page is 1rem: the text size the visitor chose in their browser, 16 px for almost everyone. A person who asked for larger text sees your site larger. The layout holds, since all the sizes grow together.

Fix the base size

For a layout that must not move, for example a large heading set on one line, give the page a fixed size in pixels.

1. Open Appearance > Preview and select the Body block, which wraps the whole preview.
2. In the Styles tab, Typography panel, click the New (+) of Font size and create a size of 16 px. If the form answers that 16px already exists, choose that size in the list.
3. In the Styles list, on the row of the Page style, click Update. Leave the Typography group checked, then click Yes, update. The update is prepared.
4. In the Design catalog sidebar, click Apply this design to the whole site then Yes, apply. The page reloads.

The preview saves nothing before Apply this design to the whole site, neither the size created nor the update of the Page style. If you leave the page before, the browser warns you and these changes are lost. Once the design is applied, the browser zoom still enlarges the whole site.

To return to the default size, click Delete (trash can) on the row of the Page style, then Yes, reset. Then apply the design.

Mark a passage written in another language

A screen reader pronounces a page in the language it declares. An English quote in a French text is read with French sounds. Marking its language makes it use the right pronunciation, for the length of the passage.

1. Select the passage, down to the word, without the French punctuation around it.
2. In the block’s toolbar, click Language of this passage.
3. Enter the language code in Language code, for example en, then click Apply. On a multilingual site, a click on one of the languages, under the field, applies its code.

To remove the marking, place the cursor in the passage, click Language of this passage again then Remove.

• The code starts with two to eight letters, followed or not by a region: en, de, es, pt-BR. Apply stays grayed out until the code has that form.
• The field accepts a language that your site does not publish.
• The tool is available in a paragraph, a heading, a list, a simple block, a table cell and a button. The label of a menu link, of a form field or form button and the buttons of the consent banner do not offer it.

A word that has entered everyday usage, like “weekend”, does not need to be marked. Marking is for a quote, the title of a work or a foreign proper name.

See also

• Color a block
• Set your colors, fonts and scales
• Save a block’s style
• Space out your blocks