Formatting and Fonts using the FYI Editor

Using formatting in the Editor helps improve how content is presented to clients, particularly in emails and templates. Well-formatted content is easier to read, highlights key information, and creates a more professional experience.

When creating emails, selecting an Email Template will automatically use the formatting applied to that template. 

Users can make further changes using the Email Editor before sending the email, including:

• Apply text formatting such as bold, italics, and lists
• Adjust fonts and font sizes
• Insert elements such as images, tables, and links
• Control how content is displayed across emails and templates

Formatting Text

Using the Formatting Toolbar

The Formatting Toolbar is displayed at the top of the email text within the Email Editor.

From the toolbar, users can apply standard formatting options easily, for example, selecting a new font, applying bold, italics, underline, bullet lists, or alignment.

To use the formatting toolbar:

1. Highlight the text to be formatted, or click into the location to insert formatting e.g. a horizontal line.
    
2. Click the relevant option in the toolbar to update the formatting.
   
   The toolbar also contains buttons used to display menus containing more tools. Refer to Available Formatting Tools below for a full list of options.
   
   The More Text button displays tools used to format text, e.g., underline. 
   
   The More Paragraph button displays tools used to format paragraphs e.g., bullet lists. 
   
   The More Rich button displays tools used to insert different content e.g., images or tables.
   
   The More Misc button allows users to select all text, or change to a HTML view.
   
   
3. The updated formatting will be displayed in the Email Editor. 
   
4. Click in a blank link to display the Quick Insert plus icon. The Quick Insert tool allows you to quickly insert a table, list, or horizontal line.
   
5. Click the + button and select the relevant option. Refer to Available Formatting Tools below.
   

Clearing Formatting

If content has been copied from another source, additional formatting or HTML styling may be automatically included. This can impact how the text displays in FYI.

To ensure the formatting is displayed as intended, you may need to first clear the formatting, before using the toolbar to re-add the formatting as required.

This is useful when pasting content from external sources, such as Microsoft Word or websites.

1. Select the text you want to reset.
    
2. Click the More Text button in the toolbar.
   
3. Click the Clear Formatting button.
   
4. The text will revert to the default formatting. 
   Note: The default formatting may not match the styles used in other sections of the Email Editor. 
   

Due to the way in which styling is applied to HTML, you may find that using certain keys (such as backspace) you may lose the style. If this happens, you can usually restore the styling by clicking elsewhere in the content area of the Editor.

Available Formatting Tools

The following table is a summary of the different formatting tools available in the FYI Email Editor.

Text Formatting

The following tools are immediately available from the Formatting Toolbar.

Tool	Details
Font Family	Used to select the font for the selected text or content. When editing the text, the name of the current font will display in the box.
Font Size	Used to adjust the size of the selected text. When editing the text, the current font size will display in the toolbar. Refer to Formatting Font Sizes below.
Bold	Applies bold formatting to the selected text to make it stand out.
Italics	Applies italic formatting to the selected text for emphasis or styling.
Note: The following tools are available by clicking the More Text button:
Underline	Applies underline formatting to the selected text.
Text Colour	Changes the colour of the selected text. Select a colour from the available options, or enter the Hex Colour code for a custom colour if required.  Click the bin icon to remove a colour from the highlighted text.
Background Colour	Applies a background colour behind the selected text. Select a colour from the available options, or choose a custom colour if required.
Strikethrough	Applies a line through the selected text to show that the content is no longer relevant or has been removed.
Subscript	Formats the selected text slightly below the normal text line.
Superscript	Formats the selected text slightly above the normal text line.
Inline Class	Applies a predefined class to the selected text. The following options are available: Code Highlighted Transparent
Inline Style	Applies a predefined style to the selected text. The following options are available: Big Red Small Blue
Clear Formatting	Removes formatting from the selected text and returns it to the default style.

Paragraph Formatting

Tool	Details
Align Left	Aligns the selected text to the left margin of the content area.
Align Centre	Aligns the selected text to the centre of the content area.
Note: The following tools are available by clicking the More Paragraph button:
Align Right	Aligns the selected text to the right margin of the content area.
Align Justify	Aligns the selected text evenly across both the left and right margins.
Ordered List	Creates a numbered list for the selected text. The following list styles are available: Default Lower Alpha Lower Greek Lower Roman Upper Alpha Upper Roman
Unordered List	Creates a bullet list for the selected text. The following list styles are available: Default Circle Disc Square
Paragraph Format	Applies a structural format to the selected text. The following options are available: Normal Heading 1 Heading 2 Heading 3 Heading 4 Code
Paragraph Style	Applies a predefined visual style to the selected paragraph. The following options are available: Gray Bordered Spaced Uppercase
Line Height	Adjusts the spacing between lines of text. The following options are available: Default Zero Single 1.15 1.5 Double
Decrease Indent	Reduces the indentation level of the selected paragraph.
Increase Indent	Increases the indentation level of the selected paragraph.
Quote	Formats the selected text as a quote with indentation and styling to distinguish it from standard content.

Rich Formatting

Tool	Details
Link	Inserts or edits a hyperlink for the selected text or content.
Note: The following tools are available by clicking the More Rich button:
Insert Image	Inserts an image into the content. You can upload an image or select an existing file to include. Resize images before inserting them into an email. This helps ensure images display at an appropriate size across different email software programs. Important: Some email software programs may ignore the height and width dimensions set within the email signature and instead display the image at its original size. Resizing images can be completed using standard image editing software, for example, Photos in Windows 11.
Insert Table	Inserts a table into the content. You can define the number of rows and columns when creating the table.
Emoticons	Inserts an emoticon into the email. Note: Some additional HTML may be required for Emoticons to be displayed correctly after the email is sent.
Special Characters	Inserts special characters that are not available on the keyboard, such as symbols or accented characters. Click the button to view the options available.
Horizontal Line	Inserts a horizontal line to visually separate sections of content.

Miscellaneous Formatting

Tool	Details
Undo	Reverses the most recent change made in the Editor.
Redo	Reapplies the last action that was undone.
Print	Opens the print preview to print or save the content as a PDF.
Note: The following tools are available by clicking the More Misc button:
Select All	Selects all email content.
Code	Toggles between the content preview and the HTML code view. The Code view should only be used by users familiar with HTML. After making changes, return to the preview before saving or sending the email.

Using Images

Images can be inserted into emails and templates using the Insert Image button, available from the More Rich toolbar. Users can upload an image directly into FYI, or link to an external image, for example, when signature logos are hosted externally.

Note: Images should be resized before being uploaded, as some email programs, for example, Outlook, may display the image using its original dimensions rather than the resized image in the Editor.

Upload an Image

To upload an image:

1. Click the More Rich button in the Formatting Toolbar.
   
2. Click the Insert Image button.
   
3. Click into the grey box to select an image from your computer, or drag-and-drop the relevant image.
   
4. The image will be displayed.
   
5. Use the Image Tools to resize the image. Click the Change Size ruler icon. 
   
6. To display the image using the original sizes, enter "auto" for both the width and the height, and click Update.
   
   Note: If the image appears too large, resize the image file and upload a new version.
   

Insert from a Link

Images can be inserted using a link to externally hosted files. 

Note: The link must be publicly accessible for all users and email recipients, otherwise an image will not be displayed.

1. Click the More Rich button in the Formatting Toolbar.
   
2. Click the Insert Image button.
   
3. Click the By URL tab.
   
4. Enter the URL where the image is hosted, and click Insert.
    
5. The image will be displayed.
   
6. Use the Image Tools to resize the image. Click the Change Size ruler icon. 
   
7. To display the image using the original sizes, enter "auto" for both the width and the height, and click Update.
   
   Note: If the image appears too large, resize the image file and upload a new version.
   

Image Tools

To replace, remove, or update the style of an image, click on an image to display the Image Toolbar. The following functions are available.

Note: Some email programs, for example, Outlook, may not display the image based on the styling applied using the Editor.

Tool	Details
Replace	Replaces the selected image with a different image.
Align	Changes the alignment of the image within the email content.
Image Caption	Adds or removes a caption for the selected image.
Remove	Removes the selected image from the email content.
Insert Link	Adds a link for the selected image.
Edit Link	Used to edit the existing link for the selected image.
Remove Link	Removes the link for the selected image.
Display	Changes whether the image is displayed inline with the text, or "break text" to display on a separate line.
Style	Applies a visual style to the selected image - Rounded, Bordered, or Shadow. Click to select or deselect the relevant style.
Alternative Text	Adds text to describe the image. This is useful when images are blocked by the recipient's email program or cannot be displayed.
Change Size	Changes the displayed size of the selected image within the Editor.

Using Fonts

Selecting a Font

The font selected in the Editor can be changed from the Font Family drop-down in the Formatting Toolbar. This allows users to apply a different font from the Default Font configured in Document Practice Settings.

To select a font:

1. Highlight the text to be updated, or click into the location where the text will be entered.
    
2. Click the Font Family drop-down in the Formatting Toolbar.
    
3. Select the relevant font.
    
4. The selected font will be applied to the text in the Editor.

Note: When emails are sent or viewed in Outlook, some fonts may need to be installed locally to display correctly. If a font is unavailable, Outlook will use a similar font instead.

Default Font and Font Size

Text entered in the Editor uses the font and font size set for the Default Font and Default Font Size in your Document Practice Settings.

If a Default Font and Default Font Size are not set for your practice, Sans Serif 12 is used.

When using an Email Template, fonts and font sizes are applied based on the template configuration. 

Font Size Comparison between FYI and Outlook

FYI uses pixel-based font sizes, while Outlook uses point sizes. This difference can impact how text appears when creating emails.

Use the table below when trying to match email formatting between FYI and Outlook. For most emails, use the practice default font settings or the formatting already configured in the Email Template.

Note: When selecting certain font sizes, the display in the Editor may appear as a half-size font. This is a visual display behaviour only and does not affect the text size.