Fight to align top of lowercase chars in text elements

[michamicha]

I’ve been fighting for years to correctly aligning the tops of different elements displaying text.
Because of the line-height a h1 element will always have some whitespace above it so it does not automatically align the lowercase characters in the text.

My thought was to always have some negative topmargin (for example -0.46em) on all text elements (h1-h6,p,etc) so relative to the font-size and the line-height the margin adjusts. One drawback is you can’t use any margin adjustments anymore and have to use padding instead.

See this example. http://codepen.io/anon/pen/azWZRN
I want the lowercase chars to align the red text above. Use the checkbox to toggle my proposed solution.

Maybe you’ve got some other thoughts on this?

[Paulie_D]

Gotta say, that ‘fixed’ alignment looks very unnatural to me.

[michamicha]

In my defense :)
I work at a design agency where pixelperfect is the way to go.
Here’s an example screenshot of a PSD where you can see a real life example of this ‘problem’.
http://imgur.com/Eihxna8

[shaneisme]

I work at a design agency where pixelperfect is the way to go.

I’m sorry. :(

[michamicha]

Ok, thanks for your input.

[Author]

Posts