Katelyn Brooke

5 CSS Tricks for Creating Hierarchy

tips and tutorials

20 Nov

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.

5 CSS tricks for creating hierarchy in text on your site || katelynbrooke.com

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!

8 Comments

« Moodboard 11
Into December »

Comments

  1. Erin E Flynn says

    November 20, 2014 at 9:58 am

    Great tips! I’ve been designing several sites lately with just a single font–it’s clean and modern and looks great!

    Reply
    • Marianne says

      November 20, 2014 at 10:49 am

      I’m SO into this look too Kate because of it’s simplicity. I have been collecting ideas for my redesign and seriously thinking about using just one font family. I always forget about letter-spacing so thanks for the reminder, it’s a GREAT option!

      Reply
  2. Jenn Coyle says

    November 20, 2014 at 11:26 am

    Text transform is my best friend! I also agree that simplicity is the way to go, and while I’ve tried to do 2 fonts in the past, I may look at just one moving forward :)

    Reply
  3. Kim Herrington says

    December 6, 2014 at 7:30 am

    I love the last bit of advice about not using them all at once. Phew, that’d be crazy if one did!

    Hierarchy is also really important for SEO because it helps show different elements’ importance to search engines. They’re not human, after all, so they use indicators like that to tell what we’re trying to place attention on.

    As a pro tip, every post should have one h1 tag and only one! If you’re wondering if all your posts do, grab BeamUsUp and do an SEO URL audit. It’s super easy, quick, and helps you find trouble spots.

    Reply
  4. Lionel Jenkinson says

    January 20, 2016 at 8:07 pm

    Simple, but much needed tips for my blog. I find it hard to do the color right as i often get confused about preferred color scheme.

    Reply
  5. Farhan Girach says

    October 10, 2018 at 6:59 am

    hi
    Great article. Mostly all designer have one headache is to choose relevant font and how/where to use property of font
    Thanks for sharing great idea

    Reply

Trackbacks

  1. Starred this Week says:
    December 13, 2014 at 12:01 pm

    […] I’m a big believer in hierarchy. […]

    Reply
  2. Link Favs | Vitoria Neves says:
    August 30, 2015 at 8:27 am

    […] These 5 CSS tips for creating hierarchy by Katelyn Brooke are very […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Connect

  • Bloglovin
  • Instagram
  • Pinterest
  • Twitter

Topics

design work
sketchbooks
moodboards
tips and tutorials
starred this week
monthly recaps

Pinterest

12 months ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 
gluten free carrot cake recipe

gluten free carrot cake recipe

1 year ago
gluten free carrot cake recipe
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

1 year ago
…
Continue Reading
 

Disclosure

There are some affiliate links on my site, which means that if you purchase something through the links, I may earn a commission. This is at no cost to you, and rest assured that I only recommend products that I use myself. Thanks again for visiting my blog!

This error message is only visible to WordPress admins

Error: No feed found.

Please go to the Instagram Feed settings page to create a feed.

Copyright © 2023 · Built on the Refined Pro Theme