Design series – title, headings, body text

This is how titles (<h1> elements) and headings (mostly <h2> elements, maybe some <h3> elements) look like:

I wish that the lowest level headings are (roughly) same size as body text, but bolded. The headhing level 2 can be a bit bigger, and heading level 1, which I use for the tile, can be prominent.

Also, the headings should be more connected to the following paragraph than the preceding one.

Here’s what we do:

  • Reset everything with some exceptions
  • Choose basic font-size
  • Choose basic line-height
  • Choose remaining sizes and margins

Make it look nice in my default browser usages (1/3, 1/2, phone, iPad, …)

Reset everything with some exceptions

Reset the margins and paddings and make sure the line length stays sane.

:root {
	--measure: 66ch;
}

* {
	margin: 0;
	padding: 0;
	max-inline-size: var(--measure);
}


html, 
body, 
div, 
header, 
nav, 
main, 
footer {
  max-inline-size: none; 
}

Choose basic font-size

Here I use the code

font-size: calc(1rem + 0.#vw);

with different values for # to resize the text relative to the browser width, but keep it at least as big as the browser (user) default.

By playing around with the values and looking at the result in different browser window sizes, I finally chose this

font-size: calc(1rem + 0.3vw);

Choose basic line-height

Playing around with the line height, I fell a value between 1.2 and 1.3 seems to be right. So I go with 1.25.

:root {
	line-height: 1.25;
}

That also means that our basic grid is 1.25rem, and the “grid lines” would be at 0, 1.25, 2.5, 3.75 etc.

Choose remaining sizes and margins

We want our paragraphs to start on the grid. That means our top and bottom margins should add up to a multiple of 1.25. I used the Grid Lover tool to arrive at the following setup:

p {
  margin-top: 0rem;
  margin-bottom: 1.25rem;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin-top: 0rem;
  margin-bottom: 0rem;
}

h2 {
  font-size: 1.3125rem;
  line-height: 2.5;
  margin-top: 1.25rem;
  margin-bottom: 0rem;
}

h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-top: 0.9375rem;
  margin-bottom: 0.3125rem;
}

And this is how it looks after applying those styles:

References

For inspiration I read the following sources: