Assign Roles to Fonts on Your Blog Site - dummies

Assign Roles to Fonts on Your Blog Site

By Melissa Culbertson

When you assign roles to your fonts, you help keep your blog design looking professional. Keeping your font’s purpose clear makes your blog navigation design more effective and your overall design easier on the eyes.

After you choose two or three complementary fonts that also have enough contrast to stand out from each other (see the preceding section), give the different fonts you choose specific roles in your design. To start, establish a visual hierarchy for the fonts. Think about the text elements you have within your blog design, such as the following:

  • Blog name

  • Tagline

  • Navigation menu

  • Blog post title

  • Subheadings

  • Blog post and page content

  • Sidebar titles

  • Footer headings

Each element should have a consistent look yet appear cohesive when looking at your entire blog design. By giving each text element a specific look, you create a hierarchy that helps the reader scan your page and digest your content. With the two or three fonts you choose for your blog design, you can establish hierarchy in these text elements by using the following:

  • Color: Color naturally attracts the eye, so colored text elements catch the most attention. For example, using a black blog post title with green text beneath would feel a little off because a reader’s eyes might pull to the green text, completely bypassing your post’s title.

    Save bolder colors for more important text elements to attract the most attention.

  • Size: Larger font sizes denote more importance than smaller ones. This means your blog post titles need to be larger than your blog post content. On that same line of thought, subheadings with your blog posts should be smaller than your blog post titles but larger than your blog post content.

  • Weight: Use weights — for example, light, bold, and italics — to create hierarchy without adding more fonts to your design. More heavily weighted text elements carry more importance than lighter design elements, so keep this in mind, especially when considering your blog post titles and blog post content text.


  • The graphic text is an unusual font that appears only on a few elements that remain pretty static within a blog’s design. (Use graphic text sparingly because search engines can’t read it and creating graphic text is more work than content text.)

  • For the navigation and blog post titles in particular, a font was needed that could display as content text but wanted the font and color to make these elements stand out in the design.

    To accomplish this, an embedded font was used and all the heading-type elements were grouped together with this font. A hierarchy of relative importance was created among the headings by applying different sizes and colors. This embedded font still complements the graphical text in that they use the same letterform, as illustrated in the lowercase a.

  • For the blog post and page content font, note that the font selection is much plainer than the blog name and heading fonts so that the main text is easy to read in large bodies of text. This font is also web-safe. With a similar x-height to the other two fonts, this font rounds out the font choices nicely.

You don’t have to use all these formatting and design options. Just consider them as ways to give each text element a specific role within your blog design.