how to change default h1 and h2 font size

I wish to make the font size smaller on the h1 and h2 tags. I currently have TK Google fonts installed (from themekraft) and have set my default title to 31 because this is as small as I want the title, but the h1 and h2 are huge.

Supposedly the TK google fonts is supposed to overrule the other settings but that isn't perfectly the case. I can live with this, but I do want to fix the size and am not sure how to make sure it overrules what is there in other ways.

Maybe an !important tag? (I keep reading about these)

  • PC
    • WPMU DEV Initiate

    Hey there Lis,

    Thanks for posting on the forums.

    I believe some custom CSS can easily do that.

    Can you kindly share a link to your website where I can see the h1 h2 etc tags in action and suggest CSS accordingly ?

    Generally its defined as

    h1 {font-size:40px;}
    h2 {font-size:30px;}

    For forcing your custom CSS it can be added as

    h1 {font-size:40px !important;}
    h2 {font-size:30px !important;}

    But having a look at your site would help better.

    Please advise !

    Cheers
    PC
    Sales &Support

  • Imperative Ideas
    • HummingBird

    A quick bit of advice.

    1. Change that password the minute you get this solved, sooner if possible.
    2. Next time, give it to the staff directly, they will instruct you on how to do so

    With that said, I see that your password has already been updated. That is good.

    Keep in mind that a page should only have one H1 (like a book title). The H2 is a chapter heading - only put more than one if stuff is between them. From H3 on down, the hierarchy should make sense but it's less essential to Google's view of your site.

  • Lis
    • Site Builder, Child of Zeus

    Thank you! Part of the reason this matters is that on my other site (main site) the them had h1 be very small as part of the default and way back when I didn't know how to change that--or that you even could. Now that site is auto-blogging INTO this site, and the h1 looks huge!

    I will figure something out.

  • Imperative Ideas
    • HummingBird

    Hey Lis,

    Can I offer you a basic tutorial link for CSS? I promise that within a few days you will be a whole heck of a lot more comfortable with this sort of thing. The TutsPlus+ 30 days course series is awesome for every language that they cover.

    This one in particular is something you should really force yourself to do:
    http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/

    HTML and CSS go hand in hand, they're two halves of a coin, and this course teaches them that way. The lessons are well paced and designed to be digested one a day. If you already know everything in one of them then watch a second video that day.

    Trust me, you'll be glad that you did this. Being literate in HTML/CSS is the foundation of every great thing you will ever do with online content creation.

  • Lis
    • Site Builder, Child of Zeus

    Thank you! Yes, I have looked up "tutorial" and css and couldn't find anything that started like a "CSS for dummies" - LOL. will do!

    Okay, so will you humor me for a minute. My headers aren't updating...

    (I know these are small headers but I just wanted to test them.)

    I updated style file and hit ctrl f5 on this page, to no avail.
    http://restministriessunroom.co/2013/10/11/when-we-need-help-to-believe/

    my css looks like this:

    h1 {font-size: 24px !important;}
    h2 {font-size: 22px !important;}
    h3 {font-size: 20px !important;}
    h4 {font-size: 18px !important;}
    h5 {font-size: 16px !important;}
    h6 {font-size: 15px !important;}

  • Peter
    • Site Builder, Child of Zeus

    Hi Lis,

    One or two pixels is a very small difference that you will find hard to see. If you try larger gaps between you will get closer to what you are looking for.

    h1 to h3 are the most common especially for SEO purposes. Try 10px difference between each.

    Regards

    Peter

  • Imperative Ideas
    • HummingBird

    Pwen is right, that's just not a lot of variation in the size.

    First things first though, !important is a dangerous tag to use on such a low level element because it becomes a lot harder to target the thing later on. You are saying that your H-tags should be that size in every element, no matter where they are located. A sidebar? Ha! Same as the main content, why would it change???

    I think you would be better off setting your H1s only within the .entry container and base the sizing on a golden ratio. Also, your paragraph fonts are supposed to be in Raleway but they have a :100 on the end, which is breaking them. I've fixed that here.

    .entry h1 {font-size: 39px;}
    .entry h2 {font-size: 24px;}
    .entry h3 {font-size: 19px;}
    .entry h4 {font-size: 15px;}
    .entry h5 {font-size: 15px;}
    .entry h6 {font-size: 15px;}
    .entry p {font: 15px/25px Raleway, Helvetica, sans-serif;}

    Let it be noted that Raleway is a terrible body font.

  • Imperative Ideas
    • HummingBird

    @pwen the closest thing you will find to WPMU training is to read wpmu.org

    If you want to learn, I would pick up monthly memberships to both TutsPlus+ and Lynda. The Lynda courses are less entertaining and take a far more devoted type of focus to complete. The TutsPlus stuff is usually the right place to start on a new skill for that reason.

    For example, you might start out learning PHP at TutsPlus, then shift over to Lynda for Object Oriented PHP. Lynda has PHP 101 type courses but they are harder to re-watch over and over again. Jeffrey Way is just a much friendlier voice to have on your ear when you have to repeat a lesson for the fifth time because he's hit a concept that is difficult for you (something I assure will happen a few times in the free jQuery series)

  • Imperative Ideas
    • HummingBird

    One more thing @Lis

    Don't just rely on size. You also might consider editing the color of your font to slowly desaturate as well. Using blue as an example and changing the sizes to where I would set them in a 660px wide presentation --

    .entry h1 {font-size: 42px;color: #00477f;}
    .entry h2 {font-size: 26px;color: #044e89;}
    .entry h3 {font-size: 20px;color: #0c5a98; font-weight: bold;}
    .entry h4 {font-size: 16px;color: #1c6cab; font-weight: bold;}
    .entry h5 {font-size: 16px;color: #4187bf; font-weight: bold;}
    .entry h6 {font-size: 16px;color: #9dacb8; font-weight: bold;}
    .entry p {font: 16px/26px Arial, Helvetica, sans-serif;}
  • PC
    • WPMU DEV Initiate

    Thanks Ian for being on Top of this and providing your great thoughts here. The links you shared are really nice !

    Lis, what is the current status of your issue ? I just want to make sure that its resolved in the first place. Please advise !

    Does WPMU cave a resource section for similar training and support?

    Hey Peter, we have wpmu.org as Ian suggested and also we are constantly working on adding more areas to WPMU DEV membership so something like having a training area could go well :slight_smile:

    Cheers
    PC
    Sales &Support

  • Lis
    • Site Builder, Child of Zeus

    Thanks for all of your help! I think this will best meet my needs for now.

    I will have a test group of people in the social network before opening it up to everyone to transfer from our old site and part of their input will be on content fonts. I like it crisp and clean but we also have many with vision and cognitive issues due to their chronic illness (which is who we serve.)

    Thanks to @imperative ideas for the IDEA of gradients in color. This worked great for h1 and h2.

    This is what I ended up using:

    .entry h1 {font-size: 22px;}
    .entry h2 {font-size: 22px;color: #666666;}
    .entry h3 {font-size: 19px;}
    .entry h4 {font-size: 15px;}
    .entry h5 {font-size: 15px;}
    .entry h6 {font-size: 15px;}
    .entry p {font: 15px/25px Droid Sans, Helvetica, sans-serif;}

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.