Important text editor settings
Important text editor settings
1. Brand Kit font styles
2. Insert link: From text, you can link to an External URL, Page, Overlay, Document, Block, and Cookie consent.
3. Line height, letter-spacing & paragraph spacing: Line height controls the distance between lines of text. Letter-spacing controls horizontal spacing behavior between text characters. Paragraph spacing controls the space between entire paragraphs, whether the entire paragraph is selected, only part of it, or even if the cursor is just placed within.
4. Non-breaking space character: With this element, you can place a space character that prevents an automatic line break at its position.
5. Soft hyphen character: With this element, you can break words across lines by inserting visible hyphens.
6. Clear formatting: Pasting text from another source? With the clear formatting button, the text will revert back to the Foleon Brand Kit font styling.
Content tips!
- Keep your font size above 16 pixels so that it's easy to read regardless of where it appears.
- Be mindful of your word count. Text and other elements should be in balance. A good rule of thumb is to avoid exceeding 800 words on overlays and pages.
- Reader engagement is always a topic of discussion. Be sure to write engaging content that's easy to skim and read.
- Avoid walls of text. Break up text heavy content with visual breaks and leveraging overlay pages. This helps guide the reader without overwhelming them.
Formatting tips!
- Use column settings over element settings.
- Apply animations to columns rather than elements to save time.
- Always check responsiveness before duplicating an element, block, or column.
- Check for unnatural line breaks on smaller desktop screens by resizing your browser window using a web extension (like Chrome's Window Resizer). When working on large monitors, ensure to work in the Foleon editor with the browser window set to laptop size (not full screen) to help manage the output expectations.
Optimal spacings
Based on a window size of 1440x900 pixels
- 100px column spacing on desktop.
- 50px column spacing on tablet.
- 25px column spacing on mobile.
- 30px spacing between columns. (Instead of custom spacing between columns. This will save you a lot of time resetting them repeatedly.)
- 30px bottom column border ‘spacing’ in the case of a card grid.
- Element bottom spacing varies. Stick to default unless there is a good reason not to.
- If large spacings are needed, please stick to 50, 100, 150, etc., if possible.
