Member Avatar for JODY22

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?

  • 3 Contributors
  • 2 Replies
  • 1K Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Dani

Recommended Answers

All 2 Replies

Member Avatar for autocrat

You should be able to resize the text using CSS.

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...

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

#contents h1

or

.maintitletext

or

h1.maintitletext

etc.

So, push comes to shove, try adding hte styling inline to see if it works...

<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)

<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.

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

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

Member Avatar for Dani

You can also use padding:0px; margin:0px; display:inline; so that H1 tags can be on the same line as other text.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.