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.
- WordPress Customizer
- Custom CSS (in case you don’t have powerful customizer or have some unique typographical requirements)
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:
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.
I conducted a poll on FB. The respondents were other bloggers and digital marketers.
The data says:
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.
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.
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:
- Traditional, Respectable, Reliable: Use Serif font
- Modern, Minimalistic, Progressive: Use Sans-serif
- Stable, Masculine, Strong:, Impactful: Use condensed fonts (only in headings)
- Beauty, Elegance, Feminine: Use handwritten or script-based fonts (only in headings)
Many news websites use the serif typeface due to the association of printed text with reliability -, especially in the pre-internet period.
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.
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 paragraphs. Longest 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 blog. Center alignment is only used when presenting a story, poem, etc. in some cases.
- There should be enough space between the paragraphs.
This can be made possible by adding a margin-bottom property to paragraph via a custom CSS code.
Lines
- A typical line should contain 50-70 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.
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.
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.
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.
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).
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:
- Sans-serif / Serif combination
- Serif / Sans-serif combination
- Condensed font / Sans-serif or Serif combination
As of writing this post on my blog, I was using Oswald + Helvetica.
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.
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.
Hyperlinks
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.
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.
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.
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.
You can do the same for numbered/ordered list.
You can also add circles, arrow marks or other unicode icons to the bullet points.
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.
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.
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.
Now for the screenshot images you use in your posts, you need to add a CSS class – “screenshot”.
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.
Earlier we wanted to use a separate dropcaps plugin, but now after WordPress 5.0 update implementing drop cap is just a click away.
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.
It enables you to have effective hyphenation, space control, CSS hooks for styling, intelligent character replacement, and many more common typographical nuances.
[“source=bloggingx”]
