How to reduce H1 tags to a normal size

[LiberMan]

Hello, I am using the font, tahoma, on my site. I am using H3 tags because h1 tags are to bulky and awkward no matter what size I reduce them to. Is there a way around this? Using a different font or CSS?

[agua]

h1 {font-size: 12px;}

Change 12px to whatever size you like or use % or em - have a look here for css font-size usage (http://www.w3schools.com/css/pr_font_font-size.asp)

[Lamer980]

use css please to style the presentation to your needs.

but please ensure you use the Header tags in according to hierarchy. meaning most important use
, then follow by
, and
and so on.

When CSS is turned off, your page should look nicely from top to bottom...plain and simple and straightforward.

[deathshadow]

but please ensure you use the Header tags in according to hierarchy.
That right there is the part of heading tags most people don't understand, misunderstand, or just don't grasp.

The easiest way to think of it is like a tree. H1 is the trunk. You should normally only have one trunk, otherwise it's two trees, not one. Your various subsections branch off (h2), which if they have subsections they too are branches (h3), and so on and so forth.

Whenever you change heading 'level' you need to ask yourself - "Is this heading a child of the one before it, a sibling, or is it a sibling of the one above it".

Because of that question I often end up with multiple headings on a page that are all the same priority - since it's inappropriate to have more than H1 on a page, that makes them all H2's... so what to use for the H1?

Think of pages like a newspaper - the name of the paper appears at the top of every page - largest print on the first page, but it's there on every page. That's an H1. While the first headline on the first page is a 'standout', it is not a higher priority than the others on the page, it is just being presented different - so all the headlines on the page are H2's - they simply may have different stylings applied.

A common mistake you see people do is dropping down to like an H4 or lower for stuff in the sidebar without the intermediate level headings in-between. This is so semantically incorrect it's not funny... because are those H4's subsections of the heading that came before it? If you have a content first model and the last headline was a h2, using a H3 through H6 would imply that said section was a subsection of that H2 - that's the last thing you want to imply... so they too should likely be H2's from a document flow perspective.

Headings are the most abused, misused and misunderstood tags they are - but with the increase in people FINALLY starting to separate presentation from content, paying attention to things like SEO, and in general starting to just MAYBE write actual HTML instead of gibberish - we may someday use tags for their meaning and not their appearance.

[zachary tyrl]

yes you can use Style with font style:tohama, arial ............ if one is not avail it will take second automatically.

try this its a great

[azeemi]

you can try this Link (http://www.css-help.com/css-seo.htm) may be it helps you.


SEO Friendly Web Design (http://www.aedsys.com/search-engine-optimization/seo-friendly-web-design.html)

[McCainDeeny]

Hello, I am using the font, tahoma, on my site. I am using H3 tags because h1 tags are to bulky and awkward no matter what size I reduce them to. Is there a way around this? Using a different font or CSS?



You should be able to resize the text using CSS.

Help with Code Tags
(Toggle Plain Text)

h1
{
font-size: 1em;
font-weight: normal;
}

h1 { font-size: 1em; font-weight: normal; }

That should resize the contents of any h1 (nopte, in some DocTypes there should only be 1), to the desired size.

Please note: I have set it to being 1em.
By default, that should equate to roughly 16px. This is done so that the text will Resize in compliant browsers and in IE6 (as setting it to px will result in IE6 not resizing the text!).
Of course, if you have altered font-sizes, you may want to adjust it to your own tastes (simple trial and error should do).


To effect all of them... try combining the identifiers...
Help with Code Tags
(Toggle Plain Text)

h1,h2,h3,h4,h5,h6
{
font-size: 1em;
font-weight: normal;
}

h1,h2,h3,h4,h5,h6 { font-size: 1em; font-weight: normal; }

That should all of them to the same... then you can go and alter each from there if you wish.
Please be aware that Header tags are sometimes used as visual identifiers, and thus more important (lower numbers after the 'h'), should be more visually obvious.


If this is not working, then it is possible that you have somethign 'overiding' your styling.
This could be a similar set of styles appearing lower in the css file (if external), or embedded styling overiding the external styling, or inline overiding the embedded/external... etc.
Altenratively, it could be more "specific" styling 'overiding'... such as

Help with Code Tags
(Toggle Plain Text)

#contents h1

#contents h1
or
Help with Code Tags
(Toggle Plain Text)

.maintitletext

.maintitletext
or
Help with Code Tags
(Toggle Plain Text)

h1.maintitletext

h1.maintitletext

etc.

So, push comes to shove, try adding hte styling inline to see if it works...
Help with Code Tags
(Toggle Plain Text)

<h1 style="font-size: 1em; font-weight: normal;">Text Here</h1>

<h1 style="font-size: 1em; font-weight: normal;">Text Here</h1>

If that works, then remove the 'style', then try it embedded...
(top of the code, in the <head> section)
Help with Code Tags
(Toggle Plain Text)

<style type="text/css">
h1
{
font-size: 1em;
font-weight: normal;
}
</style>

<style type="text/css"> h1 { font-size: 1em; font-weight: normal; } </style>
If that fails, then look through and see if there is anything more specific or lower down the styling that could overide it.

If that works, then remove the embedded code, and try inserting it into your external file.
Help with Code Tags
(Toggle Plain Text)

h1
{
font-size: 1em;
font-weight: normal;
}

h1 { font-size: 1em; font-weight: normal; }


It may take a bit of time to go through, but you should find the problem.


applicant tracking system (http://www.simplicant.com)

[Mr. Pink]

One detail caught my eye as I was reading the above post.


Please note: I have set it to being 1em.
By default, that should equate to roughly 16px. This is done so that the text will Resize in compliant browsers and in IE6 (as setting it to px will result in IE6 not resizing the text!).

I was unaware that settings done in px are not rendered by IE6 (I am mac based so I don't even have IE6 on my machine).

I have style sheets with font sizes as low as 9px. If 1em is roughly 16px, then what em values should I use for 14px, 12px, 11px, 10px, 9px?

By the way, what does em stand for? (I always assumed px meant pixels, but I have never seen em until I started reading articles on this site).

Any clarifications on these issues are appreciated. :)

[Dan Schulz]

That's easy. EMs are not relative to pixels. They're relative to the current font size, regardless of what it may be. If the current font size is 10px then 1em will equal 10px. If it's equal to 72pt, then 1em will equal 72pt. It's that easy.

And anyone who says that 62.5% = 10px needs to have their head examined, because it doesn't.

[Mr. Pink]

I am using H3 tags because h1 tags are to bulky and awkward no matter what size I reduce them to...

I don't understand why you are having trouble. If I specify an H1 tag to be a certain font size, it changes the H1 tag to that size.

Now that you mention that you are having trouble I wonder if I may be missing something.


...When you're altering the appearance of HTML elements through styling sheets, it's always a good idea to look at the pages through a browser that doesn't support everything you're doing in your design...

I couldn't agree more. In fact it is very much a recommended practice to check your web pages on all browsers and platforms. This is why I always check against IE on a Mac, which is considered to be an obsolete browser. Nevertheless, I still check my designs in that browser and if something doesn't work there, I tweak it until I make it work. Then when it works there it also works on all other browsers. My reasoning: even if IE for Mac is hardly ever used by anyone, I see no reason why a site should not be built in such way that it renders correctly in all browsers.

My problem is that I am Mac based, so I don't have a Windows system to check my pages. But I always try to check them from other people's PCs, whenever I get the chance.

I wonder if this is why I may not be having trouble resizing H1 tags and I wonder if my sites don't really look the way I want them to, to the rest of the world.