Login/Register
In CSS how do you change font size of h1 and h2
Asked Answered
Solved csswordpresshtml-heading
Z

6

37

In a WordPress twenty eleven theme. I want to change the size of headings When I wrap my headings around h1 and h2 tags as follows

<h1>My h1 heading </h1>
<h2> My h2 heading </h2>

The font size of heading in the theme I am using is almost same as content's font except that they are bold. So my headings are not quite prominent.

I guess I would need to change something in the CSS file. Please advise what exactly in need to put in.

Zennie answered 19/5, 2012 at 19:4 Comment(3)
Might seem obvious, but make sure there isn't another container inside the one you're looking at that is defining a font size. :) – Sadick
Also make sure no one has used !important in some other CSS file. I wound up here (this question) because I was trying to change the size of h2 on one specific page and it just was not changing. I started to think I was going crazy and was using the wrong syntax or something. I eventually found out someone else had set h2 size !important much further up stream. Ugh. Don't ever use "!important"... – Restore
You can also change the font size of h1 or h2 tags in some occasions setting the style argument directly in html like <h1 style="font-size:2.25rem;">My h1 heading </h1> and let the other headers to be set by the .css file – Here
L
54
h1 {
  font-weight: bold;
  color: #fff;
  font-size: 32px;
}

h2 {
  font-weight: bold;
  color: #fff;
  font-size: 24px;
}

Note that after color you can use a word (e.g. white), a hex code (e.g. #fff) or RGB (e.g. rgb(255,255,255)) or RGBA (e.g. rgba(255,255,255,0.3)).

Lacroix answered 19/5, 2012 at 19:7 Comment(0)
A
16
 h1 { font-size: 150%; }
 h2 { font-size: 120%; }

Tune as needed.

Approximal answered 20/5, 2012 at 10:23 Comment(0)
L
6

What have you tried? This should work.

h1 { font-size: 20pt; }
h2 { font-size: 16pt; }
Legato answered 19/5, 2012 at 19:7 Comment(0)
P
1

If you want to change a header specifically this is a much easier solution

<style>
    h1.increase {
       font-size: 15px;
}
</style>

<h1 class="increase">Header</h1>
Putty answered 1/4, 2021 at 21:7 Comment(0)
E
1

If you only change the font size, the text might intersect on smaller device types.

<style>
.heading-1{
  font-size: 350%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

enter image description here

To make it responsive, consider tweaking the line height too.

<style>
.heading-1{
  font-size: 350%!important;
  line-height: 120%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

enter image description here

Epanorthosis answered 5/9, 2021 at 8:51 Comment(2)
Why the different scaling for line-height and font-size? – Tillietillinger
For responsiveness, otherwise text will start overlapping – Epanorthosis
M
1

You can quickly achieve using Bootstrap CSS.

enter image description here

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Larger Heading</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

    </head>

    <body>
        <main>
            <h1 class="display-1">Display 1</h1>
            <h1 class="display-2">Display 2</h1>
            <h1 class="display-3">Display 3</h1>
            <h1 class="display-4">Display 4</h1>
            <h1 class="display-5">Display 5</h1>
            <h1 class="display-6">Display 6</h1>
        </main>
    </body>

    </html>
Marciemarcile answered 25/1, 2023 at 7:33 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.