Customize elements

All newsletters created in [MNR_ProductName] consist of a number of elements. All elements have a number of properties with which you can customize the appearance to your needs. The most important of these are explained in this chapter.

font

You can change the font in the style editor on the right-hand side in the same way as you are used to from other programs. Depending on the element, different options for editing the font are displayed.

If the name of the font is light gray, this means that no separate font is defined for this element, but the font of the element above it or the newsletter layout is used. You can see a list of the fonts above the currently selected element in the list of layers:

Web-safe fonts

The selection of fonts is - let's say - rather disappointing. This is because fonts used in newsletters should be 'web-safe' - meaning that they should be displayed correctly on as many devices as possible. Many popular fonts such as Calibri or Comic Sans are not available on Apple computers or Android devices for licensing reasons, just as the Apple font 'San Francisco' is not available on Windows computers. The web-safe fonts include:

• Arial
• Century Gothic
• Copperplate Gothic Light
• Courier New
• Georgia
• Gill Sans
• Lucida Console
• Lucida Sans Unicode
• Palantino Linotype
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Google Fonts, which are loaded dynamically, are unfortunately not a solution either. Firstly, they are not displayed in popular email programs such as Microsoft Outlook (where 'Times New Roman' is used instead), and secondly, there are data protection issues.

The optimal font size for newsletters

Fonts in newsletters should not be too small. 12px is almost too small, 18px perhaps a little too large, 14px or 16px are ideal.

Specify the font size in pixels (px) instead of points (pt) so that the font size is displayed in the same size on all devices and the sentence structure is retained. Otherwise, elements may shift on some devices, especially in multi-column layouts.

The line height can also be a little larger. 130% are borderline, 150% or 180% are much easier to read.

Colors

In headings, you can select a color for the background and for the text. If you have not selected the entire text, but only a section, the selected text is marked with the background color (see above).

If no color is selected, the term "NONE" is displayed in the color selection box. The color displayed on the left is the last color used. If you wish, you can enter a code for the color directly in the field, either as an RGB value or as a hexadecimal number. By clicking on the arrow on the right-hand side of the element, you can select a color from a palette or the gradient:

You can change the color palette using the Color palette so that, for example, your company colors are always available for selection.

Size

You can enter the width of an element either in pixels or as a percentage. By default, most elements have a width of 100% so that they make optimum use of the space. An explicit height cannot be entered, as this results from the size of the content and the internal spacing.

Inside distance

An outer spacing cannot be defined because this very often causes display errors in programs such as Microsoft Outlook.

Attention: In some programs such as Yahoo! Mail, it can happen that the inner spacing is added to the width of an element. For example, if an element has a width of 100px and a left and right inner spacing of 5px each, a width of 110px may be assumed and the layout may not be displayed correctly. In this case, specifying a percentage width can help.

Frame

Define a frame to highlight an element. You can define a separate style for each side of the frame.

If you want to remove the frame again, click on the X to delete the frame.