Typographic Patterns in Email
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
View only
 
 
Still loading...
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1
View PostTypecastFontshopMyFontsWebtypeMailchimp UXCampaign MonitorLitmusMedium
Offscreen Magazine
Product design weeklyJason RodriguezSempliceBoagworld The New York Times Nicholas KristofThe Daily BeastThe New York Times CookingLos Angeles Times The Digest NewsletterH&MMr PorterpatagoniaSize?NixonGoProMooJawbone
2
Send Date10/27/201412/18/201412/?/20141/23/201511/13/201411/26/201412/22/20141/14/20159/10/201412/23/201411/30/201412/16/201412/27/201412/30/201412/31/201412/31/20141/7/201512/7/201412/18/201412/17/20141/18/20151/9/201512/26/201412/27/201412/19/2014
3
Desktop Primary Heading
4
Serif vs. sans-serifsans-serifsans-serifsans-serifserifsans-serifsans-serifsans-serifserifsans-serifsans-serifsans-serifsans-serifserifserifsans-serifsans-serifsans-serifserifserifsans-serifserifsans-serifsans-serifsans-serifsans-serif
5
TypefaceEnzoWebPro-BoldLucida GrandeRooneySansFakir Display CondHelvetica (bold)Lato Proxima_nova_rgboldFF Tisa Web ProHelvetica boldHelvetica NeueHelveticaAvenir Next LT Wo1 BoldMerriweatherGeorgiaTitling Gothic FBArial boldArial boldDidotGeorgiaMuliGeorgiaAvenir NextArialVerdanaMyriad Pro
6
FallbackHelvetica Neue, Calibri, Arial, sans-serifArial, Helvetica, sans-serifPT sans, lucida sans, Helvetica, Arial, sans-serifImpact, sans-serifn/aTahoma, sans-serifProxima Nova, Helvetica, Arial, sans-serifGeorgia, Cambria, Times New Roman, Times, serifsans-serifsans-serifArial, sans-serifHelvetica, Arial, sans-serifGeorgia, Times, Times New Roman, serifTimes new roman, sans-serifArial Narrow, Gill Sans MT, Franklin Gothic Medium, Arial, sans-serifHelvetica, sans-serifHelvetica, sans-serifGaramond, GeorgiaserifArial, Helvetica, sans-serifTimes New Roman, Times, serifHelvetica, arial, sans-serifHelvetica, sans-serifsans-serifTahoma, Helvetica, Arial, sans-serif
7
Using webfontsYesNoYesYesNoYesYesNo (see note)NoNoNoNoYesNoYesNoNoYesNoYesNoNoNoNoNo
8
Service or self hostedTypecastn/aMyFontsWebtypen/aGoogleself-hostedn/an/an/an/an/aGooglen/aself-hostedn/an/aself-hostedn/aGooglen/an/an/an/an/a
9
@font-face in head, @import or linkIn headn/aLinkIn headn/a@importIn headn/an/an/an/an/aLinkn/aIn headn/an/aLinkn/a@importn/an/an/an/an/a
10
In head: which font formatseot and woffn/an/aeot, ttf, woff and svgn/an/awoff and ttfn/an/an/an/an/an/an/awoffn/an/an/an/an/an/an/an/an/an/a
11
Text color#333333#000000#222222#FFFFFF#ea5441#123751#444444#333332#333333#333333#cf4647#404040#0A0A0A#333333#000001#222222#000000#000000#2b2b2b#333333#333333#010101#00aeef#4d4d4d#000000
12
Font size32px26px32px96px 30px36px30px32px22px20px28px28px30px36px30px42px24px52px30px25px23px16px38px20px18px
13
Line-height (px)42304886.44544normal322427normal4037.53834normal2443302541183521normal
14
Primary heading line height to primary heading ratio1.311.151.50.91.51.22n/a11.091.35n/a1.421.251.051.13n/a10.82111.81.1250.921.05n/a
15
AlignmentCenterLeftLeftCenterLeftCenterCenterLeftCenterLeftLeftCenterCenterLeftLeftCenterLeftCenterCenterCenterLeftCenterLeftLeftCenter
16
Character per line (+ spaces)3216251222243536303623382222392642717275622212437
17
LinkedNoYesNoNoNoYesNoYesNoNoNoNoNoYesYesYesYesNoYesNoNoNoYesYesNo
18
CapsNoNoNoNoNoNoNoNoNoNoNoNoNoNoYesNoNoYesYesNoNoYesYesNoNo
19
Type background color#F2F2F2#FFFFFF#FFFFFF#000000#F8F8F8#F6F6F8#EEEEEE#FFFFFF#FFFFFF#FFFFFF#F8F8F8#F1F1F1#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#F6F6F6#FFFFFF#000000#FFFFFF#FFFFFF
20
Desktop Secondary Heading
21
TypefaceHelvetica Neuen/aRooneySans - boldFakir Display CondHelvetica (bold)Lato (regular)Proxima_nova_rgboldFf Tisa Web proHelvetica BoldHelvetica NeueHelvetica regularHelvetica boldMerriweather regularGeorgiaTitling - Gothic - FB - Comp - MediumGeorgiaArial BoldDidotn/aMuliGeorgian/aArialn/aMyriad Pro
22
Text color#000000n/a#222222#000000#FFFFFF#2F353E#FFFFFF#333332#333333#fb406d#033649#606060#000000#000001#ee2e24#000001#000000#000000n/a#333333#343434n/a#000000n/a#000000
23
Font size20pxn/a20px80px24px26px28px22px20px16px22px16px26px24px24px24px18px26pxn/a18px22pxn/a18pxn/a14px
24
Line-height25pxn/a30px72px26.3px 34pxnormal22px24px16pxnormal20px32.5px28px28px28px24pxnormaln/a20pxnormaln/anormaln/anormal
25
Line height to secondary heading ratio1.25n/a1.50.91.11.3n/a11.21n/a1.251.251.21.21.21.3n/an/a1.1n/an/an/an/an/a
26
WebfontNon/aYesYesNoYesYesNoNoNoNoNoYesNoYesNoNoYesn/aYesNon/aNon/aNo
27
Desktop Body Copy
28
Serif vs. sans-serifsans-serifsans-serifsans-serifsans-serifserifsans-serifsans-serifserifsans-serifsans-serifserifsans-serifserifserifserifserifsans-serifsans-serifserifsans-serifsans-serifsans-serifsans-serifsans-serifsans-serif
29
TypefaceHelvetica NeueLucida GrandeRooneySans - regularAften ScreenGeorgiasans-serifProxima NovaJaf bernino sansHelvetica regularHelvetica NeueGeorgiaAvenirNextLTW01 regularMerriweatherGeorgiaGeorgiaGeorgiaArialArialGeorgiaMuliVerdana Avenir NextArialVerdanaMyriad pro
30
FallbackCalibri, arial, sans-serifArial, Helvetica, sans-serifPT sans, lucida sans, Helvetica, Arial, sans-serifLucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serifTimes, Times New Roman, Serifsans-serifProxima_nova_rgregular, Helvetica, Arial, sans-serif Helvetica Neue, Helvetica, Lucida Grande, Lucide Sans unicode, Lucide Sans, Geneva, Verdana, sans-serifsans-serifsans-serifserifHelvetica, Arial, sans-serifGeorgia, Times, Times New Roman, serifTimes New Roman, sans-serifserifTimes New Romansans-serifHelvetica, sans-serifserifArial, Helvetica, sans-serifGeneva, sans-serifHelvetica, Arial, sans-serifHelvetica, sans-serifsans-serifTahoma, Helvetica, Arial, sans-serif
31
WebfontNoNoYesYesNoNoYesNoNoNoNoNoYesNoNoNoNoNoNoYesNoNoNoNoNo
32
Foundryn/an/aMyFontsWebtypen/an/aself-hostedn/an/an/an/an/aGogglen/an/an/an/an/an/aGogglen/an/an/an/an/a
33
@font-face or @importn/an/a@font-face@font-facen/an/a@font-facen/an/an/an/an/a@font-facen/an/an/an/an/an/a@importn/an/an/an/an/a
34
Text color#8b8b8b#000000#222222#000000#606060#8D959E#666666#333332#333333#5a5a5a#4b4b50#202020#606060#333333#000001#333333#000000#080808#2b2b2b#333333#333333#010101#999999#878787#000000
35
Same color as primary header?
No lighterYesYesYesNo diff col.No diff col.No lighterYesYesNo lighterNo diff col.No darkerNo lighterYesYesNo lighterYesNo lighterYesYesYesYesNo diff col.No lighterYes
36
Font size15px16px16px16px16px16px16px16px14px16px16px18px13px16px14px18px16px13px17px14px13px14px13px15px14px
37
Line-height25px26px24px20.7px24px25px25px24px20px24px25px32px26px22px23px30pxnormal15px24px18px23.9px21px16px24px28px
38
Line-height set in px, em,no. or %
pxpxemno.%pxpxpxpxpxpxpx%pxpxpxn/apxpxpxempxpxpx%
39
Ratio between line height & body copy1.661.621.51.291.51.561.561.51.421.51.561.7721.371.641.66n/a1.151.411.281.831.51.231.62
40
AlignmentCenterLeftLeftLeftLeftLeftCenterLeftLeftLeftLeftCenterLeftLeftLeftLeftLeftLeftCenterCenterLeftCenterLeftLeftLeft
41
Line-length or measure (px)520500530525565420480543530515500545550590610545430480582550493537533494640
42
Line length px / body line height px20.819.22225.323.516.819.222.626.521.4201721.126.826.518.1n/a3224.230.520.625.533.320.522.8
43
Character per line (+ spaces)8472787380656891887471689483100716283758772859060112
44
LinksUnderlined & coloredyellow bg colorcoloredUnderlinedUnderlined & coloredUnderlined & coloredNot in body copyNot in body copyUnderlinedUnderlinedColoredNot in body copyUnderlined and coloredUnderlined & coloredNot in body copyColoredNot in body copyNot in body copyNot in body copyNot in body copyNot in body copyNot in body copyNot in body copyNot in body copyNot in body copy
45
Type background color#F2F2F2#FFFFFF#FFFFFF#DDDDDD#F8F8F8#F6F6F8#EEEEEE#FFFFFF#FFFFFF#FFFFFF#F8F8F8#F1F1F1#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#F6F6F6#FFFFFF#000000#FFFFFF#FFFFFF
46
Desktop template width520px640px680pxNo fixed width600px600px500px600px600px600px500px600px600px640px728px600px600px700px650px600px750px560px600px600px760px
47
Paragraph spacing (px)n/an/an/an/a35px35pxn/a23pxn/an/a33px47px37px24pxn/a36pxn/an/an/a22pxn/an/an/a37n/a
48
Paragraph spacing / line height
n/an/an/an/a1.451.4n/a0.95n/an/a1.321.461.421.09n/a1.2n/an/an/a1.2n/an/an/a1.54n/a
49
Desktop Pre-header Text
50
Pre-header textYesYesYesNoYesYesYes (but hidden from view)NoNoNoYesYesYesYesYesYesNoYesYesYesYesNoYesYesYes
51
Instructions, Snippet or BothInstructionsInstructionsSnippetn/aSnippetBothSnippetn/an/an/aSnippetSnippetBothInstructionsInstructionsInstructionsn/aBothBothInstructionsInstructionsn/aBothInstructionsInstructions
52
Serif vs. sans-serifsans-serifsans-serifsans-serifn/aserifsans-serifn/an/an/an/aserifsans-serifsans-serifsans-serifsans-serifsans-serifn/asans-serifserifsans-serifserifn/asans-serifsans-serifsans-serif
53
TypefaceHelvetica NeueLucida GrandeRooneySans regularn/aGeorgiasans-serifn/an/an/an/aGeorgiaHelveticaHelveticaArialArialArialn/aArialGeorgiaMuliGeorgian/aArialVerdanaMyriad Pro
54
Text color#D6D6D6#7a7a7a#999999n/a#a9a9a9#8d959en/an/an/an/a#FFFFFF#000000#999999#999999#000000#999999n/a#939393#2b2b2b#0000ee#f9f9f9n/a#000000#008b52#089edb
55
Font size15px13px12pxn/a14px11pxn/an/an/an/a16px10px12px11px11px11pxn/a11px15px11px9pxn/a14px11px11px
56
Font size151312n/a1411n/an/an/an/a161012111111n/a1115119n/a141111
57
Line-height25px26px15.6px n/a14px17pxn/an/an/an/a25px12.5px15px15px15pxnormaln/anormal14px13pxnormaln/a17px15pxnormal
58
Ratio between line height & font size1.621.3n/a11.54n/an/an/an/a1.561.251.251.361.36n/an/an/a0.91.18n/an/a1.21.36n/a
59
Mid-sized primary heading (450px)
60
Font size changeYes 28pxNo 26px (same as 320px adaptive layout)No 32pxNo 96pxYes 24pxNo 36px (same as 320px adaptive layout)No 30pxNo 32pxNo 22pxNo 20pxNo 28pxYes 18px downNo 30pxNo 36pxNo 30pxNo 42pxNo 24pxYes 40px downYes 25px downNo 25pxNo 23pxNo 16pxYes 25px downNo 20pxNo 18px
61
Character per line (+ spaces)2516191222172427303518382214332622717195622212437
62
Mid-sized body copy (450px)
63
Font size change No 15pxNo 16pxYes 14px downNo 16pxNo 16pxNo 16pxNo 16pxNo 16pxNo 14pxNo 16pxNo 16pxNo 18pxNo 13pxNo 16pxNo 14pxNo 18pxNo 18pxNo 13pxYes 14px downNo 14pxNo 13pxNo 14pxNo 13pxNo 15pxNo 14px
64
Line-height changeNo 25pxNo 26pxYes 21.59px downNo 20.7pxNo 24pxNo 26pxNo 25pxNo 24pxNo 20pxNo 24pxNo 25pxYes 22.5pxNo 26pxNo 22pxNo 23pxNo 30pxNo 24pxNo 15pxNo 24pxNo 18pxNo 23pxNo 21pxNo 16pxNo 24pxNo 28px
65
Ratio of line height to font size
1.661.621.541.291.51.621.561.51.421.51.561.2521.371.641.661.331.151.711.281.761.51.231.62
66
Character per line (+ spaces)60376560554351635358584662436471285463407245674065
67
Mobile primary heading (320px)
68
Font changeNoNoNoNo NoNoNoNoNoNoNoNoNoNoNoNoNoNoNoNoNoNoNoNoNo
69
Font size changeYes 28px downNo 26px No 32pxNo 96pxYes 24px downNo 36pxNo 30pxNo 32pxNo 22pxNo 20pxNo 28pxYes 18px downNo 30pxYes 30px downNo 30pxYes 22px downNo 24pxYes 40px downYes 25px downNo 25pxNo 23pxNo 16pxYes 25px downNo 20pxNo 18px
70
Line-height changeYes 30pxNo 30px No 48pxNo 86.4Yes 36pxNo 44pxnormalNo 32pxNo 24pxNo 27pxNormalYes 22.5px downNo 37.5pxYes 32px downNo 32pxnormalNo 24pxYes 34px downNo 30pxNo 25pxNo 41pxNo 18pxYes 25px downNo 21pxnormal
71
Line height to font size ratio of primary heading1.071.151.50.91.51.22n/a11.091.35n/a1.251.251.061.06n/a10.851.211.781.12511.05n/a
72
Alignment CenterLeftLeftCenterLeftCenterLeftLeftLeftLeftLeftCenterCenterLeftLeftLeftLeftCenterCenterCenterLeftCenterLeftLeftCenter
73
Character per line (+ spaces)161619722171718303529251114332622717192822152437
74
Mobile Secondary Heading
75
Font-size changeNo 20pxn/aNo 20pxNo 80pxYes 22pxNo 26pxNo 28pxNo 22pxNo 20pxn/aNo 22pxYes 14px downNo 26pxYes 22px downNo 24pxYes 22px downNo 18pxNo 26pxn/aNo 18pxNo 22pxn/aNo 18pxn/aNo 14px
76
Line-height changeNo 25pxn/aNo 30pxNo 72pxYes 24.2pxNo 34pxNormalNo 22pxNo 24pxn/anormalYes 16px downNo 32.5pxYes 26px downNo 28pxYes 26px downNo 24pxnormaln/aNo 20pxnormaln/anormaln/anormal
77
Line height to font size ratio1.25n/a1.50.91.11.3n/a11.2n/an/a1.141.251.181.161.181.33n/an/a1.11n/an/an/an/an/a
78
Mobile Body Copy
79
Font size change No 15pxNo 16pxYes 14px downNo 16pxNo 16pxNo 16pxYes 15px downNo 16pxNo 14pxNo 16pxNo 16pxNo 18pxYes 13px down to desktopNo 16pxNo 14pxYes 16px downNo 16pxNo 13pxYes 14 downNo 14pxNo 13pxNo 14pxNo 13pxNo 15pxNo 14px
80
Font size (px)15161416161615161416161813161416161314141314131514
81
Line-height changeNo 25pxNo 26pxYes 21.59px downNo 20.7pxNo 24pxNo 26pxYes 22px downNo 24pxNo 20pxNo 24pxNo 25pxYes 22.5pxYes 26px downNo 22pxNo 23pxYes 25px downnormalNo 15pxNo 24pxNo 18pxNo 23pxNo 21pxNo 16pxNo 24pxNo 28px
82
Ratio between body line height & font size1.661.621.541.291.51.561.461.51.421.51.561.2521.371.641.56n/a1.151.711.281.611.51.231.62
83
AlignmentCenterLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftCenterLeftLeftLeftLeftLeftLeftCenterCenterLeftCenterLeftLeftLeft
84
Character per line (+ spaces)41374840374337424236413140435743363922404345462757
85
Margin (left) 26px34px12px1518px19px29px21px12px34px15px33px17px11px19px9px12px33px18px22px18px10px19px38px41px
86
Paragraph spacing (px)n/an/an/an/a35px35pxn/a23px27pxn/a34px37px38px24pxn/a31pxn/an/an/a19pxn/an/an/a34pxn/a
87
Mobile Pre-header Text
88
Hidden on mobileYesNoNon/aNoYesYesn/an/an/aNoNoNoNoNoNon/aNoNoYesNon/aNoNoNo
89
Font-size changen/aNo 13pxYes 8px (down)n/aYes 16px (up)n/an/an/an/an/aNo 16pxYes 14px upNo 12pxNo 11pxNo 11pxNo 11pxn/aNo 11pxNo 15pxn/aNo 9pxn/aNo 14pxNo 11pxNo 11px
90
Font-size changen/a138n/a16n/an/an/an/an/a161412111111n/a1115n/a9n/a141111
91
Line-height changen/aNo 26pxYes 10.3px (down)n/aYes 18.39px (up)n/an/an/an/an/aNo 25pxYes 16px upNo 15pxNo 15pxNo 15pxnormaln/anormalNo 14pxn/anormaln/aNo 17pxNo 15pxnormal
92
Line height to font size ration/a21.28n/a1.14n/an/an/an/an/a1.561.141.251.361.36n/an/an/a0.93n/an/an/a1.211.36n/a
93
Ratio of pre-header text to mobile body font sizen/a0.810.57n/a1n/an/an/an/an/a10.770.920.680.78n/an/an/a1.07n/an/an/a1.070.73n/a
94
Performance
95
Speed index 1st view (<1,000 is good)60974811819731981121713331248880503717109318007427645221453488013838896731334211118771414
96
Start render 1st view (secs)0.5940.5951.0960.7941.0951.1941.0940.6950.7940.4940.6940.9941.7980.3940.6950.3940.5944.0950.5960.6940.4971.0941.6951.4951.296
97
Document complete 1st view0.95.2712.7042.8361.9741.5272.2351.5031.3430.721.0022.0642.7451.9855.7922.2334.7096.1562.2981.282.0651.8253.2082.7684.03
98
Fully loaded 1st view0.9835.3692.9392.9632.3561.6513.0931.6281.4310.8051.1132.1992.8822.1166.2932.4195.366.4162.2981.3552.1891.9523.3452.7684.361
99
Document complete repeat view0.340.4830.8730.3760.6250.8631.7110.0550.4420.2810.2790.3940.4730.3955.8212.7690.5962.940.5210.9320.1030.0581.1561.0110.708
100
Total no. of requests (fully loaded)6342335132535179947128217175263321212317231221
Loading...
 
 
 
Emails 1-25
Emails 26-50
Results
Resources