Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Fight to align top of lowercase chars in text elements

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #193578
    michamicha
    Participant

    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?

    #193580
    Paulie_D
    Moderator

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

    #193587
    michamicha
    Participant

    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

    #193624
    shaneisme
    Participant

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

    I’m sorry. :(

    #193689
    michamicha
    Participant

    Ok, thanks for your input.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Other’ is closed to new topics and replies.