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!
Great tips! I’ve been designing several sites lately with just a single font–it’s clean and modern and looks great!
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!
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 :)
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.
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.