I’ve been thinking about migrating to a new WordPress theme. Definitely webenso.com needs an updated look.
But I get paralyzed by all the choices out there, so I haven’t taken any action yet. In the meantime, I was really getting bothered by the small font size on webenso.com. So here’s how I made some simple tweaks to modernize slightly (at least) this site by making the text more readable with a larger font.
Why a larger font size?
You could do worse than model your blog or site after the leaders in your niche. I started to notice that sites that covered the topic of online marketing were not only using a larger font size than I was, but were also using a bigger line height. If you are not familiar with it, line height is a CSS property that defines the space above and below your lines of text.
When I transitioned from reading other online marketing and SEO blogs to mine, I found the experience jarring. Not only were the letters smaller but the smaller line height made the whole thing feel cramped.
Let’s take a look at some text from Neil Patel’s blog:
Note that there is plenty of space between his lines of text as well as his paragraphs. The other thing I note (a style that is increasingly common with other top bloggers), is that each of his paragraphs are really short. One or two sentences. Adding even more white space to the content.
I haven’t mastered this style of writing but I’m starting to incorporate it into my blogging.
I recently created an online course on Udemy: “How to do a SEO Site Audit” (this link will give you a discount on the course). One of the lectures covers content quality. It’s not just the quality of the writing that’s important, it’s also the quality of the reading experience which is helped by larger fonts and plenty of white space.
There are two reasons why the quality of the reading experience may matter for SEO:
- Better engagement metrics: Easier to read content might encourage visitors to stay longer on your site. Even if you don’t care about SEO at all, you should care about the stickiness of your site. Time on site might not be a direct ranking factor but likely influences SEO (people who stay longer might link to your site).
- Better Panda signal: I’m probably going out on a limb here, but we know that the Panda algorithm that Google released a few years ago compares your site design and experience against sites that human raters have evaluated as “trustworthy and high quality”. So this is one reason why I think it is good practice to model your site after industry leaders that are getting plenty of organic traffic.
Changing font size in WordPress
The styling of your WordPress site is handled in CSS stylesheets. In most WordPress themes you will find the CSS for your site in the style.css file which you will need to modify.
Some premium themes may provide you the ability to customize the font size for your theme without having to modify your files. That wasn’t the case for me.
Where to find your style.css file
You have two options for editing your style.css file, you can edit it directly in your WordPress admin by going to Appearances -> Editor or you can locate the file on your server which in most themes should be in the themes folder (wp-content/themes/themename). You would replace themename with your actual theme name. You would then use FTP or your cPanel file manager to get a copy of the style.css file, modify it and then upload it back to the server.
Here’s one YouTube tutorial on how to edit your style.css file.
https://www.youtube.com/watch?v=vT0o6udHWoE
Consider using a child theme
Keep in mind that changes to your themes file WILL get overwritten if you update your theme to a new version. A better approach is to create a child theme and make your customizations there. This will add some time, but it’s a one time setup so I highly recommend doing it.
Make sure to check any documentation that your theme comes with, as the actual steps to creating a child theme can vary.
The changes I made for font size and line height
Now that we know where style.css is, we now need to figure what changes to make. In my case I am using a child theme, so any changes I make to the style.css will override the original styles specified in the parent theme.
Unfortunately it wasn’t as simple as just changing “font-size: 10px;” to “font-size: 13px;” in the body statement. My particular parent theme CSS stylesheet had this for the font-size declaration:
body {
font-size: 62.5%;
line-height: 2em;
}
What this means is that the default font size is set to 10px (62.5% of 16px is 10px). Then the rest of the styles are scaled using “em”. This is an elegant solution used by many theme developers but did present me with a quandary. If I increased the default font size, it would impact everything on the site (2em of 13px is a lot bigger than 2em of 10px). I would have to potentially adjust all the styles for the new default font size.
That was way more than I was willing to do for a simple hack to increase the readability of my site.
Read more about Ems, pixels and using percents for CSS font-size.
What I decided to do is just increase the font size for the blog post content and leave everything else alone. In my theme the CSS class that governs the actual text of the post is named “entry”. You can use a browser extension like Firebug to figure out what CSS style controls which element on your site. Firebug also allows you to change styles on the fly (temporarily) so you can test a change.
Here’s what I placed into my child theme’s style.css:
.entry {
font-size: 1.8em;
line-height: 1.5em;
}
By using Ems to scale the text, this change preserves the integrity of the CSS approach that the original developer used. I realize that some other elements on the site should also be scaled up (for example the navigation bar now looks small) but as I mentioned I was just looking for a simple change to increase readability of my posts until I select a new WordPress theme.
Changes to stylesheets not immediately appearing
Keep in mind that your changes to CSS stylesheets may not immediately appear, even if you shift reload the page in your browser. This could be due to caching; not only if you have a caching plugin installed but also your hosting provider may also cache stylesheets. For the latter situation there isn’t much you can do about it. Some blogs recommend adding a version string to the URL of your stylesheet to force the updated version to get used but that is more than I wanted to tackle.
If this is a problem for you, test your change with Firebug, delete your cache, and sit back and wait for a few hours and the change will appear.
