Fonts, text formatting and line height

Learn about font selection, font colours, formatting tips and setting custom line heights

Marcus Warren avatar
Written by Marcus Warren
Updated over a week ago

Pasting content into Envoke (from Microsoft Word, Google Docs, etc.)

When content is pasted into the Envoke editor:

  • links and content structure are retained

  • styles and formatting are removed.

For example bulleted lists, headlines and paragraph breaks are retained but colours, fonts and other formatting such as bolded text and underlines are removed.

This ensures that formatting by third party apps don't interfere with styles set in the Envoke editor and keeps content compatible for editing in Envoke.

Font colours

Font colours are controlled from the sidebar where you can set colours for regular text, headlines and links. You can also set colours for individual words from the editor toolbar. Colours applied from the toolbar overwrite colours selected in the sidebar.

Reset formatting

You can reset all formatting - including colour selection - applied to any selected text using the "reset formatting" button from the editor toolbar.

Font size

Font sizes can be set manually or left to "default". The default font size depends on the email app contacts open the email with. It means to let the email app use its own default font size, which varies across email apps.

Line breaks

Using [ENTER] and [SHIFT+ENTER] creates a different type of line break. You can also use [SHIFT+ENTER] twice to add spacing that's different than spacing using [ENTER] twice.

Bulleted and numbered lists

It is not possible to add line breaks or to adjust the default spacing between items of a bulleted / numbered list.

Paragraph alignment

You can align paragraphs left, centre or right but it's not possible to justify text.

Font selection and support across email programs

The fonts you use in your emails are as critical to your design as your selection of images and colours. You should be aware that not every font is universally supported on every device. It comes down to font support by operating systems and email clients. If a font is not supported a substitute, fallback font is used as per these fallback font rules.

Line height in headlines appear too narrow

On desktop view headline spacing may appear "squished" because line heights in paragraphs and headlines are the same. A workaround is to add headlines in their own separate content block where line height can be adjusted separately or instead of using headline formatting use large paragraph style text.

On mobile display, line height automatically changes to preset values to provide the best user experience.

Change to the minimum line height setting

On September 17, 2021 there was a change in the minimum line height setting due inconsistent display across email programs, especially in some Outlook versions. The change fixed this and made the display consistent across email programs. At the same time the minimum line height was made somewhat taller than it used to be as some email programs (again, some versions of Outlook are the main culprits) wouldn't work well with spacing that is too condensed.

In existing messages, as long as the line height setting hasn't changed since the update, content will still use the older, more condensed line height. After a change is made in line height, the new display height setting will be applied. This way the old setting is phased out over time. To keep things consistent, we recommend you change all existing line heights in your templates and recent messages that may be duplicated in order to trigger the new setting. Once changed, the new setting carries forward into new messages.

Technical details for developers

This is an example for developers to use Open Sans in emails with fallback option:
โ€‹
Step 1: import fonts:

<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<!--<![endif]-->

Step 2: Apply font to content:

body,p {font-family: 'Open Sans', Arial, Helvetica, sans-serif !important; font-weight: 300;}

Outlook 2007, 2010 and 2013 don't support web fonts and ignores fallback fonts by default. Wrapping the code between the <!--[if !mso]><!--> <!--<![endif]--> tags at least ensures that fallback fonts do work even though web fonts don't. So in the above example in Outlook 2007/2010/2013 the font will be shown as Arial.

Did this answer your question?