Improving typography is one of the most important things you need to do for your blog.

It leads to good audience retention, longer page visits, better UX and what not?

It refers to all the visual changes you need to do for text to make it stand out and readable. Good typography gives pleasure to the readers of your blog.

I am personally a great typography lover. I love reading content that’s beautifully presented with good fonts and colors.

Changing WordPress blog typography

In this post, I’m gonna give you some of the great blog typography tips. In order for you to implement what I suggest you in this post, you need to know some basics.

You need to use a good WordPress theme like Astra or GeneratePress, that comes with features like:

  • Speed
  • Mobile responsiveness
  • Google Fonts integration
  • Extensive text customization options in the WordPress Customizer.

In order to do the typography changes, you need to use these two features in WordPress.

WP Customizer Typography
Custom CSS
  1. WordPress Customizer
  2. Custom CSS (in case you don’t have powerful customizer or have some unique typographical requirements)

Supercharge your blog typography

Let’s dive in

In this section, I will provide you some of the tips and strategies that you can implement right now on your blog to improve the typography greatly.

Remember that good typography leads to good under engagement and experience and in turn boosts your SEO rankings.

Writing Undraw

Choose your font wisely

I’m not here to teach you the fundamentals of typography.

I’m here to explain you some of the concepts that enable you to choose the perfect typeface and font for improving your blog’s typography.

Broadly speaking, there are two main font typefaces for you to choose from:

A.SerifSansPrint
Credits: Fonts.com

Serif: This is the typeface you typically see in the print media like newspapers and also some magazines. It has “feet” and an added extensions. Examples are Times New Roman and Georgia.

The Serif typeface is associated with tradition, and the gold standard for press.

Sans-serif: These are considered to be more modern typeface, and are more used in the web-content and also in modern magazines. These fonts lack strokes at the end of the ends of the letters. The examples are Arial, Verdana, and Helvetica.

The Sans-serif type is associated with modern, clean, and futuristic approach.

Font Typeface Poll

I conducted a poll on FB. The respondents were other bloggers and digital marketers.

The data says:

Almost all mainstream printed newspapers, magazines, and books use serif type, and thus people are more accustomed to reading long texts in this style. However, given the research data, the difference in reading speed between serif and sans serif is apparently quite small. Thus, there’s no strong usability guideline in favor of using one or the other

A study by NNGroup

Earlier it was suggested to use the sans serif font for screen reading too as the screen resolution was very low to render serifs properly. But now, we’ve come a long way when it comes to screen resolutions, and sticking to sans-serif mainly keeping legibility in mind does not make sense.

Sans Serif Vs Serif
As you can see, drastic changes have occurred in web typography.
Source: SmashingMagazine (2013 study)

It all boils down to your personal preference. Pick one and stick with it.

If you are too paranoid, you can consider split testing the usage of serifs over the sans serif and track the engagement metrics.

In order to easily preview how a particular font looks like on your website, you may want to use a tool like TypeWonder.

TypeWonder

After typing any URL here, the tool will ask for choosing the font in order for you to preview. After you select the font and click enter, it’ll take some time and preview your given webpage with the given font family.

Alternatively, you can also make use of any font changing Chrome extensions like Font Changer, to change the font of any website you visit.

The psychology of fonts

You need to choose the typeface that reflects your brand. Mainly when it comes to typefaces you can project your brand as:

  1. Traditional, Respectable, Reliable: Use Serif font
  2. Modern, Minimalistic, Progressive: Use Sans-serif
  3. Stable, Masculine, Strong:, Impactful: Use condensed fonts (only in headings)
  4. Beauty, Elegance, Feminine: Use handwritten or script-based fonts (only in headings)
WSJ Serif

Many news websites use the serif typeface due to the association of printed text with reliability -, especially in the pre-internet period.

Audi Impact
Source: https://1stwebdesigner.com/professional-high-quality-fonts/

On the other hand, you may want to make use of condensed fonts like Oswald, Impact, to showcase the sturdiness and strength of your brand. Condensed fonts are masculine in nature and best suited for men fashion and fitness blogs.

Slashed Beauty
Source: futurederm.com

If you are a female blogger, you may want to avoid using condensed fonts and instead use handwritten fonts in subheadings as it associates you with beauty and elegance.

Blog Layout

Blog Layout

Readers come to your blog to read content. Presenting content in a great way should be your first priority.

Any elements that distract the main reader from reading your content should be removed. For example – pop-unders, multiple popups, etc.

  • Your sidebar may be too close to the main content of your page. This distracts the readers while reading your content. You should leave some white space between the main content container and the sidebar area. You can adjust the width of the sidebar or main content area with the help of CSS.
  • In most cases, just decreasing the width of the sidebar works well. Tweak the CSS in style.css and make sure you preview the changes using inspect element or other means. CSS code may vary.

You should maintain plenty of whitespace between your main content and other elements of the page.

Whitespace

The main content and the sidebar content should be easily distinguishable.

Paragraphs

  • Have you noticed that the paragraphs are of varied length in good blogs? Mixing up short and long paragraphs is a great way to improve the typography of the content. It tricks your readers to read your content completely.
  • Don’t write long paragraphsLongest paragraph on your blog should contain 80 words. Try shortening your paragraphs. Strip them up to individual ideas. No one likes to read heaps of text.
  • Alignment of the paragraphs should be left on your blogCenter alignment is only used when presenting a story, poem, etc. in some cases.
  • There should be enough space between the paragraphs.
    Space between paragraphs
    This can be made possible by adding a margin-bottom property to paragraph via a custom CSS code.
    p { margin-bottom: 28px; }

Lines

  • A typical line should contain 50-70 characters. 
    Number of characters
    Usually, on my blog, I have around 58 characters per line. This thing totally depends on the font size and width of the content.
  • The width of the content can be modified by tweaking the CSS or the WordPress Customizer.
  • The space between the lines should be more. This can be achieved by tweaking line-height property in CSS.
    Line height
    When you maintain a good gap between the two lines, readers find it easy to shift from line to line. It comforts their eyes. I suggest you to keep a line height of 1.7.
Line Height
Credits: Microsoft

Title of the blog post

This is the first thing that people see when they land on your page.

  • The font size of the title should be larger than all the other header tags. On my blog, my h1 or title font size is 36px.
  • I advise you to keep the title of your post in Sans-serif if the content of your post is in Serif; and vice-versa.
  • The line height of the title should be lesser than that of the main content. I’ve maintained a line-height of 1.2.
  • There should be enough margin between the title and the below content.

See the below code.

.entry-title {
 font-family: Lato, sans-serif;
 font-size: 36px;
 margin-bottom: 30px;
 line-height: 1.2;
}

You may also tweak the CSS code of h1 tag. If you are using good WordPress themes like Astra or GeneratePress, you’ve got this option inside the WordPress Customizer.

Body font

I absolutely love the Sans-serif font for the body of the content. I usually keep the font-size 20px. Again it all depends on the font family you are using. Font size of 16px – 20 px are quite common. I insist you to stick within that range. Font sizes below 16px are very difficult to read especially for people with near-sightedness.

The font weight should be low. It makes your text look thin and creates a contrast between heading and your main text. I’m not a fan of having a light font weight, I would suggest you use medium weight.

Coming to the color, many suggest to keep the font color of the body slightly lighter than true black. Don’t keep it a true black. Something like #111111 works great and gives a softer look of the text and helps with the contrast.

The background color of the body should typically be white. If you are after the dark color schema for your blog, then it’s fine.

But the bottomline is that the background color and the font color should create a nice contrast and render texts clearly legible.

Avoid coloring the text in red and green. Because, around 8% of the men are color blind.Do not use more than two font families on your blog. I’ve been using the font pair Oswald and Helvetica. These two create a nice contrast while readers are reading your content.

Font Family Usage

According to this research done by SmashingMagazine where they analyzed data from 50 well-respected websites in 2013, they saw that there’s a rise in using custom fonts from services like Google Fonts, Typekit, when compared to the earlier research.

Here are some of the most popular and my favorite font families (when it comes to usage in body with white/light background).

Sans Serif Typeface

  1. Helvetica Neue
  2. Open Sans
  3. Roboto
  4. Lato
  5. Raleway

Serif Typeface

  1. Merriweather
  2. Noto Serif
  3. Georgia
  4. Caslon Pro
  5. Lora

Font pairing

You need to use not more than 2 font families on your blog.

You need to also adopt something called as font pairing on your blog content.

It’s crucial for better typography and readability in web content and also graphics. It creates a nice contrast when it comes to typography and boosts the overall user-experience on your site.

You need to choose complimentary fonts to pair.

You have several font pairing options to choose from.

Main ones are:

  1. Sans-serif / Serif combination
  2. Serif / Sans-serif combination
  3. Condensed font / Sans-serif or Serif combination

As of writing this post on my blog, I was using Oswald + Helvetica.

Font Pairing

It creates a nice contrast and good visual hierarchy for people reading the content.

If you like to explore further into font pairing, use a free tool called FontPair.

Headings and hierarchy

The headings that I’m talking about here are h2, h3, h4, h5, and h6. In my blog font sizes of headings are 38px, 30px, 28px, 24px, and 20px respectively.

It’s not only about the font size when it comes to headings. The typographical elements of headings should have prominence over the other text on your blog.

Font families of these headings should be contrast to that of the main text, so as to stand out. This kind of promience can be achived through font color, size, weight, psacing, etc.

Heading font color depends upon your taste and should match the color scheme of your theme. But most of them stick to black color. You can also use higher font-weight, to make the headings appear bold.

h2 {  font-size: 32px;  color: #CC4A00;  font-weight: 700; }
Heading Margin
Credits: Apple

You may also want to use margin-bottom, to keep a gap between the headings and the content.

You may also want to use margin-bottom, to keep a gap between the headings and the content.

You can also make these changes right inside your WordPress Customizer too.

Headings and subheadings are present in your post editor to split up your content effectively into sections, and help readers easily discover the piece of content they are looking for.

In order to not confuse your readers, you need to only use heading-3 tag within the heading-2 tag not other way around.

The default standard of links on the web is blue and underlined.

If you are using a good theme, it removes the underline and the old-school blue color of the links and replace it with your theme’s primary color.

In addition to these, you can consider tweaking some of the visual aspects of your hyperlinks.

For example, below is the CSS code to add a light orange underline for all the contextual links on your blog.

.entry-content a {
color: #3870A7;
border-bottom: 1px solid rgba( 204, 51, 0, 0.1 );
}

Use of bold and italics

You need to make proper use of bold and italics on your blog.

Just put bold to some of the important sentences and words in your blog.

If you want to stress a particular word that can be easily skipped or misinterpreted, use italics.

If you are using serif as your font family inside the content, then italicizing the keywords helps some text to standout.

On the other hand, if you are using sans serif font on your blog, you need to make more use of bold texts. The italic text in the sans serif won’t tend to stand out as much as in serif.

However, it’s worthwhile to note that:

Bold tag = STRONG Emphasis
Italic tag = WEAK Emphasis

Before bolding any text, first you need to try italicizing it and see if it can suffice.

Akshay recommends: Bold, Italics and Underlines: How to Use Them Effectively in Your Blog

Lists

If you use many bullet points in your content, you have to maintain little gap between the two paragraphs. The lists should be clearly distinguishable to let your readers scan them easily.

For unordered bullet list, you can add this CSS.

.entry-content ul > li {
 list-style-type: disc;
 margin-bottom: 18px;
}

You can do the same for numbered/ordered list.

List margin
.entry-content ol > li {
 list-style-type: decimal;
 margin-bottom: 18px;
}

You can also add circles, arrow marks or other unicode icons to the bullet points.

Circle List
Arrow Lists

For this, you may want to add custom CSS to your theme hiring a developer or you can make use of WordPress Gutenberg plugins that come with Icon List module or a page builder.

Subtitle or Lead paragraph

Some blogs and majority of the news sites have the habit of writing lead paragraphs. They are typically above the main introduction part of the post. Treat them like pre-introductions.

Lead paragraph

It just helps your readers read through the rest of the article.

You need to consider increasing the font size and putting bold while writing the lead lines.

Color could also be changed to dark grey, so as to catch readers’ eyes.

Image typography

When you are creating images for your blog that have text in them, consider mixing up script fonts with regular fonts.

Script

You can also combine the same font with different weights.

There’s an excellent article on image typography by Canva. Make sure you read it.

If you include more screenshots in your blog posts, you need to consider adding a niche drop shadow effect to the screenshots via a CSS.

Screenshot Shadow
.screenshot img {
box-shadow: rgba(23,43,99,.24) 0 7px 28px;
}

Now for the screenshot images you use in your posts, you need to add a CSS class – “screenshot”.

Typography Infographic

WordPress plugins for typography

Some of the WordPress themes that you may be using may not come with Google Fonts and many other functionalities. In those cases, you may need to make use of free plugins like Styleguide, Use Any Font, etc.

Dropcaps

Earlier we wanted to use a separate dropcaps plugin, but now after WordPress 5.0 update implementing drop cap is just a click away.

Zeno Font Resizer

If your visitors like to read your content in different font sizes, it’s cool to give them some freedom. Although they can zoom in/out the webpage for increased/decreased font size, having a font resizer widget is really neat. You may want to include some bookmarkers or you can use a plugin like Zeno Font Resizer.

There’s a great plugin called WP Typography, that enables you to implement many typography features on your WordPress site.

Wp Typography

It enables you to have effective hyphenation, space control, CSS hooks for styling, intelligent character replacement, and many more common typographical nuances.

Wrapping up

You’ve come to the end of this post.

To sum it up, I would like to advise you to wear the shoes of your readers and browse your website to make sure that the UI and UX is great.

Be extremely careful when you make unconventional/weird choices when it comes to typography. In the end, it’s not only about design, but it’s also about readability.

What typography tips you’ve got? Let me know in the below comments!