I like how you have the text flush up against the edge, but you might want to mask the bottom of it as you have a few areas where it crosses over a pixel or two, such as the A and S.
absolute position some of that textured brown at the top of the content area to go over it... although I don't know how nicely that'd act cross platform. Probably wouldn't work. My last email I used LitmusApp with pretty good results for testing
@Alex: Can't do a lot of fancy CSS in HTML emails, unfortunately — however, I've done many absolute positioning/z-index/assorted other CSS tricks when the target is a browser (though support for things gets a bit iffy if you're too tricky).
Actually, I wouldn't mask the parts of the characters that overlap. It's the optics of the typeface, and in my opinion, it hurts the integrity of the type. Plus, it could look really nice if there's a descender in the rest of the type.
@Dan: Then a negative margin of 2px should have the same effect. Worth a shot, eh? Then again, I'm obsessive about little details when I notice them. Not always a good thing...
@Doug: oh it could certainly be done if that's what I wanted, but as Frank notes above, that would unnecessarily clip the letterforms, and lose the descenders, too.
Really unique header type treatment! Love the textures and the colors. I'm not sure whether the register now button would look better left aligned with the header or type itself the way you have it now. Just something to look at!
@Allison: Thanks! I tried a few different alignments, but chose this in the end because this particular design attempts to use a basic grid quite strictly, so the alignment of text elements was paramount.
You'll also notice the border of the image hanging outside the (invisible) grid — I like this sort of effect: it creates just enough balance so everything isn't just teetering on a single, left-aligned point.
I like it. Whereas clipping, masking.etc could possibly work if this was going to be a website, I don't think any mere mortal could pull that off consistently and effectively in a HTML email.
But I'd have to side with Frank, it'd hurt the optics. If you're going to crop a typeface, you crop a sizable chunk, not just a few px.
16 responses
I can't stop looking at this intersection.
3 months ago
"I like the feel of this project!"
3 months ago
I like how you have the text flush up against the edge, but you might want to mask the bottom of it as you have a few areas where it crosses over a pixel or two, such as the A and S.
3 months ago
@Doug: Normally I would, but this will be HTML text (in an HTML email, no less) so no such pixel trickery can be used :(
3 months ago
absolute position some of that textured brown at the top of the content area to go over it... although I don't know how nicely that'd act cross platform. Probably wouldn't work. My last email I used LitmusApp with pretty good results for testing
3 months ago
Rebound
Rebound
June 15, 2010
Excuse the fadedness. Photoshop is the suck.
3 months ago
@Alex: Can't do a lot of fancy CSS in HTML emails, unfortunately — however, I've done many absolute positioning/z-index/assorted other CSS tricks when the target is a browser (though support for things gets a bit iffy if you're too tricky).
3 months ago
Actually, I wouldn't mask the parts of the characters that overlap. It's the optics of the typeface, and in my opinion, it hurts the integrity of the type. Plus, it could look really nice if there's a descender in the rest of the type.
3 months ago
@Frank: What you said :)
It's awkward when such a small amount of the letterform gets clipped, IMO.
3 months ago
@Dan: Then a negative margin of 2px should have the same effect. Worth a shot, eh? Then again, I'm obsessive about little details when I notice them. Not always a good thing...
3 months ago
@Doug: oh it could certainly be done if that's what I wanted, but as Frank notes above, that would unnecessarily clip the letterforms, and lose the descenders, too.
3 months ago
Really unique header type treatment! Love the textures and the colors. I'm not sure whether the register now button would look better left aligned with the header or type itself the way you have it now. Just something to look at!
3 months ago
@Allison: Thanks! I tried a few different alignments, but chose this in the end because this particular design attempts to use a basic grid quite strictly, so the alignment of text elements was paramount.
You'll also notice the border of the image hanging outside the (invisible) grid — I like this sort of effect: it creates just enough balance so everything isn't just teetering on a single, left-aligned point.
3 months ago
I like it. Whereas clipping, masking.etc could possibly work if this was going to be a website, I don't think any mere mortal could pull that off consistently and effectively in a HTML email.
But I'd have to side with Frank, it'd hurt the optics. If you're going to crop a typeface, you crop a sizable chunk, not just a few px.
So yeah, this floats my boat :)
3 months ago
@dan, hhhotness. Fun to see the other designers variations on these templates.
3 months ago
@Matthew: indeed — can't wait to see everyone's complete designs :)
3 months ago