Performing small caps manually to get the desired look, and not a font variant: small-caps;

Question

Limitations:
1. This is for the HTML newsletter (without HTML5 or JS)
2. Font family {Lucida Sans, Lucida Grande, Lucida San Unicode, serif}

I need to map the existing mast head of the PDF PDF newsletter (rather, improve it, but not briefly) with the text not Image (since many email clients do not upload images automatically and this is a mast)

The code I still have (adaptation of a free theme from the campaign monitor called Classic by 45royale ):

 <h1 style="color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; font-variant: small-caps;">Teeᴇᴇ</h1> <p style="color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px">NEWSLETTER …</p> 

Note that the first two `e were small and were noticeably thinner in the stems than the" T ", and much smaller than the small caps in the PDF.

The second two "E" are the small Unicode characters that I found in the Unicode phonetics section. They have equivalent stems, but they are still too low in terms of height above the base level.

EDIT: I just tested 3 Lucida Faces on OS X in a suitcase, and Small Caps for the complete alphabet does not exist in any of the Lucida font families that I'm looking at.

All letters, including "T" and "P", seem thicker than the PDF version, but this is only a second-order problem.

What manual options are available. I am inside the <h1> , which means that if I create a new tag to set a different font size after "T" for "ERRA", I get LineFeed for free: - /

How to set multiple font sizes in one line, should I use the <p> and custom classes to set CSS and inline font sizes?

Thank you for reading: -)

Answer 1

You can set multiple font sizes on the same line with an embedded element like <span></span> . So in your example ...

 <style> h1 { color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; } h1 span { font-variant: small-caps; } .newsletter { color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px } </style> <h1>Tee<span>ee</span>EE</h1> <p class="newsletter">NEWSLETTER …</p> 

EDIT: Here's an updated snippet that might help:

 <style> body { background:#658290 } h1 { color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; } h1 span { font-variant: small-caps; letter-spacing:0.3em } h1 span.upper { font-size:130%; } </style> <h1><span class="upper">ee</span><span class="lower">ee</span></h1>