Better Typography?

Does the font on this page look better than the rest of the website? Is it easier to read than the other pages? Has it scaled well with the device you are viewing it on? This seems like it can get subjective quickly... I'll just go through my thought process on this and talk about the styles I have used and how I would tweak them for a better desired result.

I created samples of all headings and paragraph text, and samples of those same elements using a <small> tag. I gave them all rem units with the exception of the small tag which is using the em unit (I will explain why later). In my styles, I set the base font-size by using a css clamp() function on the :root element. This will ensure that the font is at least 18px with a preferred calculation that cannot be larger than 24px. What about the <small> tag with its 0.67em? Well, em will be sized relative to the font-size of the element it is used in. It will be calculated as 67% the size of its parent. The rest of the elements' rem units were eyeballed as appropriate.

To elaborate on the clamp() I used on the :root element, the preferred size is calc(16px + 0.2083vw). I didn't pull that vw unit totally out of my ass - just hang tight and I'll explain (but it's gonna get mathy). At 1920px, I want the base font-size to be close to 20px. So, I need a calculation that will yield 4px. 4 / 1920 × 100 gives me 0.2083vw. This makes the font-size at 1920px 19.99936px (close enough). The clamp ensures that on my phone's 412px width, it uses 18px instead of the calculated 16.858196px (18px locks in just below 961px width). It also keeps the font from getting larger than 24px but that won't lock in until the viewport width goes beyond 3840px.

The above is not by any means the best option (maybe not even a good one - I'm not a designer 🤷). It's just the results of some experimenting I did to try to get a baseline to use on websites. One way to make this a little more precise would be to use @media queries to control the :root font-size. It's a tiny bit more work but would likely produce better results since the sizes can be tailored to perfectly fit different screen sizes. Below are the sample elements and the CSS I used to style them.

Also on this page, I've added a clamp() function on Elementor's "boxed" content max-width. It's designed to never go below 1140px and never go above 1920px. It will calculate the preferred size at 59.375vw. I think this would allow the boxed area to spread out a little more on larger screens.

Heading 1

Small Heading 1

Heading 2

Small Heading 2

Heading 3

Small Heading 3

Heading 4

Small Heading 4

Heading 5

Small Heading 5

Heading 6

Small Heading 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, itaque adipisci impedit saepe voluptatum, nisi quibusdam expedita ipsum nobis odit aliquam excepturi dolorum corporis nemo consectetur optio, sed commodi maiores!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptatibus explicabo accusamus voluptates dolorum officia! Asperiores laborum vero alias, totam in ut deserunt, explicabo itaque iure repellat ipsam sapiente ea?

/* Better Typography? */
:root {font-size: clamp(18px, calc(16px + 0.2083vw), 24px);}
p {font-size: 1rem;}
h1 {font-size: 2rem;}
h2 {font-size: 1.85rem;}
h3 {font-size: 1.6rem;}
h4 {font-size: 1.45rem;}
h5 {font-size: 1.3rem;}
h6 {font-size: 1.15rem;}
small {font-size: 0.67em;}
.elementor-section.elementor-section-boxed > .elementor-container {
max-width: clamp(1140px, 59.675vw, 1920px);
}

After I published this post, it dawned on me that I could have done side-by-side comparisons to whatever the default typography is I am using by adding my current theme's elements in one column, then adding the "better typography" elements in the column beside it. Then, the above could be simulated by setting the "better typography" column's font size via clamp(), and using em units in that column.

Timothy's Dev Stuff