How to Change Size of Headers in CSS

There are different types of headers in HTML, which can be defined using the h1 to h6 tags. The h1 tag is the largest and most important header, while the h6 tag is the smallest. You can change the size of a header by changing its font-size and line-height properties.

In most cases, we only need to set font-size property.

<html>
  <head>
    <title>Change headers' font sizes</title>

    <style text="text/css">
      .wrapper{margin: 2em; font-family: sans-serif;}
      h1{font-size: 1.8em;}
      h2{font-size: 1.5em;}
      h3{font-size: 1.17em;}
      h4{font-size: 1em;}
      h5{font-size: 0.9em;}
      h6{font-size: 0.8em;}
    </style>
  </head>

  <body>
    <div class="wrapper">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
    </div>
  </body>
</html>

To change the size of a header:

In your CSS file, select the header you want to modify. For example, if you want to change the size of your h1 header, you would add the following code to your CSS file:

h1 { font-size: 24px; line-height: 36px; }

Change the values of the font-size and line-height properties to whatever you want. In the example above, we changed our h1 header’s font-size to 24px and its line-height to 36px.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close