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 this week

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

When content is pasted into the Envoke editor some formatting (font size, text and background colours, etc) are automatically removed. Links, content structure and basic styles(bulleted lists, headline, bold, italics, etc) are retained.

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.

Match styles when pasting content

If you want to match the style of current content of your Envoke message with text that you're pasting in, use the "paste without formatting" option. On Windows this shortcut is Ctrl + Shift + V, on a Mac it's Command + Shift + V.

Reset formatting

You can reset all formatting applied to any selected text using the "reset formatting" button from the editor toolbar. This is useful is too many styles are applied and you want to start formatting from a clean slate.

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.

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.

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.

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.

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?