5 CSS Tricks for Creating Hierarchy

Picking fonts for your site can be really challenging. Luckily, there are tons of round-ups out there (and even more here!), but depending on your logo and brand, sometimes coming up with a combination that adds to the look of your site rather than just making it seem cluttered can prove to be more difficult than you might think.

Lately? I’m really liking the idea of picking one web font to use throughout a site. Just one. Doing this helps you create a look that is clean and cohesive. Talk about minimal, right?

But I’m also a big believer in hierarchy. Using headings is a great tool within blog posts, or even just as a way to help readers scan your blog and recognize post titles, widget titles, and body text.

Today I want to share 5 CSS tricks I use to create hierarchy in text without changing web fonts. But the cool thing about these tricks is that you can use them to change web fonts to put your own unique spin on them whether you’re using more than one web font or not.

Text-Transform

How does the font look in all uppercase? What about lowercase? Uppercase tends to be more traditional and powerful looking, whereas lower case headings can be more casual and soft. Both are great options!

Italics

Depending on the web font you’re using, sometimes the italicized version looks like a separate font in its own right. Italics are a great alternative to script fonts in that they are often less trendy and more legible, but still provide a fancier, more polished look.

Font-Weight

Try pairing the same font in varying font weights. You can use a bold weight for the headings and a thin one for the body text, or you can use a normal (like 400) for the body text and something ultra thin for the headings.

Letter-Spacing

This is one of my favorites! Adding just 1px of letter spacing to a font really changes the look. I usually reserve 2px for headings or buttons, but play around with it!

Color

This one is a no-brainer. You can totally use color to call out headings or add hierarchy to the text on your site. For a subtle monochromatic look, use 0to255.com to find web colors that are lighter or darker version of existing colors in your brand.

A word of caution: just because I’m listing all of these doesn’t mean you should use all of these on your site at once. Use them intentionally and sparingly, as you can easily make a cluttered look by combining all these even if you aren’t changing fonts.

I’m sharing this post as part of the Design Your Own (lovely) Blog Tour! I’m the last stop, but Marianne wrote an awesome post yesterday entitled 5 Common Design Mistakes Bloggers Make that you shouldn’t miss! This blog tour is a movement aimed at helping women to create lives they love by giving them confidence when it comes to their own blog designs. There were so many great posts, you can get the rest of the links here!