#1
  1. Contributing User
    SEO Chat Discoverer (100 - 499 posts)

    Join Date
    Oct 2004
    Location
    England
    Posts
    110
    Rep Power
    15

    Controlling size of <H1><H2>text etc. via css


    In one of the site reviews someone referred to the need for <H1> and <H2> tags to help with SEO and that if these tags were not suitable for the style of your site that you should control the text size via CSS.

    I'm trying to slowly (no other choice) but surely get things improved on my pages and I was wondering if anyone could help in showing me how to control the text size of the heading tags to mirror the rest of my site. i.e. currently using:

    "<font color="#000000" face="VERDANA, ARIAL, HELVETICA" size="1">"and
    <style type="text/css">

    A:link {text-decoration: none}
    A:active {text-decoration: none}
    A:visited {text-decoration: none}
    A:hover {text-decoration: underline}

    </style>


    I know I'm not defining the text in CSS at the moment, just via normal tags (missus is not that happy to mess around with the shopping carts way of doing things and she is boss ), but I'm likely to get my way with the Heading tags, if it is a simple change which is in keeping with the current style of the site.

    Many thanks in advance.

  2. #2
  3. http://tinyurl.com/cz56g
    SEO Chat Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    D0RDRECHT NL
    Posts
    6,063
    Rep Power
    31
    You can add lines like this one:

    H2 {text-decoration:none; font-weight:normal; display:inline;
    font-family: verdana, arial, helvetica, sans serif; font-size: 15pt; color:#000000; }

    inside the STYLE tag.

    Experiment with the font-size bit : 12pt is about normal text size, but you can get it to match your other stuff. There are really good CSS tutorials to be found on the web - mind you. Tips and tricks and all.

    Keep the H1 tag for REALLY BIG headers, and don't stuff all your text inside H2 headers, or we'll all think you're a spammer... ;)
  4. #3
  5. Contributing User
    SEO Chat Discoverer (100 - 499 posts)

    Join Date
    Oct 2004
    Location
    England
    Posts
    110
    Rep Power
    15
    Originally Posted by Wit
    You can add lines like this one:

    H2 {text-decoration:none; font-weight:normal; display:inline;
    font-family: verdana, arial, helvetica, sans serif; font-size: 15pt; color:#000000; }

    inside the STYLE tag.

    Experiment with the font-size bit : 12pt is about normal text size, but you can get it to match your other stuff. There are really good CSS tutorials to be found on the web - mind you. Tips and tricks and all.

    Keep the H1 tag for REALLY BIG headers, and don't stuff all your text inside H2 headers, or we'll all think you're a spammer... ;)
    So am I likely to get away with not having a specified "pt" font size and just use size="1" oram I on a hiding to nothing.

    i.e.
    <H1> {text-decoration:none; font-weight:normal; display:inline; font-family: verdana, arial, helvetica, sans serif; font-size: 1; color:#000000; }
    <H2> {text-decoration:none; font-weight:normal; display:inline; font-family: verdana, arial, helvetica, sans serif; font-size: 1; color:#000000; }

    ( I do use the brackets <> round H1 and H2 don't I)

    I know it is somewhat like style over substance, but thats why the H1 and H2 tags had not been used.
  6. #4
  7. http://tinyurl.com/cz56g
    SEO Chat Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    D0RDRECHT NL
    Posts
    6,063
    Rep Power
    31
    You have to leave out the <> "brackets" if you declare the style for all your page's H1 or H2 tags. Notice how the A:link etc. don't have any brackets around them either... at least INSIDE the STYLE tag in the HEAD of your page.

    Of course: on your page itself, so outside the STYLE tag, the H1 etc. tags have brackets around them as usual.

    Don't know if the font-size:1 bit works in this case. Could work, but I don't know. I NEVER use that type of font-size setting. I don't even use measurements like 12pt etc... I always go for pixels. For example font-size:14px . That said: try it if you want, or check a CSS reference guide.

    Furthermore, it's quite extreme to make H1 AND H2 tags appear as regular text. Why do you want that? If you want to have your keywords inside header tags for SEO reasons, why not have them stand out for your visitors as well?

    Finally, you could benefit a lot from having all your page's styling done in CSS and STYLE tags/attributes. That way you can do away with all the lengthy FONT tags and make it easier to maintain/change. Quicker to load too.

    Good luck.
    Last edited by Wit; Oct 25th, 2004 at 02:43 PM.
  8. #5
  9. Contributing User
    SEO Chat Discoverer (100 - 499 posts)

    Join Date
    Oct 2004
    Location
    England
    Posts
    110
    Rep Power
    15
    All I can say is: thanks very much, tried the size option and regretted it, but your suggestion on the pixels did the job very well after a bit of experimentation. The headers are in bold, just didn't want massive letters messing with the subtle site design.

    I'll probably do the font tag clean up with my static html pages first given the time, and then see about the pages created by the cgi script. But I guess getting the cart cgi software to create alt tags might take priority, as I want to be able to comply with a new disability discrimination law here in the UK - basically taking reasonable steps to include disabled people (that it is also good for SEO purposes, makes me want to do my bit).
  10. #6
  11. <- Solan Gundersen
    SEO Chat Adventurer (500 - 999 posts)

    Join Date
    Jun 2004
    Location
    C:\Norway
    Posts
    756
    Rep Power
    17
    Originally Posted by berkswelldirect
    But I guess getting the cart cgi software to create alt tags might take priority, as I want to be able to comply with a new disability discrimination law here in the UK - basically taking reasonable steps to include disabled people (that it is also good for SEO purposes, makes me want to do my bit).
    I haven't read this law, but I will think that using px or pt will not comply with it(?) because then the fonts are locked in size (and people who doesn't see well may wan't to increase the font-size). So, I would say go for em instead. And by the way, define a "standard" font and size in your CSS (it's a good rule).

    Here is how:
    Code:
     	 
    body {
    color:#000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em; 
    }
  12. #7
  13. Contributing User
    SEO Chat Discoverer (100 - 499 posts)

    Join Date
    Oct 2004
    Location
    England
    Posts
    110
    Rep Power
    15
    Originally Posted by Mano70
    I haven't read this law, but I will think that using px or pt will not comply with it(?) because then the fonts are locked in size (and people who doesn't see well may wan't to increase the font-size). So, I would say go for em instead. And by the way, define a "standard" font and size in your CSS (it's a good rule).

    Here is how:
    Code:
     	 
    body {
    color:#000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em; 
    }
    Its more aimed at shops and public buildings, but I'm sure a few large uk company websites will be hit by a lawsuit before too long as it is more "reasonable" to expect them to make their sites compliant with non-graphical web-browsers with text readers describing the pictures. Its aimed very much at making life easier for disabled people to shop.

    It might be a very convenient way for SE professionals to extract a bit of money out of both a) marketing and b)"disabled access requirements" that large companies in the UK make a fuss about the cost of b) while helping them improve a).

    What does the "em" mean in "0.8em"? Not come across that one before.
  14. #8
  15. <- Solan Gundersen
    SEO Chat Adventurer (500 - 999 posts)

    Join Date
    Jun 2004
    Location
    C:\Norway
    Posts
    756
    Rep Power
    17
    Originally Posted by berkswelldirect
    What does the "em" mean in "0.8em"? Not come across that one before.
    1em is the font-size the user has set as standard. 2em is twice as large as the users standard. "Normal" persons wan't notice if you use em or not, but the user can now adjust the font-size. When I started designing we were told to use px so we had control on our design, but I have changed my attitude about that. If you use em the user can make your design "break" if he/she changes the standard font-size, but the website is for the visitors, not for me as the designer.
  16. #9
  17. http://tinyurl.com/cz56g
    SEO Chat Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    D0RDRECHT NL
    Posts
    6,063
    Rep Power
    31
    True - the use of "em" rather than "px" still gives you the oppurtunity to use IE's font size button. Of course, even "px" sized fonts can be scaled/zoomed using FireFox etc. But if your formatting isn't hurt by dynamic font sizes, always go for the option Mano70 suggests. I solved this by having alternate stylesheets with different (fixed) font sizes.

    FYI, "em" originally stands for the size of the captical M in each font. So this unit of measurement is always relative to your base font, whichever you choose for that in the first place. This can also mean that the line-height will vary slightly with your choice of base font.
    Last edited by Wit; Oct 26th, 2004 at 02:01 AM.
  18. #10
  19. No Profile Picture
    Contributing User
    SEO Chat Discoverer (100 - 499 posts)

    Join Date
    Aug 2004
    Posts
    140
    Rep Power
    16
    Chiming in, here is what I have been doing:

    <h1 style="font-family: Helvetica; font-size: 14px; color: #ff0000; margin-bottom: 0; padding-bottom: 0;"><a href="url" title="keyword">keyword</a></h1>
    I have been trying to "lose" the space above and below. I "think" I have the bottom nailed maybe it is just luck as I have been copy and pasting from different posts on this subject.

    now
    text

    h1

    text

    i want this

    text
    h1
    text

    maybe i need to add margin-top: 0; padding-top: 0 also? shrug
  20. #11
  21. http://tinyurl.com/cz56g
    SEO Chat Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    D0RDRECHT NL
    Posts
    6,063
    Rep Power
    31
    What about the display:inline; bit? Did you try that?

Similar Threads

  1. <h1> Heading and forcing a font size
    By ragos in forum Search Engine Optimization
    Replies: 39
    Last Post: Jun 13th, 2012, 08:31 AM
  2. One click to make text size bigger for readers
    By iKwak in forum Web Design, Coding and Programming
    Replies: 7
    Last Post: Nov 30th, 2004, 05:40 AM
  3. Does page size effect google crawling
    By vaibhav in forum Google Optimization
    Replies: 1
    Last Post: Oct 25th, 2004, 02:48 AM
  4. Page size, cache size what is Google taking?
    By midnightfr in forum Google Optimization
    Replies: 5
    Last Post: Sep 28th, 2004, 03:09 PM
  5. <h1> <h2> etc sudden size changes ?
    By sunbreaks in forum Search Engine Optimization
    Replies: 1
    Last Post: Jun 4th, 2004, 09:41 AM

IMN logo majestic logo threadwatch logo seochat tools logo