How to style text: Introducing new TLDR section and cheatsheet

Hello!

One of the things I always struggle with in writing this newsletter is length. I write a lot. I’ve averaged over 1.7K words per issue!

I really want to walk you through the process of how design decisions are made, and walk-throughs take more explanation and detail, and, therefore, more words. But I want to make it easier to grab the key takeaways when you don’t have time to read the whole thing.

Introducing a new TLDR section that, when applicable, will include a helpful graphic or cheatsheet! The walkthroughs will still be there so you can join me in the learning process, but if you just want the punchline, I got you.

Enjoy!

TLDR

Question: How do we style text?

Answer:

1. Determine priority of the text.

2. Assuming your text is a regular font weight, pick one:

   • Emphasizing high priority text? -> Increase font weight

   • Deemphasizing lower priority text? -> Make it gray

   • Deemphasizing lower priority text AND it’s small? -> Make it gray AND increase the font weight

Important things to know:

• You rarely want to decrease the font weight lighter than “regular” – usually makes it hard to read and, therefore, inaccessible.

• Colored text is tempting, but rarely works. Usually just ends up being distracting, not looking very good, and being harder to read.

Cheatsheet:

When I think about design, my mind goes to colors, shapes, and fun fonts. But when I’m actually designing, especially when I’m designing an app, I find that I’m usually sticking to one font, maybe one or two colors, and, outside of icons, very few shapes. In fact, most of what I’m doing is styling text.

But how do you style text?

Styling text starts with understanding its role and prioritizing it.

How important is the particular text we’re working with? Do we want it to be loud and stand out, or do we want it to take a back seat?

Throughout this newsletter, I’ve frequently referred to the idea of the canvas as a stage. Some elements take center stage, others are supporting characters, and still others are merely background actors.

When I’m designing something, I find it helpful to think of my elements as actors and assign them a role – is this piece of text the main character, or should it take more of a backseat? Who’s the star?

Let’s explore this concept further by continuing on with designing our personal site.

Styling projects

To make sure we’re all on the same page, here’s where we left off:

We’re designing a personal site and using all the tools we’ve learned to build it piece by piece. Using an 8px scale, an 8px grid, and 12-column layout, we’ve laid out the projects section of my personal site.

I’m making a grid out of the different projects that I’ve done, and here’s what the first project element looks like.

Last issue, we focused on spacing and I feel good about how that turned out. We also discussed font sizes, which I also feel good about.

But even with those two things covered, it still looks like basic, unstyled text. Let’s figure out how to make it feel more polished.

We said that the most important thing about styling text is prioritizing it, so let’s do that now.

In this case, my prioritization is pretty simple – in fact, it’s already organized by priority!

The star of the show? The name of the project, “Not A Designer.” The supporting actor is the description and the background actors are the tags.

So where do we go from here?

From here, we need to think about what, stylistically, conveys importance.

What does priority look like in the design world?

Playing with weight

One way we can convey priority is to play with weight.

The most obvious definition of this is the literal font weight of the text. The thicker and bolder the text, the more important it feels. That’s because it’s taking up more pixels on the page and the more pixels something has, the more space it takes up, and so the more it draws our attention.

Let’s add some font weight to the title of this project and see how that feels. In Figma, I’m going to select “bold.”

That looks pretty good! It clearly calls attention to the top priority text and creates more differentiation between the title and the rest of the content.

But now I’m looking at the tags and feeling like they’re drawing a little too much attention to themselves. They’re not quite falling to the back like the background actors they are.

So what do I do now?

Should I keep playing with font weight, decreasing it to make it more subtle?

That’s certainly an option. The font I’m using, Inter, has a “light,” “extra light,” and “thin” font weight that I could try.

Let’s try the lightest weight and see how that would look.

Sheesh, that is really hard to read!

It’s tempting and logical to think that going down in font weight is a good way to de-prioritize text, but we usually end up with text that’s hard to read, especially for something like tags that are already a small font. When we style our text, we always want to check for readability. After all, our products need to be accessible.

So what else can we do?

There is one more thing we can do.

Bring in some gray

We’re going to go back to our original font weight but make the text gray.

Gray is simply a lighter shade of black, and by using gray for the text, we’re avoiding the distracting result of introducing a true color, but, at the same time, toning down the loudness of the text.

Let’s pick a medium gray and see how that feels.

I think I like it. It moves the tag to the background like I want, and there’s a clear visual representation of its priority level. The big bold text is most important, the regular text is next, and the small gray text is last.

But because the text is small, I’m worried I still have a bit of a readability problem.

What can I do to keep that background feel but increase readability?

One thing we can do is increase the font weight.

Let’s try that and see how that feels. I’m going to give it a small bump, from “regular” to “semi-bold.”

I like it! Keeping the text gray deemphasizes the content and increasing the font weight increases its readability. Great!

Here’s a summary to capture the process we just went through:

• To emphasize high priority text, increase font weight

• To deemphasize lower priority text, make it gray

• To deemphasize lower priority text that’s also small, make it gray AND increase the font weight

A prettier version of this summary can be found in the following flow chart I made for you. Feel free to use it in your next project.

Happy designing!

Saron