SmartTemplates

Home Variable Definitions Example Templates Screenshots Version History Knowlegebase FAQ Bugs & Features Premium Features Licenses GDPR + Impressum

SmartTemplates :: knowledgebase :: Fonts


font family on windows and Mac

If you write html templates for your e-Mail you should first think about which kind of font-family you will use.
Not all font-families are given in common operating systems and in this case the recipient get another font displayed (default).
It's suggested to use one of the more popular font-families insteat of "special fonts" e.g. SimSun.
Some Windows-Fonts have a equivalent on Mac OS X (selection):

Windows: Arial * Arial Black * Comic Sans MS Courier New * Impact * Lucida Console MS Sans Serif MS Serif Palatino Linotype Tahoma Times New Roman Verdana *
Mac OS X: Helvetica Gadget Comic Sans MS Courier Charcoal Monaco Geneva New York Palatino Geneva Times Geneva
font-family: Arial,
Helvetica,
sans-serif;		 "Arial Black",
Gadget,
sans-serif;		 "Comic Sans MS",
cursive;		 "Courier New",
Courier,
monospace;		 Impact,
Charcoal,
fantasy;		 "Lucida Console",
Monaco,
monospace;		 "MS Sans Serif",
Geneva,
sans-serif;		 "MS Serif",
"New York",
serif;		 "Palatino Linotype",
Palatino,
serif;		 Tahoma,
Geneva,
sans-serif;		 "Times New Roman",
Times,
serif;		 Verdana,
Geneva,
sans-serif;

Starred (*) fonts are typically available on both Windows and Macintosh systems, even if a different font is displayed as a Macintosh alternative.
Based on: Comparison of Macintosh Common Fonts to Windows Common Fonts Table.
Fonts with white-space in its name e.g. Arial Black will be note inside quoting marks "Arial Black" in your css code.


generic fonts (fallback fonts)


In your css code you should set different font-families and at least one of the gerneric fonts as fallback.

serif = Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings
sans-serif = Glyphs have stroke endings that are plain
cursive = Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces.
The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.
fantasy = Fantasy fonts are primarily decorative fonts that contain playful representations of characters
monospace = All glyphs have the same fixed width.

Font size table

Fonts in web design are given in different units.
But there are good reasons not to use pt or any other absolute units and only use em and px.
Here is a table that point, pixel, Ems and percentages is converted.
It is an approach that depends on font, browser and the operating system.
This is at least a good starting point.

points pixels em percent size font size
6pt 8px 0.500em 50%
7pt 9px 0.550em 55% xx-small
7.5pt 10px 0.625em 62,5% x-small size="1"
8pt 11px 0.700em 70%
9pt 12px 0.750em 75% smaller
10pt 13px 0.800em 80% small size="2"
10.5pt 14px 0.875em 87,5%
11pt 15px 0.950em 95%
12pt 16px 1.000em 100% medium size="3" (user preferred size)
13pt 17px 1.050em 105%
13.5pt 18px 1.125em 112,5% large
14pt 19px 1.200em 120% larger size="4"
14.5pt 20px 1.250em 125%
15pt 21px 1.300em 130% size="5"
16pt 22px 1.400em 140%
17pt 23px 1.450em 145%
18pt 24px 1.500em 150% x-large
20pt 26px 1.600em 160%
22pt 29px 1.800em 180%
24pt 32px 2.000em 200% xx-large
26pt 35px 2.200em 220%
27pt 36px 2.250em 225%
28pt 37px 2.300em 230%
29pt 38px 2.350em 235%
30pt 40px 2.450em 245%
32pt 42px 2.550em 255%
34pt 45px 2.750em 275%
36pt 48px 3.000em 300%

Maincontent of this Table is published on ESX.ch by Erich Schumacher.
If you like to convert your own pixel to em, you can use the web-based PXtoEM converting tool by Brian Cray.
Further Documentation to font-sizes and units by Bert Bos.