Our consensus about usability, UX and aesthetics
Rationale for decisions is indicated by this icon: 👉
h1 divided by the font size of an h2 should be the same as the font size
of an h2 divided by the font size of an h3, etc).
However, there are 6 possible levels of headings, and then “normal” text, which gives a total of seven different sizes to reflect the structure
(the outline) of the document.
Because the smallest headings (h6 and h5, even h4) are used way less often, we stop differentiating sizes after h4: we put no differences between the
sizes of h4, h5, h6 and p (but headings will look different still, because of indentation, font weight, colour, etc).The layout changes from a narrow, single-column page on “extra small devices (portrait phones, < 576px)” and “small devices (landscape phones, ≥ 576px)” to two columns on “medium devices (tablets, ≥ 768px)” and three columns on “large devices (desktops, ≥ 992px)” and “extra large devices (large desktops, ≥ 1200px)” (see Bootstrap 4.x’s responsive breakpoints).
Depending on the needs and the nature of your page, you can enable or disable certain CSS classes that, when applied to html, will cause some of the main
elements to disappear, and the extra space to be used by the rest of elements.
So, for example, if your page is simple and short enough that it does not need a navigation bar and a sidebar, you can simply not use one of them (or neither)
and ensure that the width available will be used more harmoniously and efficiently by the main content of the page.