All about text: titles, paragraphs & quotes

You use text to speak to your audience. We have three different text elements: titles, paragraphs, and quotes. In this article, you'll learn how to add and style them.

What are titles, paragraphs, and quotes?

There are three different text elements: titles, paragraphs, and quotes. You can drag and drop each of these elements into your column. We go over each of these elements below.

• Title

  The title element can be used to add a title to a column. A title element will appear on the page as H1, with the layout set for H1 in the brand settings.

  When you click on the text of the title, the text editor options will open in a bar at the top of the page with several styling options. From there, you can choose a different heading as well.

  
  

• Paragraph

  The paragraph element will appear on the page with the layout that is set for paragraph in the brand settings.

  When you click on the text of the paragraph, the text editor options will open in a bar at the top of the page with several styling options. From there, you can choose a different text option as well.

  

  ⚠️ Make sure that every paragraph of text has its own paragraph element and that every title has its own title element. This will prevent formatting issues.

  

• Quote

  A quote is used to emphasize words, usually from a statement someone made. Quotes generally appear in large font and have “ “ signs at the beginning and end. You can set global styling for quotes in the brand settings. 

  When you click on the text of the quote, the text editor options will open in a bar at the top of the page with several styling options. From there, you can choose a different text option as well.

  
  

The text editor

When you click on a text element, the text editor bar will appear at the top of your screen. From there, you can change the font and style it to your liking. We go over the different options in the settings bar below.

The text editor bar at the top of your screen enables you to set the following text styling:

• Text type: select from the list to set your text to paragraph, headings, quote etc.

• Font: select the font you want to apply to your element.

• Font size: set the font size of your text.

• Bold: set your text to bold.

• Italic: set your text to italic.

• Underline: underline your text.

  💡 As of yet, we do not support subscript. However, it is possible to use a third-party site to create the subscript text. From there, you can copy and then paste it into your Foleon Doc. For example, you can use smalltext.io

• Color: change the color of your text.

• Insert link: select a part of your text and create a link. From text, you can link to an External URL, Page, Overlay, Document, Block, and Cookie consent. You can later always edit the link by clicking on the small pencil icon after hovering over the link. You can delete the link with the Unlink icon.

  

• Line height & letter-spacing: You can set the line height to control the distance between lines of text. With letter-spacing, you can control horizontal spacing behavior between text characters.

• Paragraph spacing: Paragraph spacing adjustments via the text editing bar affect the entire paragraph, whether the entire paragraph is selected, only part of it, or even if the cursor is just placed within. Changes apply individually to each relevant paragraph when multiple paragraphs are selected. The spacing adjustment is expected to apply at the bottom of the selected paragraph.

• Align: You can choose to align your text in the element to the left, right, or in the center.

• Justify: When you justify your text, you extend each line of your text to the left and right borders of the element.

• Bulleted list: Sum up your different lines of text in bullets.

• Numbered list: Sum up your different lines of text with numbers.

• Superscript: A superscript character is half the height of a standard character and is placed higher than the rest of the text. For example, you could use superscript for footnote citations. 

  💡 As of yet, we do not support subscript. However, it is possible to use a third-party site to create the subscript text. From there, you can copy and then paste it into your Foleon Doc. For example, you can use smalltext.io

• Non-breaking space character: With this element, you can place a space character that prevents an automatic line break at its position.

• Soft hyphen character: With this element, you can break words across lines by inserting visible hyphens.

• Clear formatting: Want to clear your text from formatting? With the clear formatting button, the text will revert back to its original styling.

Style text elements within the brand settings

To ensure your text elements have the same style throughout your Foleon Doc, you can set global styling in the brand settings. That way, you won’t have to style each element individually. Click on the element in the brand settings and edit your style in the text editor at the top of the screen.

This section enables you to set the following text styling:

• Headers: set the different levels for headers in your content. There are four different levels to set (H1, H2, H3 and H4).

• Paragraph: set the font styling for the main paragraph text in your content.

• Text link: Click on "text link" to style the text links in your Foleon Doc. This will affect all the links in the Doc. After styling from the brand settings, it’s also possible to change the styling manually for each link.

• Quote: set the font styling for the use of quotes in your content.

• Numbered list: set the font styling for the use of numbered lists in your content.

• Bulleted list: set the font styling for the use of bulleted lists in your content.

Font size guidelines

The default font sizes, as set in the Brand Kit or brand settings, are a good starting point. However, you might want to adapt them so they fit your content. We have some recommendations for the font styles below:

Header 1 (H1)

• Desktop: 56px — If your brand is bolder for titles, we recommend 80px.
• Tablet: 42px
• Mobile: 36px

Header 2 (H2)

• Desktop: 40-42px — Depending on your brand, you can consider weight differentiation (using a normal or semi-bold font style here).
• Tablet: 36px
• Mobile: 34px

Header 3 (H3)

• Desktop: 32px (default)
• Tablet: 28-30px
• Mobile: 26-28px

Header 4 (H4)

• Desktop: 24px (default) — Depending on your brand, you can consider using a normal or light font style. Increasing the spacing between letters is also a common decision. 
• Tablet: 20-22px
• Mobile: 18-20px

Quote 

The font size of the quote style is often reduced to the 20-28px range. If quotes are consistently long, we recommend a smaller font size.

Element settings

In the element settings of your text element, you can style your text the way you want to. These element settings apply to all 3 of the text elements: titles, paragraphs, and quotes.

Hover over the text and click the cogwheel icon. A pop-up with the element settings will appear. We will go over each of the element settings below.

When you're working with the Content Builder, you'll have limited element settings for text elements — only allowing you to change the background. 

• Background
  
  Here you can set the background color of the text.
  

  💡 With the title and paragraph element, the option rounded corners appears when the background is set to full width. The form doesn’t include the option to round corners.

  

• Border
  The border option allows you to create a full border or a border on specific sides of your element. all sides at once is selected by default, which means that when you increase the Border thickness, the same amount of border will appear on all sides at the same time.
  
  When All sides at once is deselected, the option to increase the amount of the border for each side will appear. It is also possible to add more than one border. Every border will have the same color that is selected at the border color picker.
  
  
  

• Text shadow
  You can add a shadow to your text. Choose the shadow color with the color picker. After selecting the color you can choose the horizontal position and vertical position. The blur radius can be used to make the shadow less harsh and a bit more faded.
  
  
  
• Spacing
  Spacing can be increased to create more space between the border of the element and the content within the element.
  
  
• Animation
  The entrance animation of the element can be selected in the drop-down menu. This animation will show once when the page is opened.