Choosing typography and line height sizes in web design.

Understanding heading tags in web design

Heading tags or H tags are web development tags used to tell a browser or search engine what level of header they are looking at. Every web page should follow the same rules when it comes to heading tags, but as designers and developers, we have sneaky ways of getting around these, but more on that later.

The first heading on a page, and usually the largest, is known as the H1 (Heading 1). Makes sense. You can only have one of these on any one page. In development, this tag is written like this <h1>This is a title</h1>.

The next heading you come to as you scroll down the page should be an H2. It’s next down in the list of priorities for headings. It is the second priority heading. The H1 is telling you what the page is about, the H2 will be telling you what the next section (within the page) is talking about.

Take this article, for example, the H1 is the title of the page (Typography sizing and line height in web design). Then within this article, we have a few sections, each with its own title. Each of these is an H2. You can have multiple H2s on any one page. If these sections were broken down into further subsections, each of these subsections would use an H3 as their heading. If those were then broken down again, those would be H4s. So on and so forth, up to H6, which is the smallest, and lowest priority heading tag on a page.

Our goal is to pick a pixel size value for each one of these headings, so we’ll end up with six different sizes for each of the six headings.

Picking a base size

In order for us to select sizes for our headings, we need to first know how large the bulk of our body copy will be. This is the text size for the paragraphs in your website design. This is entirely up to you, but to give you a rough idea, most websites these days use somewhere between 16px and 20px. You might want to consider your audience in this decision. Is this a website design for an optician company or an eye clinic? Might want to choose something slightly larger!

Creating a scale for headings

Head over to typescale.com – a wonderful tool made for exactly this purpose.

You’ll see in the top left, an input for your base size. Let’s set this to 18px (our default go-to size) and see what happens. All of the heading sizes on the right shift up in scale. Great. By default, it’s set to Poppins, but you can choose a Google Font from the dropdown if you like.

Now the fun part, choosing a scale. Again, this is largely up to personal preference and the brand that you’re working with. At the time of writing this article, big type is in. It’s everywhere. And it looks awesome. Typescale gives you a default setting of a Major Third scale which is 1.250. This means that each heading will be 1.25x larger than the previous one. So if your first heading size is 18px, your next heading size will be 22.5px (18 x 1.25).

Let’s put this into practice.

Let’s say for argument's sake that we want our smallest heading size (H6) to be the same size as our body copy (18px). We can see from the graphic that our next heading size (H5) would be 22.5px and 28.13px after that.

As a developer as well as a designer, I find it quite annoying when a designer gives me a style guide for a website and all of the type sizes have obscure decimal points in them. It is perfectly acceptable to round these up or down. I would round to the nearest whole number.

So in this example, using 18px as a base size and a Major Third typography scale our headings will be as follows:

H6 – 18px

H5 – 23px

H4 – 28px

H3 – 35px

H2 – 44px

H1 – 55px

These are perfectly ok, although to me, they are a little boring and a little safe. We haven’t created too much differentiation between the heading sizes, and therefore we might be lacking a little impact in our design work.

The best place to start now is in your Figma design. Start knocking some quick layout examples together and see if these will work for your brand. If they don’t, pick a different scale and see what happens.

Working with different sizes of body copy

18px is great, it’s nice and safe. But if every bit of smaller text on your website is the same size, it’s going to lack contrast and hierarchy again. At Tonic we use four body copy sizes in each of our projects, and this works perfectly with the Finsweet Client-First Webflow method that we often build with.

We use the following styles (the full stop denotes a class name in CSS, this helps our developers and designers to work efficiently together):

.text-size-large

.text-size-medium

.text-size-regular

.text-size-small

We usually set up our project so that .text-size-medium is our default size (and what we would build our type scale on). From there we have one larger and two smaller, which works well for us.

So in this example, our .text-size-medium is 18px, so we need to find a size for large, regular and small. Jumping down in sizes by 2 or 4 pixels works well, so let’s go with 14px and 12px. So that leaves us with:

.text-size-large

.text-size-medium – 18px

.text-size-regular – 14px

.text-size-small – 12px

Typically you might use the small size for small print at the bottom of a page, or a small image caption perhaps.

The large size will be used to create some impact and highlight a paragraph of text that we really want the user to focus on, so let’s go big. I think 24px is nice, let’s do it.

So here’s our typography system:

H1 – 55px

H2 – 44px

H3 – 35px

H4 – 28px

H5 – 23px

H6 – 18px

.text-size-large – 24px

.text-size-medium – 18px

.text-size-regular – 14px

.text-size-small – 12px

What you might notice is that we have a 24px font size and a 23px font size here. For harmony, I would even those two up, so let’s change our H5 size to 24px.

H1 – 55px

H2 – 44px

H3 – 35px

H4 – 28px

H5 – 24px

H6 – 18px

.text-size-large – 24px

.text-size-medium – 18px

.text-size-regular – 14px

.text-size-small – 12px

The more projects you work on, the quicker you’ll get at setting these up. We’ll be bringing out a tutorial on setting all this up in Figma soon so that you have everything ready in a starting template for a head start.

Setting the line height for your web design typography using percentages

Like before, there are no hard and fast rules here and sometimes you’ll even be given this information in brand guidelines or from the Art Director.

We always start in the same place and see how it feels when we put it into action.

Headings – we set all six of our heading styles to 120%

Body copy – all set to 150-160%

Setting up line height in percentage will save you a lot of time if you ever need to change your type scale in the future. Imagine setting your .text-size-medium class to 18px in size and then calculating 150% of this number and setting the line height at 27px. Then later you decide you need to reduce the size of this text class and you drop it to 16px instead of 18px. You then need to remember to calculate 150% of 16 (24px). If you forget to do this, your lines will be too tight.

By setting these up as percentages, not only do you make your own life easier, your developers will love you. It makes their life a lot easier too.

The next step is to start designing with your project fonts and see how it feels. All a bit too tight? Pump up the line height percentage a bit. Too spacey? Bring it down!

Some fonts work really well out of the box using these values, and some just fail. Every font is different, every project is different.

Breaking the H tag system to make your design work

As you might have figured out, if you can only have one H1 on each page, won’t that limit your design? Won’t every page start to look the same? Well, yes.

Technically, you can only have one H1 tag on a page, and the next heading would need to be an H2 tag. In modern development, we can set an H2 tag to be an H2 tag, no problem, but we can apply a visual CSS class to style this H2 tag, like an H1 heading. This goes for all heading tags throughout the project. You could have 6 different headings on one page, H1 through H6, all looking exactly the same, but each with their correct corresponding heading tag in the HTML.

It’s always best to speak to the developer of the project before you start designing to check if they’re happy with this kind of approach, or if there’s anything else you could do to make the han off from design to development smoother.

We hope this helps get you started!