1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

<H1/2/3> Tags = Bad Typography?

Discussion in 'BlackHat Lounge' started by SpellZ, Apr 16, 2011.

  1. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    So I want to put in H1 H2 and H3 tags in my post, but the leading between H tags and normal font is horrible. (Leading = space between lines)

    Like normal text looks like this:

    THIS IS AN EXAMPLE TEST LINE 1
    THIS IS AN EXAMPLE TEST LINE 2

    Notice how the space between the lines is small and nice.

    If I add the H1 tag, this is how it'll look like:

    THIS IS AN EXAMPLE OF TEST LINE 1

    THIS IS AN EXAMPLE OF TEST LINE 2


    There is this UGLY space in between the two lines... how do I decrease it?
     
  2. Autumn

    Autumn Elite Member

    Joined:
    Nov 18, 2010
    Messages:
    2,197
    Likes Received:
    3,041
    Occupation:
    I figure out ways to make money online and then au
    Location:
    Spamville
    css margin-bottom, padding-bottom and line-height 0px should get you started.
     
  3. blackhit

    blackhit Super Moderator Staff Member Jr. VIP Premium Member

    Joined:
    Jan 28, 2008
    Messages:
    2,402
    Likes Received:
    4,251
    Location:
    Dark Side Of The Moon
    Edit your stylesheet.

    Try adding this to it:

    h1 {
    margin-bottom:0px;
    }

    If you want it for all H tags:

    h1,h2,h3,h4,h5,h6 {
    margin-bottom:0px;
    }
     
  4. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    Nope :( didnt work
     
  5. Autumn

    Autumn Elite Member

    Joined:
    Nov 18, 2010
    Messages:
    2,197
    Likes Received:
    3,041
    Occupation:
    I figure out ways to make money online and then au
    Location:
    Spamville
  6. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    This is what I put in my style.css

    HTML:
    h1, h2, h3 {
        font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
        font-weight: bold;
    line-height: 0pt;
        }
    It doesn't seem to work very well... Here are two(2) examples of what the result is:

    EXAMPLE_1
    [​IMG]

    As you can see, with the <H> tags, if it has two lines, they overlap each other.

    But it works fine if it its only one line:

    EXAMPLE_2
    [​IMG]


    How do I fix it so it'll be fine for when I have 2+ lines of <H> tags?
     
  7. GrizzlyAdams

    GrizzlyAdams Regular Member

    Joined:
    Feb 17, 2011
    Messages:
    479
    Likes Received:
    405
    Occupation:
    Freelancer
    Location:
    British Columbia
    dont use line height rule

    use margin rule and padding


    h1 {
    padding:0px;
    margin:0px;
    }
     
  8. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    I almost got it!

    Here is the code that I added:

    HTML:
    p {
    margin:0 0 10px 0;
    padding:0;
    text-align: left;
    }
    
    h2 {
    margin: 0;
    padding:0;
    }
    BUT! There is just still one more typographical problem which I don't like...

    My topic title is <H2> so since gave the command that all <H2> tags don't have any space underneath it, it also adds it to the title, so at the end... it looks like this...



    While I want it to be like this:


    How I can solve it, is within every post, I press <enter> and start everything from second line, but I don't really want to do it all the time, I want it to be perfect from the get-go

     
  9. GrizzlyAdams

    GrizzlyAdams Regular Member

    Joined:
    Feb 17, 2011
    Messages:
    479
    Likes Received:
    405
    Occupation:
    Freelancer
    Location:
    British Columbia
    margin-bottom:20px;
    margin-top:0px;
     
  10. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    Nope, doesn't seem to work.

    Here is what I'm working with:
    As you can see the <h2> title is wrong

    but the <h2> tips are fine.
    The <h2> tips should be like that.

    But the <h2> title should have a space underneath it. But if it has 2 lines, then the white space should follow under the second line, not the first and second
     
  11. flexnds

    flexnds Power Member

    Joined:
    Jan 4, 2010
    Messages:
    643
    Likes Received:
    680
    Occupation:
    Internet Marketing, Web development, Internet Repu
    Location:
    AZ
    Also try line height

    h1 {
    line-height: 110%;
    }
     
  12. blackhit

    blackhit Super Moderator Staff Member Jr. VIP Premium Member

    Joined:
    Jan 28, 2008
    Messages:
    2,402
    Likes Received:
    4,251
    Location:
    Dark Side Of The Moon
    I'm not sure I'm getting what you want to achieve...

    but if your Tips are ok and the title is not you should use H3 for the Tips and reserve the H2 for your post titles.

    This way you can style them independent from each other.
    I.e. if you add a margin-bottom to the H2 you can create space between the title and the content.