Boost Responsiveness, Balance, & Accessibility with These Top Typography Tips!

When it comes to website design, we tend to spend a lot of time talking about things like color, spacing, layouts, and interactive features.

But it’s impossible to make any of those things look good if you start off with bad typography.

In this article, we’re going to focus on 5 impactful tips and tools that will instantly elevate your typography game; making your websites more responsive, balanced, accessible, and easier-to-read.

If that sounds interesting to you, then stick around and let’s get started!

Prefer video tutorials? Check out this article in video form!

Tip #1: Use Clamp for Responsive Text

If you’re still setting font sizes for all your breakpoints using the settings in your page builder or by writing out media queries, then I highly suggest you check out clamp functions and save yourself a lot of time and headache.

Clamp works by setting a minimum and maximum size for your text and then does all the calculations for you to scale your text up or down depending on the device width.

They typically look something like this:

	font-size: clamp(2.28rem, 2.3vi + 1.71rem, 3.55rem);

The biggest problem with clamp functions is that they can be complicated to write. This fact alone tends to make many people shy away.

But most people don’t write their own clamp functions — they use free online clamp calculators to do it for them.

Personally, I like the calculator on Chris Burnell’s site because it’s simple to use and uses logical properties for the viewport units.

Here’s a quick example of how to use it:

1. Define Your Font Sizes: Let’s work on our H1 headings. On our smallest screens, we want the equivalent of 40px, and on larger screens, 64px.
2. Set Your Viewport Values: For the minimum viewport, use a phone size like 400px (or wherever you want your text to stop scaling smaller), and for the maximum, use your site’s content width (e.g., 1200px).
3. Generate the Clamp Function: Hit calculate, and the tool provides the clamp function, which you can copy and paste into your CSS.

I’ll usually leave this calculator open, and so long as I don’t refresh the page or press the reset button, I don’t have to change out the viewport settings and I can go through and define all of my typography.

But you might be wondering where to even start with defining your font sizes… Which leads me to my next tip…

Tip #2: Use a Type Scale

The best way to set your font sizes — at least initially — is by using a typography scale.

A typography scale uses mathematical equations to create a balanced design that ensures all of your font sizes work proportionately with one another.

These often use the same naming convention as music intervals. Just like music intervals use these ratios to produce music that sounds harmonious — typography scales use similar ratios to create harmony.

But don’t worry — smart people have already done the math for us and created some really neat visual tools.

Here at typescale.com, you can see we have a bunch of settings on the left-hand size. Then, in these two windows, we have a preview of the font sizes and a preview of what that would look like on an actual website.

As you change the body size or scale, you can see these values update in real time.

If you use a large scale — one where the steps between each interval are much bigger — like a Perfect Fifth, you can see our font sizes scale up pretty dramatically.

But if you use a smaller scale, like Major Second, the difference in size between each level is much smaller.

Tools like this will help do the math for you, but you’re still going to have to use your subjective opinion to decide what scale works best for your design.

Generally speaking, we’ll use a slightly bigger scale for desktop than we will mobile.

You can pick up the Pro version of Typescale.com for $36/year to get responsive scales and a bunch of other goodies. I’ve not used the pro version myself, but it looks pretty neat.

If you’re willing to have a less polished UI, I actually really like the Fluid Type Scale…

Fluid Type Scale

Here we can set our base sizes, screen with, and type scale ratio for both mobile and desktop.

But what I really love about this tool is the ability to define how many steps you want.

Here in the All Steps box, you can set what “levels” of font sizes you want.

As a starting point, I’ll use body-small, body, h6, h5, h4, h3, h2, h1 — but you can add more or less levels of headings based on your design or systems.

Then, set your baseline — as in what’s going to be your base font size (in my base that’s ‘body’).

If you scroll to the bottom of the page, you can see your type scale in action and use the slider to see how it looks on desktop all the way down to mobile.

Like the clamp calculator we used before, this tool also uses logical properties, and it’s taken everything we’ve put into this form and calculated it all for us.

Unfortunately, it’s either really difficult or impossible to grab these clamp values one-by-one, so I will copy all the code, drop it into a text editor and grab the values I need.

Tip #3: “Looks-like” Classes

What we discussed so far is great for setting up my HTML elements like all my heading sizes, but that often puts people in a position where they start to use heading levels based off size instead of semantics.

It doesn’t take much digging to find sites where you can tell they used heading levels for the desired visual effect, ignoring the fact that this put their headlines out of sequential order, and made a huge mess in terms of accessibility.

To avoid this, I like to create “looks like” classes.

For example, I would create a class with identical settings to my H3.

This way I could make anything — an H2, a H6, or even a paragraph — look like my H3.

This gives me the flexibility to style things consistently, but use my HTML elements semantically.

Doing this — at least for now — in GeneratePress & GenerateBlocks is a bit tricky… And I’m not sure if any other page builders have a system for this either — so let’s dive into what it looks like with code.

Here I have all the values for my H1 heading:

h1{
	font-size: clamp(2.28rem, 2.3vi + 1.71rem, 3.55rem);
	line-height: 1.1;
	/* ...all the rest of my typography settings */ 
}

To make a look-alike class, I’ll just add a comma after my h1, and add a new class — like “.looks-h1”.

h1, .looks-h1{
	font-size: clamp(2.28rem, 2.3vi + 1.71rem, 3.55rem);
	line-height: 1.1;
	/* ...all the rest of my typography settings */ 
}

This way, I can use an H1 element or add the looks-h1 class, depending on context, and they will look identical.

I’ll go through and do this for all of my headings and body copy and put it into my style.css file instead of setting up all my typography in the customizer.

Unfortunately, this is a bit more work — but, for me, it’s worth it because it gives me more flexibility and helps make my websites more accessible.

Tip #4: Line Height

Okay, we’ve been in the weeds a bit here, so let’s pull back and talk about something a little less overwhelming; line height.

I think the consensus is that there’s an inverse relationship between font size and line height.

Smaller text — like your body copy — needs more line height, while bigger text — like your headings — needs less.

And for setting up the defaults in your design where you can program specific line heights into your elements or classes, I think that is generally true.

But I think it’s important to realize that it’s not actually the font size that matters, it’s the amount of text.

Let me show you what I mean.

Our body copy usually needs a line height of 1.5 or more because we’re usually writing longer, multi-line paragraphs of text with our body copy. Having lots of line height makes passages of text like this a lot easier to read.

But if we used that same line height for just 2 lines of text — like in these little sub-headings underneath a headline — the line height looks much too big.

To make this look right, we’d probably need to tighten up this line height to something like 1.2 or 1.3.

This works in reverse with headlines, too. It’s not a practical example — because you most likely won’t use headlines in long paragraphs — but you’ll see this 1.1 line height looks great on this 2-line headline…

But it becomes hard to read once we go to 4 or more lines.

I know this is frustrating for people who want to set their values and have it work in every context — but design is more nuanced than that.

I still set my bigger font sizes to a smaller line height and smaller text to a larger line height — because that will work in most cases. I just wanted to point out that it doesn’t work in every case, and it’s little details like dialing in the line height based on context that really make a design come together and look polished.

Tip #5: Text Width with CH

Similar to line height, there’s also a correlation between the size of a font and how long lines of text can be and still be able to read it comfortably.

It’s the reason you see such narrow containers on popular blog sites like Medium, news sites like the New York Times, or even inside our social feeds.

You’ll find a lot of more amateur sites using a wide content width for long-form, small text.

It turns out that our eyes have trouble tracking from one line to the next when we go over about 70 characters on a single line.

And thankfully, there’s a CSS unit for that!

If you’re unfamiliar, the character unit (or “CH”) lets us set the width of an element based on how many characters (specifically the zero) fit inside of it.

This means we can set a container to something like 65ch, and be confident that our text will never be too wide to comfortably read — even if the visitor has changed their font size.

Setting a container’s width in ch units is great for long-form content because it keeps text lines from becoming too wide and difficult to read.

It may not be practical to size every container with CH, but I would strongly consider it anytime you have long-form text.

Little Tweaks, Big Impact

Typography comprises a significant part of your website’s content, and even small improvements can have a big impact on the overall user experience. By implementing these five tips, you can help ensure your typography is responsive, balanced, accessible, and visually appealing.

Which of these tips or tools were new to you? What was your biggest takeaway? How have you applied these tips to your own projects? Share your thoughts and experiences, with our Facebook community!